Class-03-10-03-2017-Professional Web Design ~ CodexColors

Class-03-10-03-2017-Professional Web Design

Class-03-10-03-2017-Professional Web Design Code:

Layout

<html>
 <head>
  <title>Web design class 3</title>
  <style>
    body {
    margin: 0;
    padding: 0;
   }
   .body-wrapper {
    width: 960px;
    height: 2000px;
    background: #7fff00;
    margin: 0 auto;
   }

/*    header   */
   .header {
    width: 100%;
    height: 100px;
    background: yellow;
   }

.logo {
    width: 30%;
    height: 100px;
    background: black;
    float: left;
    text-align: center;
   }

.logo a {
    font-size: 40px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    margin-top: 23px;
   }

.menu {
    width: 70%;
    height: 100px;
    background: #006400;
    float: left;
   }

.menu ul {
    list-style: none;
   }

.menu ul li {
    float: left;
   }

.menu ul li a {
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    background: #ff7f50;
    border: 1px solid black;
    margin-right: 10px;
    padding: 15px;
   }

</style>
 </head>
 <body>
  <div class="body-wrapper">
   <div class="header">
    <div class="logo">
<a href="#">Logo12</a></div>
<div class="menu">
     <ul>
<li><a href="#"> Home</a></li>
<li><a href="#"> Team</a></li>
<li><a href="#"> Service</a></li>
<li><a href="#"> About</a></li>
<li><a href="#"> Contact</a></li>
</ul>
</div>
</div>
<div class="team">
</div>
<div class="service">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

You can edit the HTML, Copy the Code areas HTML code to Paste our online HTML editor Page Or below HTML Editor area Now Practice

See Will result

Web design class 3

Class-03-10-03-2017-Professional Web Design

0 comments:

Post a Comment

FIND US ON FACEBOOK

Categories

Blog Archive

Popular Posts