<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .discription-container{
            display: flex;
        }
        .discription-element{
            margin: 80px;
            width:auto;
        }
        .dis-content{
            width: 70%;
        }
        .img-dis{
            height: 450px;
            border: 4px solid black;
        }
        .book-name-dis{
            color: red;
            font-size: 50px;
        }
        .price{
            color: red;
            font-size: 25px;
        }
        .btn-dis{
            color: black;
            background-color: red;
            height: 30px;
            font-weight: bolder;
        }
        .btn-dis:hover{
            background-color: aliceblue;
            box-shadow:2px 5px 10px gray;
            border-radius: 5px;
        }
        h2{
            font-weight: bolder;
            font-size: 30px;
            color: red;
            margin: 50px;
        }
        .book-name{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="../../../STYLESHEET/discription.css">
    <link rel="stylesheet" href="./../../../STYLESHEET/nav-bar.css">
    <link rel="stylesheet" href="./../../../STYLESHEET/card.css">
    <link rel="stylesheet" href="./../../../STYLESHEET/footer.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Russo+One&family=Signika&display=swap" rel="stylesheet">
</head>
<body>
    <div class="notify-bar-container">
        <marquee behavior="" direction="">Site Will Be Completed Before 18</marquee>
        <div class="notify-bar-section">
            <a href="#">📞 444-666-999</a>
        </div>
    
    </div>
    <div class="navbar-container">
        <div class="navbar-container-section"><a href="./../../../index.html">Home</a></div>
        <div class="navbar-container-section"><a href="./../../General-Pages/about-us.html">About Us</a></div>
        <div class="navbar-container-section"><a href="./../../General-Pages/contact-us.html">Contact Us</a></div>
        <div class="navbar-container-section"><a href="./../../General-Pages/suggestion.html">Suggestion</a></div>
        <div class="navbar-container-section"><a href="./../../General-Pages/my-ac.html">My Account</a></div>
        <div class="navbar-container-section"><a href="./../../common-tools/cart.html" style="font-size: 30px;">⛟</a></div>

        <div class="navbar-container-section-search"><input type="text" placeholder="search your favorite book"></div>
        <button class="navbar-container-section-btn">Search</button>
    
    
    </div>
    <div class="books-section-container">
        <div class="books-section">
            <a href="./../../Harsh/storyy.html">STORY</a>
        </div>
        <div class="books-section">
            <a href="./../../kalyani/novel.html"> Novel</a>
        </div>
    
        <div class="books-section">
            <a href="./../fiction.html"> Fiction</a>
        </div>
        <div class="books-section">
            <a href="./../../SAURABH/comics.html"> Commics</a>
        </div>
        <div class="books-section">
            <a href="./../../kirtee/history.html"> history</a>
        </div>
        <div class="books-section">
            <a href="./../../GK-page/gk.html"> GK</a>
        </div>
        <div class="books-section">
            <a href="./../../Sakshi/Arts.html"> Art</a>
        </div>
        <div class="books-section">
            <a href="./../../nilesh/biography.html"> Biography</a>
        </div>
        <div class="books-section">
            <a href="./../../ruchii/poetry.html"> Poetry</a>
        </div>
        <div class="books-section">
            <a href="./../../Prajakta/Self-Help.html"> Motivational</a>
        </div>
        <div class="books-section">
            <a href="./../../PRATIK/study.html"> Study</a>
        </div>
    </div>
    <div class="discription-container">
        <div class="discription-element">
       <img src="../../../IMAGES/fiction_images/i6.jpg" class="img-dis">
        </div>
        <div class="discription-element dis-content">
               <u>
                   <h1 class="book-name"> Ugly Love </h1>
               </u>
               <h3> | Released :  05 Aug 2014 </h3>
               <h3> By: Colleen Hoover (Author)  </h3>
               <h3> | Publisher: Atria Books  </h3>
               <h3> ⭐⭐⭐⭐ | Write a Review </h3>
               <hr>
               <h3 class="price"> ₹274 </h3>
               <del class="price">₹499</del>
   
               <br>
   
               <h4> International Edition </h4>
               <h4> Ships within !8-20 Busines Days </h4>
               <h5> Free Shipping in india and low cost Worldwide </h5>
               <button class="btn-dis"> Buy Now </button> &nbsp; <a href="./../common-tools/cart.html"><button class="btn-dis"> Add to cart </button></a>
               <h2> <u> About the Book </u></h2>
               <p>When Tate Collins meets airline pilot Miles Archer, she doesn't think it's love at first sight. They wouldn't even go so far as to consider themselves friends. The only thing Tate and Miles have in common is an undeniable mutual attraction. Once their desires are out in the open, they realize they have the perfect set-up. He doesn't want love, she doesn't have time for love, so that just leaves the sex. Their arrangement could be surprisingly seamless, as long as Tate can stick to the only two rules Miles has for her.</p>
       </div>
        </div>
        <h2>Best Seller</h2>
        <div class="books-cards-container">
            <div class="box">
                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
                <img src="../../../IMAGES/fiction_images/i1.jpg" alt="108 Moral Stories" class="img ">
                <h3 class="books-titile">It Ends with Us</h3>
                <a href="../../PAGES/Harsh/108moralstories.html"><button class="cards-btn ">know more</button></a>
    
            </div>
            <div class="box">
                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
                    
                <img src="../../../IMAGES/fiction_images/i2.jpg" alt="Bedtime Stories" class="img ">
                <h3 class="books-titile">It Starts with Us</h3>
                <a href="../../PAGES/Harsh/bedtimestories.html"><button class="cards-btn ">know more</button></a>
    
            </div>
            <div class="box">
                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
    
                <img src="../../../IMAGES/fiction_images/i3.jpg" alt="Moral Stories" class="img ">
                <h3 class="books-titile">To Kill A Mockingbird</h3>
                <a href="../../PAGES/Harsh/moralstories.html"><button class="cards-btn ">know more</button></a>
    
            </div>
            <div class="box">

                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
                <img src="../../../IMAGES/fiction_images/i4.jpg" alt="Panchatantra Stories" class="img ">
                <h3 class="books-titile">The Silent Patient </h3>
                <a href="../../PAGES/Harsh/panchatantra.html"><button class="cards-btn ">know more</button></a>
    
            </div>
            <div class="box">
                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
    
                <img src="../../../IMAGES/fiction_images/i5.jpg" alt="Sudha Murty" class="img ">
                <h3 class="books-titile">As a man thinketh</h3>
                <a href="../../PAGES/Harsh/murti.html"><button class="cards-btn ">know more</button></a>
    
            </div>
            <div class="box">
                <h4 class="heart-symbol">🤍 Add to your Wishlist</h4>
                <img src="../../../IMAGES/fiction_images/i6.jpg" alt="Ruskin Bond all time favourite" class="img ">
                <h3 class="books-titile">Ugly Love</h3>
                <a href="../../PAGES/Harsh/moralstories.html"><button class="cards-btn ">know more</button></a>
            </div>
    
    
        </div>
        <Footer>
            <Div Class="Footer0"><H1>THE BOOK TOWN</H1></Div>
            <Div Class="Footer1">
                Connect With Us At
                <Div Class="Social-Media">
                    <A Href="#"> <img src="./../../IMAGES/footer-img/instagram (2).png" class="footer1-section-img"></A>
                    <A Href="#"> <img src="./../../IMAGES/footer-img/linkedin.png" class="footer1-section-img"> </A>
                    <A Href="#"><img src="./../../IMAGES/footer-img/telegram.png" class="footer1-section-img"> </A>
                    <A Href="#"> <img src="./../../IMAGES/footer-img/youtube.png" class="footer1-section-img"> </A>
                    <A Href="#"><img src="" alt=""> </A>
                </Div>
            </Div>
            <Div Class="Footer2">
                <Div Class="Product">
                    <Div Class="Heading">Products</Div>
                    <Div Class="Div">Sell Your Products</Div>
                    <Div Class="Div">Advertise</Div>
                    <Div Class="Div">Pricing</Div>
                    <Div Class="Div">Product Buisness</Div>
                </Div>
                <Div Class="Services">
                    <Div Class="Heading">Services</Div>
                    <Div Class="Div">Return</Div>
                    <Div Class="Div">Cash Back</Div>
                    <Div Class="Div">Affiliate Marketing</Div>
                    <Div Class="Div">Others</Div>
                </Div>
                <Div Class="Company">
                    <Div Class="Heading">Company</Div>
                    <Div Class="Div">Complaint</Div>
                    <Div Class="Div">Careers</Div>
                    <Div Class="Div">Affiliate Marketing</Div>
                    <Div Class="Div">Support</Div>
                </Div>
                <Div Class="Get Help">
                    <Div Class="Heading">Get Help</Div>
                    <Div Class="Div">Help Center</Div>
                    <Div Class="Div">Privacy Policy</Div>
                    <Div Class="Div">Terms</Div>
                    <Div Class="Div">Login</Div>
                </Div>
            </Div>
            <Div Class="Footer3">
                Copyright © 2021-2028
                <H4>THE BOOK TOWN</H4>
                
            </Div>
        </Footer>
</body>
</html>