Jump to content
suzzil60

HTML and CSS

Recommended Posts

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>Professional Webite Development-Welcome</title>

<link rel="stylesheet" type="text/css" href="css/index.css">

</head>

 

<body>

<div class="main-wrapper">

<header class="top-content">

<div id="soft">

<h1>Isoft</h1>

</div>

<nav class="main-menu">

<ul class="sub-menu">

<li><a href="#">Home</a></li>

<li><a href="#">services</a></li>

<li><a href="#">About</a></li>

<li><a href="#">my profile</a></li>

</ul>

</nav>

</header>

</div> <!--main-wrapper-->

<div class="main-wrapper">

<section>

<article>

<h2>Software Development</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

 

 

</section>

</div>

 

<div class="main-wrapper">

<section class="main-content">

<article>

<h2>Computer Programming</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

</section>

</div>

 

<footer>

<p>copy right &copy; All right reserved

</p>

</footer>

 

</body>

 

 

</html>

 

                                                                                                                     CSS

 

 

*{

margin: 0;

padding: 0;

}

 

body{

background: #dcdcdc;

}

 

.main-wrapper{

width: 80%;

margin-left: 100px;

}

 

 

 

header{

background: blue;

margin-bottom: 50px;

}

header h1{

color: #fff;

font-family: luminari;

font-size: 30px;

padding-left: 30px;

 

}

 

 

#soft{display: inline-block;

 

}

 

 

.main-menu{

display: inline-block;

text-align: right;

width: calc(100% - 100px);

}

 

.main-menu li{

display: inline-block;

font-size: 20px;

text-decoration: none;

padding: 10px;

 

 

}

.sub-menu a{

text-decoration: none;

color: white;

}

 

section{

border: 1px solid #000;

text-align: justify;

padding-right: 15px;

padding-left: 15px;

overflow: hidden;

box-sizing: border-box;

width: 65%;

background: #fff;

font-family: tahoma;

float: left;

 

 

}

 

section h2{

padding-top: 20px;

}

 

section p{

padding-top: 10px;

padding-bottom: 10px;

line-height: 1.4em;

font-size: 14px;

}

 

.main-content{

border: 1px solid #000;

text-align: justify;

padding-right: 15px;

padding-left: 15px;

overflow: hidden;

box-sizing: border-box;

width: 30%;

background: #fff;

font-family: tahoma;

float: right;

 

 

}

 

.main-content h2{

padding-top: 20px;

}

 

.main-content p{

padding-top: 10px;

padding-bottom: 10px;

line-height: 1.4em;

font-size: 14px;

}

 

footer{

background: #000;

}

WHAT 'WRONG WITH MY CODE? WHY DOES FOOTER NOT DISPLAY ON BOTTOM ?PLEASE KINDLY GIVE ME SOLUTION

Screenshot (106).png

Share this post


Link to post
Share on other sites

Add "clear: both" to the CSS of your footer. Content that follows a floated element will try to go next to it.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...