Home page debugged

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

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

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

  
</head>

<body>

  <body>

<h1> 
 <centre>BookStore<centre>
   <h2> Welcome to the world famous book store where you can shop, play games and order books!
 
  <ul>


  <li><a href="https://codepen.io/Rize/pen/XRpvXJ">Games</a></li>
  <li><a href="https://codepen.io/Rize/pen/YVNmpx">Store</a></li>
  <li><a href="https://codepen.io/Rize/pen/ybgmJd">Contact Info</a></li>
  <div class="games">
    <figure class="games-picture">
      <img class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Wikibooks_textbooks_hybrid2.svg">
    </figure>
    </ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Rize/home-page-debugged-aWWrVw */
body {
  background: lightblue;

}
h1 {
  text-align: center;
  background-color: Purple;
  font-family: Arial;
  font-size: 50px;

}

h2 { 
  background-color:Purple;
  font-size: 15px;
  font-family: Arial;
  
}

li a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;

}

li {
  float: left;
}

ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  font-size: 15px;
  background-color: #00a1ff;
}

li a:hover {
  background-color: purple;
}

canvas { 
  border: 1em solid blue; 

}
.games-picture {
  scale: 20px;
  margin: 10px;
  padding: 8px 19px;
}

.games-picture .thumbnail {
  width: 750px;
  length: 500px;
}

canvas {
  border: 2em solid purple;
  border-radius: 2%;
}
h3{  font-size: 15px;
  font-family: Arial;}

Comments