Class-06-18-03-2017-Professional Web Design ~ CodexColors

Class-06-18-03-2017-Professional Web Design

Class-06-18-03-2017-Professional Web Design Code

HTML Code:-

<html>
 <head>
  <title>Class no. 6</title>
  <link rel="stylesheet" type="text/css" href="class-six.css"/>
 </head>
 
 <body>
  <div class="content-wrapper">
   <div class="header">
    <div class="logo">
     <a href="#">
      <img src="images/logo.png"/>
     </a>
    </div>
<div class="menu">
     <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div class="banner">
    <h1>
welcome to <br> webcode institute</h1>
</div>
<div class="about-us">
    <div class="about-image">
     <img src="images/banner2.jpg">
    </div>
<div class="about-content">
     <h2>
What is Lorem Ipsum?</h2>
<p>
rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley </p>
</div>
</div>
<div class="service">
</div>
<div class="team">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

CSS Code:-

body {
 margin: 0;
 padding: 0;
}

.content-wrapper {
 width: 990px;
 margin: auto;
}

.header {
 overflow: hidden;
}

.logo {
 width: 25%;
 background: red;
 float: left;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
}

.menu {
 width: 75%;
 background: gray;
 float: left;
 padding: 25px 0px 24px 0;
}

.menu ul {
 list-style: none;
 padding: 0;
 margin: 0;
 float: right;
}
.menu ul li {
 float: left;
 margin-left: 10px;
 margin-right: 10px;
}

.menu ul li a {
 text-decoration: none;
 padding: 10px 20px;
 display: block;
 border: 1px solid black;
 background: white;
 transition: all 1s ease;
}
.menu ul li a:hover {
 background: red;
 border-color: red;
 color: white;
}

.banner {
 overflow: hidden;
 background-image: url(images/banner.jpg);
 background-repeat: no-repeat;
 background-size: 100%;
 text-align: center;
 padding: 120px 0;
}

.banner h1 {
 font-size: 50px;
 color: green;
 text-transform: uppercase;
}

.about-us {
 overflow: hidden;
 padding-top: 50px;
 padding-bottom: 50px;
}

.about-image {
 width: 50%;
 float: left;
 text-align: center;
}

.about-image img {
 width: 100%;
}
.about-content {
 width: 45%;
 float: right;
}

See Will Result:

Class no. 6

What is Lorem Ipsum?

rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley