home page top ten Home

In this example below you will see how to do a home page top ten Home with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>home page  top ten Home</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <DOCTYPE html Public "_//W3C//DTD XHTML 1.0 Transitiona;//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en xml:lang=" en ">
                                                                     
  <head> <!-- this is your header--> 
   <title>My Landing page</title>
   <meta http-equiv="Content-type " content="text/html; charsset=utf-8 "/>
<link rel="stylsheet " href="color.css " type ="text/css " />
</head>
    <body> 
          <p><div><h1>Top Ten Games </h1></div></p> 
          <p><div></div></p>                   
          
         <!--to make buttons you have to use an unordered list and you can sytle it on your CSS --> 
         <ul>
         <li>About</li>
         <li>Our Top-Ten</li>
         <li class="right">Game Of The Week</li>
                                                         
         </ul>                                                 
                                                          
                                                          
                                                          
                                                          
                                                          
                                                          
                                                          
                                                          
                                                          
                                                          
    </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ssmitty/home-page-top-ten-home-wWqQyG */
body{/*Made my image fit in my page*/
  background-image: url(http://www.hdwallpapers.in/walls/mass_effect_3_extended_cut-wide.jpg);
  height: 100vh;
  background-size: cover;
  margin-bottom: 50px;
  /*display: -webkit-box;
  dosplay: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction:normal;
  -webkit-flexdirection: column;
      -ms-flex-direction:column;
          flex-directon:column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;*/
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
  text-align: center;
 
}

   
div{/*header*/
  color: white;
  padding-top:100px; /*to adjust the position of my header*/
  
}

/*Horizontal navigation bar*/
ul{
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0; /*this moves your buttons to the top*/
  width: 100%;
}

li { /*navigation bar*/
  float: left;
  padding-left: 30px;/*spacing for buttons */
  display: ;
  
}

.right{/*Games of the week moved to the right*/
  float: right;
  padding-right: 20px;
}

p{
 max-width: 600px;
 margin: 0 auto 20px;
}

Comments