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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×