home.html

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <style>
            body{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .header{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                background-color: red;
            }
            .header-links{
                display: flex;
                align-items: center;
            }
            .header-links > *{
                margin-right: 20px;
            }
            .menu{
                font-size: 16px;
                border: none;
                background-color: transparent;
                cursor: pointer;
                font-family: 'Times New Roman', Times, serif;
            }
            .search-container{
                display: flex;
                align-items: center;
            }
            .profile-icon,
            .cart-icon{
                font-size: 40px;
            }
            .cart-icon{
                margin-right: 30px;
            }
            .profile-icon{
                margin-right: 20px;
            }
            .drop{
                position: relative;
                display: inline-block;
            }
            .sell-book{
                position: relative;
                right: 350px;
            }
            .sell-booka{
                color: black;
                text-decoration: none;
            }
            .contact-us{
                position: relative;
                right: 675px;
            }
            .contact-usa{
                color: black;
                text-decoration: none;
            }
            .home{
                color: black;
                text-decoration: none;
            }
            .drpbtn{
                display: none;
                position: absolute;
                background-color: #f1f1f1;
                min-width: 130px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
                top: calc(100% + 10px);
                left: 0;
            }
            .drpbtn a{
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .drpbtn a:hover{background-color: #ddd;}
            .drop:hover .drpbtn{display: block;}
            .drop:hover .menu{background-color: transparent;}
            .gallery{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                padding: 20px;
            }
            .gallery-item{
                margin-bottom: 20px;
            }
            .gallery-item img{
                width: 200px;
                height: 200px;
                object-fit: contain;
                border: 1px solid #ddd;
                border-radius: 5px;
            }
            .book-info{
                margin-top: 10px;
                text-align: center;
            }
            
            .gallery a{
                color: black;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <header class="header">
            <div class="header-links">
                <a href="home.html" class="home"><p class="home">Home</p></a>
                <div class="drop">
                <button class="menu">Categories</button>
                <div class="drpbtn">
                    <a href="art_photography.html">Art & Photography</a>
                    <a href="biographies.html">Biographies</a>
                    <a href="literature.html">Literature</a>
                    <a href="fiction.html">Fiction</a>
                    <a href="encyclopedias.html">Encyclopedias</a>
                    <a href="his&hum.html">History & Humanities</a>
                    <a href="social_sciences.html">Social Sciences</a>
                    <a href="buss&eco.html">Business & Economics</a>
                    <a href="law.html">Law</a>
                    <a href="medicine.html">Medicine</a>
                    <a href="sci&math.html">Science & Mathematics</a>
                    <a href="tech&engg.html">Technology & Engineering</a>
                    <a href="thriller.html">Thriller</a>
                </div>
            </div>
            </div>
            <a href="sell-book.html" class="sell-booka"><p class="sell-book">Sell a book</p></a>
            <a href="" class="contact-usa"><p class="contact-us">Contact Us</p></a>
            <div class="search-container">
                <i class="fas fa-shopping-cart cart-icon"></i>
                <i class="fas fa-user profile-icon"></i>
            </div>
        </header>
        <h1 class="top-selling">Best Seller</h1>
        <div class="gallery">
            <div class="gallery-item">
                <a href=""><img src="images/atomic_habits.jpg" alt="Product 1">
                    <div class="book-info">
                        <p><b>Atomic Habits</b></p>
                        <p>James Clear</p>
                        <p>899/-</p>
                    </div>
                </a>
            </div>
            <div class="gallery-item">
                <a href=""><img src="images/doglapan.jpg" alt="Product 2">
                    <div class="book-info">
                        <p><b>Doglapan</b></p>
                        <p>Ashneer Grover</p>
                        <p>499/-</p>
                    </div></a>
            </div>
            <div class="gallery-item">
                <a href=""><img src="images/ikigai.jpg" alt="Product 3">
                    <div class="book-info">
                        <p><b>Ikigai</b></p>
                        <p>Francesc Miralles</p>
                        <p>550/-</p>
                    </div></a>
            </div>
            <div class="gallery-item">
                <a href=""><img src="images/it_ends_with_us.jpg" alt="Product 4">
                    <div class="book-info">
                        <p><b>It Ends with Us</b></p>
                        <p>Colleen Hoover</p>
                        <p>495/-</p>
                    </div></a>
            </div>
            <div class="gallery-item">
                <a href=""><img src="images/psychology_of_money.jpg" alt="Product 5">
                    <div class="book-info">
                        <p><b>The Psychology of Money</b></p>
                        <p>Morgan Housel</p>
                        <p>396/-</p>
                    </div></a>
            </div>
        </div>
    </body>
</html>