Scribd
Upload
2K views

Shopping Website Using HTML and CSS

The document is a project report for developing a shopping website. It includes an acknowledgement section thanking various individuals and organizations for their support. It then provides the source code for the login page and home page of the shopping website. The source code includes HTML, CSS, and images to display the design and functionality of the key pages for users to log in and browse products on the site.

Uploaded by

Anant Tyagi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2K views

Shopping Website Using HTML and CSS

The document is a project report for developing a shopping website. It includes an acknowledgement section thanking various individuals and organizations for their support. It then provides the source code for the login page and home page of the shopping website. The source code includes HTML, CSS, and images to display the design and functionality of the key pages for users to log in and browse products on the site.

Uploaded by

Anant Tyagi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Project Report

Title:SHOPPING WEBSITE

BACHELOR OF TECHNOLOGY
Computer science and Engineering

Submitted to
Ms. Nausheen Fatima
LOVELY PROFESSIONAL UNIVERSITY
PHAGWARA, PUNJAB

SUBMITTED BY :- ANANT TYAGI Reg.No:- 12206765 Roll No:-25


ACKNOWLEDGEMENT

Primarily I would like to thank God for being able to


learn a new technology. Then I would like to express
my special thanks of gratitude to the teacher who
provide me the golden opportunity to learn a new
technology .

I would like to also thank my own college Lovely


Professional University for offering such a course
which not only improve my programming skill but also
taught me other new technology.

Then, I would like to thank my parents and friends who


have helped me with their valuable suggestions and
guidance for choosing this course.

I am making this project not only for marks but to also


increase my knowledge.
THANKS AGAIN TO ALL
DESIGN AND SOURCE CODE:-

LOGIN PAGE

SOURCE CODE -:

<HTML>
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>login.shop</title>
      <link rel="stylesheet" href="style.css">
      <style>
        *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  <bg-image
 
}
::selection{
  background: #438ab6;
  color: rgb(237, 231, 231);
}
.wrapper{
  width: 380px;
  background: rgb(252, 252, 250);
  border-radius: 20px;
  box-shadow: 0px 15px 20px rgba(58, 9, 9, 0.1);
}
.wrapper .title{
  font-size: 35px;
  font-weight: 600;
  font-style: oblique;
  text-align: center;
  line-height: 100px;
  color: rgb(248, 245, 245);
  user-select: none;
  border-radius: 15px 15px 0 0;
background: linear-gradient(-135deg, #1842c2, #0cba9a);
}
.wrapper form{
  padding: 10px 30px 50px 30px;
}
.wrapper form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.wrapper form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 17px;
  padding-left: 20px;
  border: 1px solid lightgrey;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
  border-color: #4158d0;
}
.wrapper form .field label{
  position: absolute;
  top: 50%;
  left: 20px;
  color: #999999;
  font-weight: 400;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
form .field input:focus ~ label,
form .field input:valid ~ label{
  top: 0%;
  font-size: 16px;
  color: #4158d0;
  background: #fff;
  transform: translateY(-50%);
}
form .content{
  display: flex;
  width: 100%;
  height: 50px;
  font-size: 16px;
  align-items: center;
RESULT/OUTPUT-:
HOME PAGE//

SOURCE CODE-:

<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Boxicons -->
  <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet" />

  <!-- Fontawesome -->


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <!-- Custom StyleSheet -->
  <link rel="stylesheet" href="./xyz.css" />
  <title> E STORE</title>
</head>
<body>
 
  <!-- HEADER -->
 <header class="header">
  <nav>
    <img src="images/shopping logo.webp"  class="logob">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">ABOUT US</a></li>
        <li><a href="">CONTACT US</a></li>
    </ul>
    </nav>
    <!-- Intro -->
    <div class="intro">
     <h1>TRY OUT THESE LEATHER PRODUCTS</h1>
          <h2>
            Up to</br>
            <span class="dis">30%
              Discount</span></br>
            on This <br />
            New Year Season
          </h2>
          <h3>From 1st Jan to 31st Jan</h3>
          <a href="#" class="btn">SHOP NOW</a>
        </div>
     
  </header>
<section class="section benefits">
    <div class="benefit-center box">
      <div class="benefit">
        <span class="icon"><i class="bx bx-purchase-tag"></i></span>
        <h4>Free Shipping</h4>
        <span class="text">Capped at $16 per order</span>
      </div>
     
      <div class="benefit">
        <span class="icon"><i class="bx bx-book-reader"></i></span>
        <h4>10-Day Returns</h4>
        <span class="text">Shop without any fear</span>
      </div>
      <div class="benefit">
        <span class="icon"><i class="bx bx-headphone"></i></span>
        <h4>24/7 Support</h4>
        <span class="text">We are always there to help you</span>
      </div>
    </div>
  </section>
  <!-- New Arrivals -->
  <section class="section">
    <div class="h">
      <h1><span>New</span> Arrivals</h1>
    </div>
    <div class="ac-center box">
      <div class="ac">
        <div class="img-cover">
          <img src="images/jackets.webp" alt="" />
        </div>
        <p>+Jackets</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
        </div>
        <div class="price">₹ 5000</div>
      </div>
<div   class="ac">
        <div class="img-cover">
          <img src="images/WHBag.webp" alt="" />
        </div>
        <p>Women Hand Bag</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 3000</div>
      </div>

      <div class="ac">
        <div class="img-cover">
          <img src="images/garic fox.webp" alt="" />
        </div>
        <p>Arctic fox bag </p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 2000</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/headphone.webp" alt="" />
        </div>
        <p>Boat Headphones</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 1500</div>
      </div>
    </div>
  </section>

  <!-- Shop By Category -->


  <section class="section">
    <div class="h">
      <h1><span>Shop By</span> Categories</h1>
    </div>
    <div class="ab box">
      <div class="item item-1">
        <img src="images/cloth.webp" alt="" />
      </div>
      <div class="item item-2">
        <img src="images/trouser.webp" alt="" />
      </div>
      <div class="item item-3">
        <img src="images/laptop.webp" alt="" />
      </div>
      <div class="item item-4">
        <img src="images/home.webp" alt="" />
      </div>
    </div>
  </section>

  <!-- Popular Products -->


  <section class="section">
    <div class="h">
      <h1>Popular <span>Products</span></h1>
    </div>
    <div class="ac-center box">
      <div class="ac">
        <div class="img-cover">
          <img src="images/hoddy.webp" alt="" />
        </div>
        <p>jackets</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 8500</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/t shirt.webp" alt="" />
        </div>
        <p>T-shirt</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 5000</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/milton.webp" alt="" />
        </div>
        <p>Milton bottle</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 1200</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/smartphone.webp" alt="" />
        </div>
        <p>Smartphones</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹12,000</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/shoes.webp" alt="" />
        </div>
        <p>Shoes</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 3200</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/wallet.webp" alt="" />
        </div>
        <p>women hand bags </p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 1600</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/women sandal.webp" alt="" />
        </div>
        <p>sandals</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 600</div>
      </div>
      <div class="ac">
        <div class="img-cover">
          <img src="images/belt.webp" alt="" />
        </div>
        <p>Belt</p>
        <div class="rating">
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bxs-star"></i>
          <i class="bx bx-star"></i>
        </div>
        <div class="price">₹ 500</div>
      </div>
    </div>
  </section>
        <!-----footer-------------------->
        <section id="footer">
           
            <div class="foot">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT US</a></li>
                    <li><a href="">CONTACT US</a></li>
       
                </ul>
                <div class="social-links">
                    <a href=""><i class="fab fa-linkedin"></i></a>
                    <a href=""><i class="fab fa-behance"></i></a>
                    <a href=""><i class="fab fa-dribbble"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                  </div>
            </div>
        </section>
</body>
</html>

<CSS>
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 70%;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: black;
  background-color: whitesmoke;
}
img {
  max-width: 100%;
}
.box {
  max-width: 1824px;
  margin: 0 auto;
}
@media only screen and (max-width: 1200px) {
  .box {
    padding: 0 48px;
  }
}
/* HEADER */
 .logob{
 width: 100px;
 height: 80px;
 cursor: pointer;
 }
 
 nav{
  width: 84%;
  margin: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 nav ul li{
     display: inline-block;
     list-style: none;
     margin: 10px 20px;
 }
 
 nav ul li a{
     text-decoration: none;
     color: #606163;
 }
 
 nav ul li a:hover{
     color: #ff4321;
 }
 .d {
  display: flex;
  align-items: center;
}
 .align-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
 @media only screen and (max-width: 768px) {
  nav {
    padding: 16px 0;
  }
  .icons{
    display: none;
  }
 
  .logob{
    width: 100px;
    height: 80px;
    cursor: pointer;
    }
  }
 
 
 
/* Intro */
.intro {
  height: calc(100vh - 112px);
  overflow: hidden;
  position: relative;
  z-index: 0;
  background-color: lightgray;
  background-image: url('wallet1.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100%;
/*background-blend-mode: overlay;*/
}
.intro-content {
  height: 100%;
}
.dis {
  display: inline-block;
  font-size: 40px;
  color: #ff4321;
}
.intro h1 {
  margin-top: 50px;
  line-height: 1.3;
  font-weight: 600;
  font-size: 50px;
  text-align: center;
}
.intro h2 {
  line-height: 1.3;
  font-weight: 600;
  font-size: 45px;
  text-align: center;
}
.intro  h3 {
  font-weight: 400;
  font-size: 40px;
  text-align: center;
}
.btn {
  display: inline-block;
  border-radius: 80px;
  background-color: #ff4321;
  padding: 20px 80px;
  color: white;
  font-weight: 600;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.3);
  margin-top: 75px;
  margin-left: 600px;
}
/* Section */
.section {
  padding: 160px 0 0 0;
}
/* Benefits */
.benefit-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 80px;
}
.benefit {
  border: 1px solid #ccc;
  padding: 16px 16px 32px 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.benefit .icon {
  color:  #ff4321;
  font-size: 64px;
}
.benefit h4 {
  margin-bottom: 5px;
}
.benefit .text {
  font-size: 24px;
  color: #777;
}
/* New Arrivals */
.h {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 5rem;
  font-weight: 600;
}
.h h1 {
  font-weight: 400;
}
.h span {
  color:  #ff4321;
}
.ac-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 80px;
  margin-bottom: 80px;
}
.ac {
  text-align: center;
  padding-bottom: 16px;
  transition: all 500ms ease-in-out;
}
.ac:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.ac .img-cover {
  overflow: hidden;
}
.ac img {
  transition: all 500ms ease-in-out;
}
.ac:hover img {
  transform: scale(1.2);
}
@media only screen and (max-width: 567px) {
  .h {
    font-size: 32px;
  }
}
.ab {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 4vw);
  gap: 2rem;
}
.ab .item {
  overflow: hidden;
}
.ab img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: all 500ms ease-out;
}
.ab .item-1 img {
  object-fit: fill;
}
.ab img:hover {
  transform: scale(1.2);
}
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 9;
}
.item-2 {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 9;
}
.item-3 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item-4 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 9;
}
@media only screen and (max-width: 600px) {
  .gallary {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(20, 4vw);
  }
  .item-1 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 7;
  }
  .item-2 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 11;
  }
  .item-3 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 11;
    grid-row-end: 15;
  }
  .item-4 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 15;
    grid-row-end: 19;
  }
}
   
    /footer/
    #footer {
     
        box-sizing: border-box;
        font-family: 'Poppins',sans-serif;
        position: relative;
        min-height: 50vh;
        padding: 50px 100px;
        background-color: black;
        justify-content: center;
        align-items: center;
        flex-direction: column;
     }
     #footer ul li{
        color: white;
        list-style:none;
        margin: 30px 40px;
        padding-top: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
   
    #footer ul li a{
        text-decoration: none;
        color: white;
        font-family: sans-serif;
    }
   
    #footer ul li a:hover{
        color: #ff4321;
    }
   
   
    .social-links{
        margin-left: 8%;
        margin-top: 100px;
    }
    .social-links a{
        font-size: 30px;
        color: #606163;
        margin-right: 20px;
    }
    .social-links a:hover{
     color: #ff4321;
    }
    {
      text-align: center;
    }

Result page/Output:-

Veiw-1

Veiw-2
Contact us page
SOURCE CODE-:

<HTML>
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="contact us.css" />
  </head>
  <body>
   
    <section id="last">
      <!-- heading -->
      <div class="full">
        <h3>Drop a Message</h3>
 
        <div class="lt">
 
          <!-- form starting  -->
          <form class="form-horizontal"
                method="post" action="contact.php">
            <div class="form-group">
              <div class="col-sm-12">
                <!-- name  -->
                <input
                  type="text"
                  class="form-control"
                  id="name"
                  placeholder="NAME"
                  name="name"
                  value=""
                />
              </div>
            </div>
 
            <div class="form-group">
              <div class="col-sm-12">
                <!-- email  -->
                <input
                  type="email"
                  class="form-control"
                  id="email"
                  placeholder="EMAIL"
                  name="email"
                  value=""
                />
              </div>
            </div>
 
            <!-- message  -->
            <textarea
              class="form-control"
              rows="10"
              placeholder="MESSAGE"
              name="message">
            </textarea>
 
               <button
              class="btn btn-primary send-button"
              id="submit"
              type="submit"
              value="SEND">
              <i class="fa fa-paper-plane"></i>
                   <span class="send-text">SEND</span>
               </button>
              </form>
          <!-- end of form -->
        </div>
 
        <!-- Contact information -->
        <div class="rt">
          <ul class="contact-list">
            <li class="list-item">
              <i class="fa fa-map-marker fa-1x">
                <span class="contact-text place">
             your address :- bh-657  - vasant colony , sector:
             phugwara  11411
                </span>
             </i>
            </li>
            <li class="list-item">
              <i class="fa fa-envelope fa-1x">
                   <span class="contact-text gmail">
                  <a href="mailto:yourmail@gmail.com" title="Send me an email">
          shoppit234email@gmail.com</a>
                </span>
              </i>
            </li>
 
            <li class="list-item">
              <i class="fa fa-phone fa-1x">
                <span class="contact-text phone">
                  (033) 12345678
                </span>
              </i>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>
 

<CSS>
#last{
    width: 100%;
    height: auto;
    justify-content: center;
    background-color: #ffb3b3;
    }
    .full{
    width: 80%;
    display: inline-block;
    margin:2%;
    margin-left: 10%;
    text-align: center;
    background-color: black;
    color: white;
    border:15px solid orange;
    border-radius: 5px;
    margin-bottom: 8%;
    margin-top: 8%;
    }
    .full h3{
    font-size: 2rem;
    display:block;
    margin: 2%;
    margin-bottom: 0;
    }
    .lt{
    padding: 2%;
    margin: 2%;
    }
    .rt{
    padding: 2%;
    margin: 2%;
    }
    .lt textarea{
    width: 94%;
    margin-left: 2.8%;
    }
    button{
    margin: 2%;
    }
    .btn-primary{
    background-color: black;
    border: 2px solid white;
    border-radius: 5%;
    }
    .list-item{
    margin-bottom: 2%;
    list-style-type: none;
    }
    .list-item span{
    margin-left: 10px;
    font-size: 1.4rem;
    }
    .list-item a{
    color: white;
    display: inline-block;
    }
    .list-item a:hover{
    text-decoration: underline;
    }
    .form-control{
    background-color: black;
    }
         
    @media screen and (min-width: 770px){
    .full{
        width: 70%;
        margin-left: 15%;
    }
    .lt textarea{
    width: 95%;
    margin-left: 2.4%;
    }
    }
         
    @media screen and (min-width: 1100px){
    .full{
        width: 65%;
        margin-left: 17%;
        margin-top: 5%;
    }
    .lt{
        width: 55%;
        display: inline-block;
        float: left;
        margin-right: 0;
    }
    .rt{
        width: 35%;
        display: inline-block;
        margin-left: 0;
    }
    .list-item{
    margin-bottom: 10%;
    }
    .contact-list{
        margin-top: 22%;
        padding-right: 8%;
    }
    .fa-envelope, .gmail{
        display: inline-block;
        width: auto;
    }
    }

RESULT/OUTPUT:-
CART PAGE //

SOURCE CODE :-

<HTML>
<html>
<head>
   <title> cart</title>
</head>
<link rel="stylesheet" href="lo.css"
<body>
<div class="container">
   <div class="payment_details">
     <h1>Payment Information</h1>
     <div class="details_card">
       <div class="name_address">
         <div class="first_lastName">
           <input type="text" placeholder="First Name" />
           <input type="text" placeholder="Last Name" />
         </div>
         <div class="address">
           <input type="text" onkeyup="change()" id="put" placeholder="Address" />
           <input type="number" placeholder="Pincode" />
           <input type="text" placeholder="Country" />
         </div>
       </div>
       <h1>Shipping Details</h1>
       <div class="shipping_card">
         <div class="new_card">
           <h4>Same as personal</h4>
           <p id="output">Lovely professional university , Phagwara, Punjab
           </p>
           <p>11411</p>
         </div>
       </div>
       <div class="proced_payment">
         <a href="">Procced to payment</a>
       </div>
     </div>
   </div>
   <div class="order_summary">
     <h1>Order Summary</h1>
     <div class="summary_card">
       <div class="card_item">
         <div class="product_img">
           <img src="images/milton.webp" alt="" />
         </div>
         <div class="product_info">
           <h1>MILTON BOTTLE</h1>
           <p>MILTON -S213</p>
           <div class="close-btn">
             <i class="fa fa-close"></i>
           </div>
           <div class="product_rate_info">
             <h1>$ 200</h1>
             <span class="pqt-minus">-</span>
             <span class="pqt">1</span>
             <span class="pqt-plus">+</span>
           </div>
         </div>
       </div>
       <div class="card_item">
         <div class="product_img">
           <img src="images/headphone.webp" alt="" />
         </div>
         <div class="product_info">
           <h1>BOAT HEADPHONES</h1>
           <p>BOAT - Bat32</p>
           <div class="close-btn">
             <i class="fa fa-close"></i>
           </div>
           <div class="product_rate_info">
             <h1>$ 160</h1>
             <span class="pqt-minus">-</span>
             <span class="pqt">1</span>
             <span class="pqt-plus">+</span>
           </div>
         </div>
       </div>
       <hr />
       <div class="order_price">
         <p>Order summary</p>
         <h4>$400</h4>
       </div>
       <div class="order_service">
         <p>Additional Service</p>
         <h4>$10</h4>
       </div>
       <div class="order_total">
         <p>Total Amount</p>
         <h4>$370</h4>
       </div>
     </div>
   </div>
  </div>
 

</body>
 </html>

<CSS>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
  }
 
  h1 {
    font-size: 16px;
    margin: 5px;
  }
  .container {
    width: 100%;
    height: 92vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f9fafc;
  }
 
  /*
  Payment Information card
  */
  .details_card {
    width: 700px;
    height: 400px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
  }
 
  /*
  Order Summary Card
  */
  .summary_card {
    background-color: #fff;
    width: 350px;
    height: 400px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
  }
  .card_item {
    display: flex;
    position: relative;
    margin: 10px 0;
  }
  .close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
  }
 
  .card_item .product_img img {
    height: 80px;
    margin-right: 20px;
    width: 70px;
    border-radius: 5px;
  }
 
  .product_info h1 {
    font-size: 20px;
    color: #1e212d;
    margin: 5px 0;
  }
 
  .product_info p {
    color: #a1a1a1;
    font-size: 14px;
  }
  .product_rate_info {
    display: flex;
    margin: 5px 0;
    align-items: center;
    justify-content: space-between;
  }
  .pqt {
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    text-align: center;
  }
 
  .pqt-plus,
  .pqt-minus {
    background: #fcfcfc;
    border: none;
    font-size: 20px;
    height: 100%;
    padding: 0 15px;
  }
  .pqt-plus:hover,
  .pqt-minus:hover {
    background: #53b5aa;
    color: #fff;
    cursor: pointer;
  }
 
  .pqt-plus {
    line-height: 30px;
  }
 
  .pqt-minus {
    line-height: 30px;
  }/*
 .pqt-plus {
    line-height: 30px;
  }
 
  .pqt-minus {
    line-height: 30px;
  }
  /*
  Order price & total
  */
  .order_price,
  .order_service,
  .order_total {
    display: flex;
 
    justify-content: space-between;
    padding: 10px;
  }
  .order_price p,
  .order_service p {
    color: #a1a1a1;
  }
  .order_total p {
    font-weight: 600;
  }
  input {
    outline: 0;
    background: #f2f2f2;
    border-radius: 4px;
    width: 100%;
    border: 0;
    caret-color: #4f5d7e;
    margin: 10px 15px;
    padding: 15px 20px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .first_lastName,
  .shipping_card,
  .address {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
 
  .new_card {
    width: 100%;
    height: 100px;
    border: 2px solid #53b5aa;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
  }
 
  .add_savedcard {
    width: 100%;
    height: 100px;
    border: 2px solid #a1a1a1;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
  }
  .proced_payment a {
    padding: 10px 20px;
    width: 200px;
    border: 2px solid #f5f5f5;
    background-color: #53b5aa;
    color: #000;
    margin-left: 10px;
    cursor: pointer;
    text-decoration: none;
  }
  footer {
    background-color: #000;
    color: #fff;
    height: 50px;
    text-align: center;
  }
  footer a {
    text-decoration: none;
    color: #fff;
RESULT/OUTPUT :-
CONCLUSION
We hope and we wish that this document will help
you to understand about our minimalist but attractive
project as I had tried something different from usual.

I learned a lot of new skills thanks to this project which


made me understand basic concepts of tags and how
to apply them…….

THANK YOU VERY MUCH TO ALL….

You might also like