Jump to content

HTML and CSS

suzzil60

By suzzil60
in HTML/XHTML

 Share

Recommended Posts

suzzil60 Newbie

suzzil60

Posted
Posted

<!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

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...