Home

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

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

Technologies

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

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

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>>
<center>
<div class="container">
  <div class="jumbotron">
    <h1> $9.99 / mo </h1>
    <p> Coverages: Sports equipment should your child stop playing football. </p> 
    
    <h1><button> PAY ME YO MONEY </button></h1>
    <center>
</div>
  </div>
   </center> 
 
</div>

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Jussic/home-JrOYRr */
/* Add a black background color to the top navigation */
button {
  height:5em;
  width:20em;
  font-size: 10%;
}
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


Comments