divTrain1

In this example below you will see how to do a divTrain1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ferencok, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ferencok ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>divTrain1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <title>
    </title>
    <meta charset="utf-8">
    </head>
  <body>
    <div id="mainbox">
       <header>
         <div class="logo">
           <h2>logo</h2>
         </div>
         <div id="headbox">
           <nav class="topnavi">
             <ul>
             <li>home</li>
             <li>galery</li>
             <li>project</li>
             <li>about us</li>
             </ul>
           </nav>
           <div class="searchbox">
             <p>search box</p>
           </div>
           <div class="links">
           <ul>
              <li>log in</li>
              <li>check out</li>
               <li>cart</li>
             </ul>
           </div>
         </div>
         <div id="navbar">
           <ul>
             <li>Parties</li>
             <li>wedding</li>
             <li>christening</li>
             <li>birthdays</li>
             <li>other</li>
             </ul>
         </div>
      </header>
  <section>
      <h1>CREATION</h1>
    <p>60%</p>
       <button>Shop now!</button>
      </section>
   <aside>
      <div class="hello">
        <h2>HELLO</h2>
        <p>30%</p>
     </div>
      <div class="hello">
        <h2>HELLO</h2>
        <p>30%</p>
     </div>
      </aside>
      <div id="page2">
      <section class="hello2">
        <article>
          <h2>HELLO 2</h2>
        <p>50%</p>
        </article>
      </section>
      <section class="hello3">
        <article>
        <h2>HELLO 2</h2>
        <p>50%</p>
        </article>  
      </section>
        </div>
      <div class="img">
        <p> image1</p>
      </div>
      <div class="images">
        <div class="img1"><p>img1</p></div>
        <div class="img1"><p>img2</p></div>
        <div class="img1"><p>img3</p></div>
        <div class="img1"><p>img4</p></div>
      </div>
      <div class="img">
        <p>image2</p>
      </div>
      <div class="map">
        <div class="contact">
          <p> map an contact</p>
          <p> form</p>
        </div>
        <div class="contact">
        <p> map an contact</p>
        </div>
      </div>
      <footer>
        <span>copyright</span>
      </footer>
     </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/divtrain1-MKQoxv */
body {
  color: black;
  font-family: Arial, Verdana, sans-serif;
  background-color: #000fff;
}
p{
  font-weight: 800;
  padding: 15px;
  font-size: 17px;
}
h1, h2{
  font-weight: 700;
  font-family: Times New Roman, Times, serif; 
}
#mainbox{
  width: 960px;
  height: auto;
  margin: 0 auto ;
  border: 3px double black;
  overflow: scroll;
  }
header{
  width:100%;
  height: 180px;
  background-color: #00ff00;
  border: 1px solid black;
}
.logo{
  border: 1px solid black;
  width: 25%;
  height: 80px;
  background-color: #c0c0c0;
  float: left;
  margin: 5px 0 0 10px;
}
#headbox{
  float: left;
  width: 71%;
  height: 80px;
  border: 1px solid black;
  background-color: #ff00ff;
  margin: 5px 0 0 10px;
  }
nav.topnavi {
  width: 70%;
  height: 35px;
  border: 1px solid black;
  background-color: #ffff00;
  text-align: center;
  }
nav li{
  width: 20%;
  height: 50%;
  list-style-type: none;
  float: left;
  background-color: green; 
  border: 1px dotted black;
  margin:  5px auto;
}
.searchbox {
  float: left;
  width: 55%;
  height: 35px;
  border: 1px solid black;
  background-color: #0000ff;
  text-align: left;
  margin:1px;
  }
.links{
  width: 43%;
  height: 35px;
  border: 1px solid black;
  float: left;
  background-color: #c0c0c0;
  margin: 1px;
  padding: ;
  text-align: center;
  }
.links li{
  list-style-type: none; 
  text-align: center;
  border: 2px dotted black;
  background-color: orange;
  width:77px;
  height: 25px;
  margin: ;
  padding: 3px ;
  float: left;
  font-size: 16px;
  line-height:24px;
} 
.links ul{
  margin-left: 33px ;
  float: left;
  width: 100%;
  padding:0px ;
}
#navbar{
  float: left;
  border: 1px solid black;
  width: 100%;
  height: 80px;
  background-color: #fff000;
  margin: ;
  text-align: center;
  }
#navbar li{
  float: left;
  border:1px solid black;
  width: 19%;
  font-size: 30px;
  line-height:60px;
  background-color: #2ff;
  margin:;
  list-style-type: none;
}
#navbar ul{
  float: left;
  width: 100%;
  padding-left: 15px;
  padding-top: 10px;
}
section{
  float:left;
  width: 60%;
  height: 400px;
  border: 1px solid black;
  background-color: #ff0000;
  text-align: center;
  margin-top: 5px;
  }
aside{
  float: right;
  width: 38%;
  height: 400px;
  background-color: aqua;
  border: 1px solid black;
  margin-left: 10;
  margin-top: 5;
  }
.hello{
  height: 190px;
  border: 1px solid black;
  margin-top: 10px;
  padding:0;
}
#page2{
  width: 100%;
  height: auto;
  text-align: center;
  margin:;
}
.hello2{
  width: 48%;
  float: left;
  height: 200px;
}
.hello3{
  width: 48%;
  float: right;
  height: 200px;
  margin-top: ;
}
.img {
  width:100%;
  height: 100px;
  background-color: purple;
  float: left;
  margin-top: 5px ;
  margin-bottom: 5px;
 }
.images{
  width: 100%;
  height: 200px;
  background-color: #77998f;
  float: left;
}
.img1{
  width: 20%;
  height: 140px;
  background-color: yellow;
  float: left;
  margin-top: 20px;
  margin-left: 4%; 
  border: 1px solid black;
  text-align: center;
  margin: 20px auto 0  38;
  }
.map {
  width:100%;
  height: 200px;
  background-color: #c0c0c0;
  float: left;
  margin-top: ;
  margin-bottom: 5px;
}
.contact{
  width: 40%;
  height: 140px;
  float: left;
  background-color: #ff8000;
  border: 1px solid black;
  margin-top: 20px;
  margin-left: 61px;
  text-align: center;
}

footer{
  clear: both;
  margin: 0 auto;
  color: white;
  text-align: center;
  height: 100px;
  width: 100%;
  padding-top: 20px;
  background-color: green;
  display: block;
}
* {
  margin:0;
  padding:0;
}

Comments