home page

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

Thumbnail
This awesome code was written by -_-Tahj_B_LIT-_-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -_-Tahj_B_LIT-_- ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  
<html>
  <title>W3.CSS Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
    .w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
    .fa-anchor,.fa-coffee {font-size:200px}
  </style>
  <body>

    <!-- Navbar -->
    <div class="w3-top">
      <ul class="w3-navbar w3-blue  w3-card-2 w3-left-align w3-large">
        <li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
          <a class="w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
        </li>
        <li><a href="https://s.codepen.io/-_-Tahj_B_LIT-_-/debug/Wozdvg" class="w3-padding-large w3-white">Home</a></li>
        <li class="w3-hide-small"><a href="https://s.codepen.io/-_-Tahj_B_LIT-_-/debug/jVpMbG" class="w3-padding-large w3-hover-white">Pricing</a></li>
        <li class="w3-hide-small"><a href="https://s.codepen.io/-_-Tahj_B_LIT-_-/debug/woxgXK" class="w3-padding-large w3-hover-white">Events</a></li>
        <li class="w3-hide-small"><a href="https://s.codepen.io/-_-Tahj_B_LIT-_-/debug/jVeygq" class="w3-padding-large w3-hover-white">support</a></li>
        <li class="w3-hide-small"><a href="https://s.codepen.io/-_-Tahj_B_LIT-_-/debug/GNwKRo" class="w3-padding-large w3-hover-white">About</a></li>
      </ul>

      <!-- Navbar on small screens -->
      <div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">
        <ul class="w3-navbar w3-left-align w3-large w3-black">
          <li><a class="w3-padding-large" href="#">Price</a></li>
          <li><a class="w3-padding-large" href="#">Link 2</a></li>
          <li><a class="w3-padding-large" href="#">Link 3</a></li>
          <li><a class="w3-padding-large" href="#">Link 4</a></li>
        </ul>
      </div>
    </div>

    <!-- Header -->
    <br> </br>
  <br> </br>

<div class="img">
  <a target="_blank" href="https://s23.postimg.org/tsz6lwrgb/logo.png">
    <img src="https://s23.postimg.org/tsz6lwrgb/logo.png" alt="Fjords" width="300" height="200"> </div>
  </a>
  <br></br>
<br></br>
  <header class="w3-center w3-padding-250">
      
   
     
<iframe hidden width="560" height="315" src="https//www.youtube.com/embed/IskTtlnogUQ?rel=0&autoplay=1&amp;controls=1" frameborder="0" allowfullscreen></iframe> 
    
    
     </header>
    
   

    <!-- First Grid -->
    <div class="w3-row-padding w3-padding-64 w3-container">
      <div class="w3-content">
        <div class="w3-twothird">
          </div>
        
                 <div class="border">
<iframe src="https://www.youtube.com/embed/oboniTiIUsE" width="900" height="500" align="center">
</iframe>
          </div>

        <div class="w3-third w3-left">
         </i>
        </div>
      </div>
    </div>

    <!-- Second Grid -->
    

    <div class="w3-container w3-clear w3-center w3- w3-padding-44">
      
    </div>

    <!-- Footer -->

    <script>
      
      // Used to toggle the menu on small screens when clicking on the menu button
      function myFunction() {
        var x = document.getElementById("navDemo");
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else { 
          x.className = x.className.replace(" w3-show", "");
        }
      }
    </script>

  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-_-Tahj_B_LIT-_-/home-page-Wozdvg */
body { background-image: url("https://pbs.twimg.com/profile_images/508595012/DSC04748.JPG") ; background-size: cover; background-repeat: no-repeat; }


div.img {
   text-align: center;

}


div.border{
text-align: center;
  font-size: 20px;
  font-style: italic;
  border-style: solid;
  border-radius: 20px;
  background-color: #3399ff;
  padding-top: 20px;
  padding-bottom: 20px;
}



Comments