Description

Hello Friends! How Do All In this video, you will learn how to make a Pizza website using HTML and CSS,

In This Website, I am Using Some Easy Steps For Only Png's (images). This Site Have One Logo, One Navbar, Two Sections of Carpet one section Have Text Content and One Animated Button Other Section have More Image and save Button and Signup Linke is Given to Upside You will understand In Tutorial Video Available In YouTube Channel Of Coding Karunadu. Hope this video will be helpful.

Thank You For Wisting My Website

Source Codes

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza Website us html and css</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="main">
    <div class="left-col">
        <img src="images/logo.png" alt="logo" class="logo">
        <div class="content-box">
          <img src="images/rating.png" class="rating">
          <h1>Pizza Special Domino's</h1>
          <p>Lorem ipsum dolor sit, 
            amet consectetur adipisicing elit. Odio nisi voluptatibus libero </p>
            <button type="button">Buy More <img src="images/arrow.png" alt=""></button>
        </div>
        <img src="images/left-arrow.png" alt="" class="left-arrow">
    </div>
    <div class="right-col">
      <div class="navbar">
        <ul>
          <li><a href="#"><img src="images/fill-tag.png" alt="">Save</a></li>
          <li><a href="#">Sign Up</a></li>
        </ul>
      </div>
      
        <div class="more-item">
          <img src="images/pizza1.png" alt="">
          <img src="images/pizza2.png" alt="">
          <img src="images/pizza3.png" alt="">
        </div>
      <img src="images/right-arrow.png" class="right-arrow">
    </div>
    <img src="images/Group 17.png" class="main-img">
  </div>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.main{
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.left-col{
  flex-basis: 50%;
  background: rgb(250, 127, 164);
  position: relative;
  color: #fff;
}

.right-col{
  flex-basis: 50%;
  background: #fff;
  position: relative;
  color: #000;
}

.logo{
  width: 150px;
  margin: 30px 80px;
}

.content-box{
  width: 290px;
  position: absolute;
  top: 170px;
  left: 80px;
}

.content-box h1{
  font-size: 45px;
}

.content-box p{
  font-size: 13px;
  color: #dfd1d1;
  margin-bottom: 50px;
}

.content-box button{
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  font-weight: 400;
  border-radius: 5px;
  padding: 13px 25px;
  cursor: pointer;
  border: none;
  outline: none;
}

.content-box button img{
  width: 35px;
  margin-left: 20px;
}

.left-arrow{
  width: 75px;
  position: absolute;
  bottom: 0;
  right: 20px;
  cursor: pointer;
}

.navbar{
  width: 80%;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.navbar ul{
  display: flex;
}

.navbar ul li{
  list-style: none;
  margin-left: 50px;
}

.navbar ul li a{
  color: #000;
  text-decoration: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-weight: 400;
}

.navbar ul li a img{
  width: 20px;
  margin-left: 15px;
}

.more-item{
  width: 220px;
  display: block;
  position: absolute;
  bottom: 0px;
}

.more-item img{
  width: 200px;
  margin: 10px 400px;
}

.right-arrow{
  width: 75px;
  position: absolute;
  bottom: 0;
  left: 20px;
  cursor: pointer;
}

.main-img{
  width: 420px;
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -45%);
}

You have to wait 40 seconds.

Pizza website using HTML and CSS | How to make a Website | Coding Karunadu

Description

Coffee Website Using HTML and CSS

Create A website Using HTML and CSS | Shoes Website

Sticky Navigation Bar in HTML CSS and JavaScript

Make a Website Design Your House Using HTML and CSS

Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascrip

Thank You For Wisting My Website

Source Codes

Contact Form