CSS project – Create a website

CSS project – Create a website

Even if all you know is HTML and CSS. This tutorial teaches you how to create a website.

Create a website. CSS layout

HTML code

Note: You can add more lorem ipsum text or give your main tag a height for demo.

<!DOCTYPE html>
<html>
  <head>
   <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded&display=swap" rel="stylesheet">
  </head>
  <body>
    
    <div class="container">
      <header>Your site</header>
      <div class="content">
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Projects</a></li>
            <li><a href="">Contact</a></li>
            
          </ul>
        </nav>
        <main>
          <h1>Content 1</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur nemo totam perferendis sequi asperiores? Neque odit sunt quam, doloribus similique alias dolore vero unde est ratione maiores, labore nam? Soluta tempore sit hic </p>
          <h2>Article 2</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dolorum necessitatibus enim neque obcaecati accusamus cum dolor iste quisquam velid! Repellat, ducimus!
          </p>
        </main>
      </div>
      <footer>nevci academy © 20019</footer>
    </div>
    
  </body>
</html>

CSS code

body {
  margin: 0;
  padding: 0;
  font-family: font-family: 'Encode Sans Expanded', sans-serif;
  font-size: 18px;
  background: #e3e5e8;
}
.container {
  width: 960px;
  background: #fcfcfc;
  margin: 0 auto;
}
header {
  background: #7bed9f;
  height: 80px;
  width: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  color: #2f3542
}
.content {
  padding: 10px;
}
nav {
  width: 150px;
  float: left;
}
nav ul li {
  list-style: none;
  margin: 5px 0;
}
nav ul li a {
  text-decoration: none;
  color: #5352ed;
  font-size: 20px;
}
nav ul li a:hover {
  text-decoration: underline;
}
main {
  width: 770px;
  float: right;
}
main p {
  line-height: 27px;
}
footer {
  clear: both;
  background: #70a1ff;
  color: #57606f;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  font-family: monospace;
  text-transform: uppercase;
}



Comments are closed.
error

Let's make it official :) Subscribe to my Youtube Channel.