CSS project – Create a website

CSS project – Create a website

Comments Off on 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;
}



Firdavsi

Related Posts

CSS Flexbox – Create a website

Comments Off on CSS Flexbox – Create a website

CSS Flip Card

Comments Off on CSS Flip Card

CSS Cards

Comments Off on CSS Cards

Animated Log in form

Comments Off on Animated Log in form

HTML and CSS projects

Comments Off on HTML and CSS projects

CSS project 2 – Smiley face

Comments Off on CSS project 2 – Smiley face

Create Account



Log In Your Account