AMAZON PROJECT HTML & CSS

No comments

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;
}

 

Thanks for reading this blog. Hope you get satisfied with the blog and definitely this blog must have valued your time and effort of reading.

Take a time to connect our other digital creations such as Instagram , Facebook and Youtube.

 

🧑‍💻🧑‍💻 Social Media Links of Tech DCode :

👉🏻 YouTube : https://www.youtube.com/channel/UCjJnEdeugftBwQ3yMuD4B_A
👉🏻 Instagram : https://www.instagram.com/thetechdcode/
👉🏻 Facebook Page : https://www.facebook.com/thetechdcode
👉🏻 Twitter : https://twitter.com/thetechdcode
👉🏻 Telegram Channel : https://t.me/thetechdcode
👉🏻 Tech DCode Linktree : https://linktr.ee/thetechdcode
👉🏻 My Personal Handles : https://linktr.ee/virtualshivamin

🧑‍💻🧑‍💻 Social Media Links of SHIVAM SINGH (OWNER) :

👉🏻 Instagram : https://www.instagram.com/virtualshivamin/
👉🏻 Facebook Page : https://www.facebook.com/virtualshivamin/
👉🏻 Twitter : https://twitter.com/virtualshivamin/
👉🏻 Personal Linktree : https://linktr.ee/virtualshivamin 

 

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

Tagged with , , , , , , , , , , , , , ,

Leave a Reply

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