AMAZON PROJECT HTML & CSS

AMAZON PROJECT HTML & CSS

 

 

 

AMAZON PROJECT HTML & CSS

HTML CODE

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Amajon Project</title>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css” integrity=”sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />
    <link rel=”stylesheet” href=”style.css “>
</head>
<body>
    <header>
       <div class=”navbar”>
        <div class=”nav-logo border”>
            <div class=”logo”></div>
        </div>
        <div class=”nav-address border”>
            <p class=”add-first”>Deliver to</p>
            <div class=”add-icon”>
                <i class=”fa-solid fa-location-dot”></i>
                <p class=”add-second”>India</p>
            </div>
        </div>
        <div class=”nav-search “>
          <select class=”select-search”>
            <option>All</option>
          </select>
          <input placeholder=”Search Amazon” class=”search-input”>
          <div class=”search-icon”>
            <i class=”fa-solid fa-magnifying-glass”></i>
          </div>
        </div>
        <div class=”nav-signin border”>
          <p><span >Hello,sign in</span></p>
          <p class=”nav-second”>Account & Lists</p>
        </div>
        <div class=”nav-return border”>
          <p><span >Returns</span></p>
          <p class=”nav-second”>& Orders</p>
        </div>
        <div class=”nav-cart border”>
          <i class=”fa-solid fa-cart-shopping”></i>
          cart
        </div>
       </div>
       <div class=”panel”>
        <div class=”panel-all”>
          <i class=”fa-solid fa-bars”></i>
          All
        </div>
        <div class=”panel-option”>
          <p>Today’Deals</p>
          <p>Customer Service</p>
          <p>Gifts Cards</p>
          <p>Sell</p>
        </div>
        <div class=”panel-deal”>
          Shop Deal in Electronics
        </div>
       </div>
    </header>
    <div class=”hero-section”>
      <div class=”hero-message”>
        You are on amazon com. You can also shop on Amazon India for millions of products with fast local delivery. <a href=”$”>Click here to go to amazon.in</a>
      </div>
    </div>
    <div class=”shop-section”>
      <div class=”box1 box”>
        <div class=”box-content”>
          <h2>Clothes</h2>
        <div class=”box-image” style=”background-image: url(‘box1_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box2 box”>
        <div class=”box-content”>
          <h2>Health & Personal Care</h2>
        <div class=”box-image” style=”background-image: url(‘box2_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box3 box”>
        <div class=”box-content”>
          <h2>Furniture</h2>
        <div class=”box-image” style=”background-image: url(‘box3_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box4 box”><div class=”box-content”>
        <h2>Electronics</h2>
      <div class=”box-image” style=”background-image: url(‘box4_image.jpg’);”></div>
      <p>see more</p>
      </div></div>
    </div>
    <div class=”shop-section”>
      <div class=”box1 box”>
        <div class=”box-content”>
          <h2>beauty Picks</h2>
        <div class=”box-image” style=”background-image: url(‘box5_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box2 box”>
        <div class=”box-content”>
          <h2>Pets Care</h2>
        <div class=”box-image” style=”background-image: url(‘box6_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box3 box”>
        <div class=”box-content”>
          <h2>New Arrival in Toys</h2>
        <div class=”box-image” style=”background-image: url(‘box7_image.jpg’);”></div>
        <p>see more</p>
        </div>
      </div>
      <div class=”box4 box”><div class=”box-content”>
        <h2>Discover Fashion Trends</h2>
      <div class=”box-image” style=”background-image: url(‘box8_image.jpg’);”></div>
      <p>see more</p>
      </div></div>
    </div>
    <footer>
    <div class=”foot-panel1″>
      Back to Top
    </div>
    <div class=”foot-panel2″>
      <ul>
          <p>Get to Know Us</p>
          <a href=”&”>About Us</a>
          <a href=”&”>Careers</a>
          <a href=”&”>Press Releases</a>
          <a href=”&”>Amazon Science</a>
      </ul>
      <ul>
         <p>Connect with Us</p>
         <a href=”$”>Facebook</a>
         <a href=”$”>Twitter</a>
         <a href=”$”>Instagram</a>
      </ul>
      <ul>
         <p>Make Money with Us</p>
         <a href=””>Sell on Amazon</a>
         <a href=”$”>Sell under Amazon Accelerator</a>
         <a href=”$”>Protect and Build Your Brand</a>
         <a href=”$”>Amazon Global Selling</a>
         <a href=”$”>Become an Affiliate</a>
         <a href=”$”>Fulfilment by Amazon</a>
         <a href=”$”>Advertise Your Products</a>
         <a href=”$”>Amazon Pay on Merchants</a>
      </ul>
      <ul>
         <p>Let Us Help You</p>
         <a href=”$”>COVID-19 and Amazon</a>
         <a href=”$”>Your Account</a>$
         <a href=”$”>Returns Centre</a>
         <a href=”$”>100% Purchase Protection</a>
         <a href=”$”>Amazon App Download</a>
         Help
      </ul>
    </div>
    <div class=”foot-panel3″>
      <div class=”logo”>
      </div>
    </div>
    <div class=”foot-panel4″>
      <div class=”pages”>
        <a href=”$”>Condition of Use</a>
        <a href=”$”>Privacy Notice</a>
        <a href=”$”>Your ads Privacy Choices</a>
      </div>
      <div class=”copyright”>
        © 1996-2024, Amazon.com, Inc. or its affiliates
      </div>
    </div>
    </footer>
</body>
</html>
CSS CODE
*{
    margin: 0px;
    padding: 0px;
    font-family: arial;
    border: border-box;
}
.navbar{
    height: 60px;
    background-color: #0F1111;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.nav-logo{
    height: 50px;
    width: 100px;
}
.logo{
    background-image: url(amazon_logo.png);
    background-size: cover;
    height: 50px;
    width: 100%;
}
.border{
    border: 1.5px solid transparent;
}
.border:hover{
    border: 1.5px solid white;
}
/*box 2*/
.add-icon{
    display: flex;
    align-items: center;
}
.add-first{
    color: #cccccc;
    font-size: 0.85rem;
    margin-left: 15px;
}
.add-second{
    font-size: 1rem;
    margin-left: 3px;
}
/*box3*/
.nav-search{
    display: flex;
    justify-content: space-evenly;
    background-color: pink;
    width: 620px;
    height: 40px;
    border-radius: 4px;
}
.nav-search:hover{
    border: 2px solid orange;
}
.select-search{
    background-color: #f3f3f3;
    width: 50px;
    text-align: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: none;
}
.search-input{
    width: 100%;
    font-size: 1rem;
    border: none;
}
.search-icon{
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    background-color: #f79412;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
/*box4*/
span{
    font-size: 0.7rem;
}
.nav-second{
    font-size: 0.85rem;
    font-weight: 700;
}
/*box5*/
.nav-cart i{
    font-size: 30px;
}
.nav-cart{
    font-weight: 700;
}
/*panel*/
.panel{
    height: 40px;
    background-color: #222f3d;
    display: flex;
    color: white;
    align-items: center;
    justify-content: space-evenly;
}
.panel-option p{
    display: inline;
    margin-left: 15px;
}
.panel-option{
    width: 70%;
    font-size: 0.85rem;
}
.panel-deal{
    font: size 0.9rem;
    font-weight: 700;
}
/*Hero-Section*/
.hero-section{
    width: 1256px;
    height: 320px;
    background-image: url(“hero_image.jpg”);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hero-message{
    width: 90%;
    height: 40px;
    font-size: 0.85rem;
    background-color: white;
    color: black;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.hero-message a{
    color: #007185;
    text-decoration: none;
}
/* shop section*/
.shop-section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #e2e7e6;
}
.box{
    width: 23%;
    height: 320px;
    /* border: 2px solid black; */
    background-color: white;
    padding: 20px 0px 15px ;
    margin-top: 15px;
}
.box-image{
    height: 250px;
    background-size: cover;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.box-content{
    margin-left: 10px;
    margin-right: 10px;
}
.box-content p{
    color: #007185;
}
/*Footer*/
footer{
    margin-top: 30px;
}
.foot-panel1{
    background-color: #37475a;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
}
.foot-panel2{
    background-color: #222f3d;
    color: white;
    height: 300px;
    display: flex;
    justify-content: space-evenly;
}
ul{
    margin-top: 20px;
}
ul a{
    display: block;
    text-decoration: none;
    color: #DDDDDD;
    font-size: .75rem;
    margin-top: 10px;
}
/*foot-panel3*/
.foot-panel3{
    background-color: #222f3d;
    color: white;
    border: 0.5px solid white;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo{
    background-image: url(“amazon_logo.png”);
    width: 100px;
}
/*panel4*/
.foot-panel4{
    background-color: #0F1111;
    color: white;
    height: 80px;
    /* display: flex; */
}
.foot-panel4 a{
    text-decoration: none;
    color: white;
}
.pages{
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
}
.copyright{
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

 

html css project

html css projects

how to make profile card in html

how to create profile card in html

flipping card ui design in html u0026 css

how to make responsive cards,css hover effect

css hover effects

how to make profile card in html and css

how to make profile card ui design

how to create profile card in html and css

how to make profile card using html and css

css animation effects

profile card html css

responsive profile card

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *