description.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style/index.css">
    <title>Document</title>
    <link rel="stylesheet" href="./style/description.css">
    <style>
        #empty{
            height:150px;
        }
    </style>
</head>
<body>
 <!-- ! =========== + 2 levels of nav bar + {starts} ===========-->

 <nav>
    <!-- -=-=-=-=--=--= sliding nav bar {starts} =-=-=-=--==-=-=-=- -->
    <div class="navOne">
        <button id="left" class="arrow" onclick="prevSlide()"> <p> &#8249; </p> </button>
        <p id="sliders" class="sliders">Free Ship Over $50!</p>
        <button id="right" class="arrow" onclick="nextSlide()"> <p> &#8250;</p> </button>
    </div>
    <!--  -=-=-=-=--=--= sliding nav bar {ends} =-=-=-=--==-=-=-=- -->

    <!-- -=-=-=-=--=--= normal nav bar {starts} -=-=-=-=--=--= -->
    <div class="navTwo">
        <!-- Category {starts} -->
        <div class="categoryLinks">
            <div id="Women" class="Women underline">
                <a href="#">Women</a>
            </div>
            <!-- ? dropdown for Women Categories {starts} -->
                <div class="drop forwomen" id="drop1">
                    
                    <div class="flexing">
                        <div class="first">
                            <div class="upper">
                                <a href="/women.html">Shop All Women</a>
                            </div>
                            <div class="lower">
                                <a href="/women.html"><p>New Arrivals</p></a>
                                <a href="/women.html" class="arrow"><p>Tops</p></a>
                                <a href="/women.html" class="arrow"><p>Bottoms</p></a>
                                <a href="/women.html" class="arrow"><p>Dresses + Rompers</p></a>
                                <a href="/women.html" class="arrow"><p>Hoodies + Sweats</p></a>
                                <a href="/women.html" class="arrow"><p>Loungewear</p></a>
                                <a href="/women.html" class="arrow"><p>Swimwear</p></a>
                                <a href="/women.html" class="arrow"><p>Outerwear</p></a>
                                <a href="/women.html" class="arrow"><p>Accessories</p></a>
                                <a href="/women.html" class="arrow"><p>Bralettes + Undies</p></a>
                                <a href="/women.html"><p>Fragnance</p></a>
                            </div>
                        </div>
                        <div class="second">
                            <div class="top saming">
                                <div class="topupper">
                                    <a href="#">Shop All Top</a>
                                </div>
                                <div class="toplower">
                                    <a href="#"><p>Knit Tops</p></a>
                                    <a href="#"><p>Hoodies + Sweatshirts</p></a>
                                    <a href="#"><p>Graphic Tees</p></a>
                                    <a href="#"><p>Camis + Tanks</p></a>
                                    <a href="#"><p>Shirt + Blouses</p></a>
                                    <a href="#"><p>Sweaters</p></a>
                                    <a href="#"><p>Polos</p></a>
                                </div>
                            </div>
                        </div>
                        <div class="third">
                            <div class="links">
                                <div class="top saming">
                                    <div class="topupper">
                                        <a href="#">Collection</a>
                                    </div>
                                    <div class="toplower">
                                        <a href="#"><p>Aero | Coca-Cola@</p></a>
                                        <a href="#"><p>Aero dwntme</p></a>
                                        <a href="#"><p>The NBA Shop</p></a>
                                        <a href="#"><p>The Cargo Edit</p></a>
                                        <a href="#"><p>Spring Break Shop</p></a>
                                        <a href="#"><p>Aero Impact</p></a>
                                        <a href="#"><p>Matching Sets</p></a>
                                        <a href="#"><p>Multipacks</p></a>
                                        <a href="#"><p>Uniform</p></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="imag">
                            <img src="https://www.aeropostale.com/on/demandware.static/-/Sites-site-catalog-aeropostale/default/dw377b5db8/menu-banners/2022/122322/MENU_Women%402x-min.png" alt="">
                        </div>
                    </div>
                </div>
            <!-- ? dropdown for Women Categories {ends} -->
            <div id="Men" class="Men underline">
                <a href="#">Men</a>
            </div>
            <!-- ? dropdown for Men Categories {starts} -->
            <div class="drop forwomen" id="drop2">
                <div class="flexing">
                    <div class="first">
                        <div class="upper">
                            <a href="/men.html">Shop All Men</a>
                        </div>
                        <div class="lower">
                            <a href="/men.html"><p>New Arrivals</p></a>
                            <a href="/men.html" class="arrow"><p>Tops</p></a>
                            <a href="/men.html" class="arrow"><p>Bottoms</p></a>
                            <a href="/men.html" class="arrow"><p>Dresses + Rompers</p></a>
                            <a href="/men.html" class="arrow"><p>Hoodies + Sweats</p></a>
                            <a href="/men.html" class="arrow"><p>Loungewear</p></a>
                            <a href="/men.html" class="arrow"><p>Swimwear</p></a>
                            <a href="/men.html" class="arrow"><p>Outerwear</p></a>
                            <a href="/men.html" class="arrow"><p>Accessories</p></a>
                            <a href="/men.html" class="arrow"><p>Bralettes + Undies</p></a>
                            <a href="/men.html"><p>Fragnance</p></a>
                        </div>
                    </div>
                    <div class="second">
                        <div class="top saming">
                            <div class="topupper">
                                <a href="#">Shop All Top</a>
                            </div>
                            <div class="toplower">
                                <a href="#"><p>Knit Tops</p></a>
                                <a href="#"><p>Hoodies + Sweatshirts</p></a>
                                <a href="#"><p>Graphic Tees</p></a>
                                <a href="#"><p>Camis + Tanks</p></a>
                                <a href="#"><p>Shirt + Blouses</p></a>
                                <a href="#"><p>Sweaters</p></a>
                                <a href="#"><p>Polos</p></a>
                            </div>
                        </div>
                    </div>
                    <div class="third">
                        <div class="links">
                            <div class="top saming">
                                <div class="topupper">
                                    <a href="#">Collection</a>
                                </div>
                                <div class="toplower">
                                    <a href="#"><p>Aero | Coca-Cola@</p></a>
                                    <a href="#"><p>Aero dwntme</p></a>
                                    <a href="#"><p>The NBA Shop</p></a>
                                    <a href="#"><p>The Cargo Edit</p></a>
                                    <a href="#"><p>Spring Break Shop</p></a>
                                    <a href="#"><p>Aero Impact</p></a>
                                    <a href="#"><p>Matching Sets</p></a>
                                    <a href="#"><p>Multipacks</p></a>
                                    <a href="#"><p>Uniform</p></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="imag">
                        <img src="https://www.aeropostale.com/on/demandware.static/-/Sites-site-catalog-aeropostale/default/dwc883f5eb/menu-banners/2022/122322/MENU_Men%402x-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- ? dropdown for Men Categories {ends} -->
            <div id="Jeans" class="Jeans underline">
                <a href="#" class="jeans">Jeans</a>
            </div>
            <!-- ? dropdown for Jeans Categories {starts} -->
            <div class="drop forwomen" id="drop3">
                <div class="flexing">
                    <div class="first">
                        <div class="upper">
                            <a href="/jeans.html">Shop All Jeans</a>
                        </div>
                        <div class="lower">
                            <a href="/jeans.html"><p>New Arrivals</p></a>
                            <a href="/jeans.html" class="arrow"><p>Tops</p></a>
                            <a href="/jeans.html" class="arrow"><p>Bottoms</p></a>
                            <a href="/jeans.html" class="arrow"><p>Dresses + Rompers</p></a>
                            <a href="/jeans.html" class="arrow"><p>Hoodies + Sweats</p></a>
                            <a href="/jeans.html" class="arrow"><p>Loungewear</p></a>
                            <a href="/jeans.html" class="arrow"><p>Swimwear</p></a>
                            <a href="/jeans.html" class="arrow"><p>Outerwear</p></a>
                            <a href="/jeans.html" class="arrow"><p>Accessories</p></a>
                            <a href="/jeans.html" class="arrow"><p>Bralettes + Undies</p></a>
                            <a href="/jeans.html"><p>Fragnance</p></a>
                        </div>
                    </div>
                    <div class="second">
                        <div class="top saming">
                            <div class="topupper">
                                <a href="#">Shop All Top</a>
                            </div>
                            <div class="toplower">
                                <a href="#"><p>Knit Tops</p></a>
                                <a href="#"><p>Hoodies + Sweatshirts</p></a>
                                <a href="#"><p>Graphic Tees</p></a>
                                <a href="#"><p>Camis + Tanks</p></a>
                                <a href="#"><p>Shirt + Blouses</p></a>
                                <a href="#"><p>Sweaters</p></a>
                                <a href="#"><p>Polos</p></a>
                            </div>
                        </div>
                    </div>
                    <div class="third">
                        <div class="links">
                            <div  class="top saming">
                                <div class="topupper">
                                    <a href="#">Collection</a>                                </div>
                                <div class="toplower">
                                    <a href="#"><p>Aero | Coca-Cola@</p></a>
                                    <a href="#"><p>Aero dwntme</p></a>
                                    <a href="#"><p>The NBA Shop</p></a>
                                    <a href="#"><p>The Cargo Edit</p></a>
                                    <a href="#"><p>Spring Break Shop</p></a>
                                    <a href="#"><p>Aero Impact</p></a>
                                    <a href="#"><p>Matching Sets</p></a>
                                    <a href="#"><p>Multipacks</p></a>
                                    <a href="#"><p>Uniform</p></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="imag">
                        <img src="https://www.aeropostale.com/on/demandware.static/-/Sites-site-catalog-aeropostale/default/dwb7537e11/menu-banners/2022/122322/MENU_Jeans%402x-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- ? dropdown for Jeans Categories {ends} -->
            <div id="Clearance" class="Clearance underline">
                <a href="#">Clearance</a>
            </div>
            <!-- ? dropdown for Clearance Categories {starts} -->
            <div class="drop forwomen" id="drop4">
                <div class="flexing">
                    <div class="first">
                        <div class="upper">
                            <a href="/collection.html">Shop All Clearance</a>
                        </div>
                        <div class="lower">
                            <a href="/collection.html"><p>New Arrivals</p></a>
                            <a href="/collection.html" class="arrow"><p>Tops</p></a>
                            <a href="/collection.html" class="arrow"><p>Bottoms</p></a>
                            <a href="/collection.html" class="arrow"><p>Dresses + Rompers</p></a>
                            <a href="/collection.html" class="arrow"><p>Hoodies + Sweats</p></a>
                            <a href="/collection.html" class="arrow"><p>Loungewear</p></a>
                            <a href="/collection.html" class="arrow"><p>Swimwear</p></a>
                            <a href="/collection.html" class="arrow"><p>Outerwear</p></a>
                            <a href="/collection.html" class="arrow"><p>Accessories</p></a>
                            <a href="/collection.html" class="arrow"><p>Bralettes + Undies</p></a>
                            <a href="/collection.html"><p>Fragnance</p></a>
                        </div>
                    </div>
                    <div class="second">
                        <div class="top saming">
                            <div class="topupper">
                                <a href="#">Shop All Top</a>
                            </div>
                            <div class="toplower">
                                <a href="#"><p>Knit Tops</p></a>
                                <a href="#"><p>Hoodies + Sweatshirts</p></a>
                                <a href="#"><p>Graphic Tees</p></a>
                                <a href="#"><p>Camis + Tanks</p></a>
                                <a href="#"><p>Shirt + Blouses</p></a>
                                <a href="#"><p>Sweaters</p></a>
                                <a href="#"><p>Polos</p></a>
                            </div>
                        </div>
                    </div>
                    <div class="third">
                        <div class="links">
                            <div class="top saming">
                                <div class="topupper">
                                    <a href="#">Collection</a>
                                </div>
                                <div class="toplower">
                                    <a href="#"><p>Aero | Coca-Cola@</p></a>
                                    <a href="#"><p>Aero dwntme</p></a>
                                    <a href="#"><p>The NBA Shop</p></a>
                                    <a href="#"><p>The Cargo Edit</p></a>
                                    <a href="#"><p>Spring Break Shop</p></a>
                                    <a href="#"><p>Aero Impact</p></a>
                                    <a href="#"><p>Matching Sets</p></a>
                                    <a href="#"><p>Multipacks</p></a>
                                    <a href="#"><p>Uniform</p></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="imag">
                        <img src="https://www.aeropostale.com/on/demandware.static/-/Sites-site-catalog-aeropostale/default/dw6916a878/menu-banners/2022/122322/MENU_Clearance%402x-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- ? dropdown for Clearance Categories {ends} -->
        </div>
        <!-- Category {ends} -->

        <!-- Logo {starts} -->
        <div class="logo">
            <div class="img">
                <a href="index.html">
                    <img src="./images/logo2.png" alt="logo+link">
                </a>
            </div>
        </div>
        <!-- Logo {ends} -->
            
        <!-- login, wishlist, cart and search {starts}-->
        <div class="Loginlinks" id="Loginlinks">
            <div class="search">
                <input type="search" placeholder=" &nbsp; &nbsp; Search" />
            </div>
            <div class="links">
                <a href="cartpage.html">
                    <img src="https://cdn-icons-png.flaticon.com/128/2767/2767018.png" alt="heart">
                </a>
            </div>
            <div class="links">
                <a href="#">
                    <img src="https://cdn-icons-png.flaticon.com/128/684/684809.png" alt="location">
                </a>
            </div>
            <div class="links userIcon" id="userIcon">
                <a href="/signInPage.html">
                    <img src="https://cdn-icons-png.flaticon.com/128/9308/9308008.png" alt="user">
                </a>
            <!-- ? here is a dropdown for login/register {starts} -->
                <div class="dropUser" id="dropUser">
                    <button class="margin register"><a href="/register.html">Register</a></button>
                    <button class="signin"><a href="/signInPage.html">Sign In </a></button>
                    <a href="#">Track an Order</a>
                    <a href="#">Get Help</a>
                </div>
                <div class="links">
                    <a href="/cartpage.html">
                        <img src="https://cdn-icons-png.flaticon.com/128/102/102665.png" alt="bag">
                    </a>
                    <div id="signout" class="dropUser">
                        <a href="#">My Account</a>
                        <a href="#" id="sign">Sign Out</a>
                    </div>
            <!-- ? here is a dropdown for login/register {ends} -->
                </div>
            <!-- <div class="links">
                <a href="/cartpage.html">
                    <img src="https://cdn-icons-png.flaticon.com/128/102/102665.png" alt="bag">
                </a>
            </div> -->
        </div>
        <!-- login, wishlist, cart and search {ends}-->
    </div>
    <!-- -=-=-=-=--=--= normal nav bar {ends} -=-=-=-=--=--= -->
    <!-- </nav> -->
    </nav>
    <div id="empty"></div>
    <hr style="margin: 20px;">
 
<!-- ! =========== + 2 levels of nav bar + {ends} ===========-->
    <hr>
    <div id="main_section">
        <div id="main_div">
            <div id="img1_div">
                <!-- append img1 -->
            </div>
            <div id="img2_div">
                <!-- append img2 -->    
            </div>
       
        </div>
        <div id="description">
           
            <!-- append all the data -->
            
        </div>
        
    </div>
    <hr id="horizontal">
    <div style="float: right;margin-right: 70px;">
        <p>4 interest-free payments of $4.50 with <b>Klarna</b></p>
        <a style="color:black" href="#">Learn more</a>
        <br>
        <br>
        <hr style="margin-top: 10px;margin-bottom: 20px;">
        <a style="color:black" href="#">Product details & Fit</a>
        <br>
        <br>
        <a style="color:black" href="#">Shipping & Returns</a>
    </div>
  
    <div style="margin-left: 30px;margin-top: 30px;">
        <p>A comfy cropped bomber jacket that goes all in on varsity-inspired style.</p>
        <br>
        <h4>Details</h4>
        <ul>
            <li>Knit fabric</li>
            <li>Colorblocked design</li>
            <li>Front LA appliqué | back Los Angeles appliqué</li>
            <li>Snap placket</li>
            <li>Angled front pockets</li>
            <li>Striped rib-knit cuffs & hem</li>
            <li>Style: 1609</li>
            <li>Imported</li>
        </ul>
        <br>
        <h4>Fit</h4>
        <ul>
            <li>Slim fit</li>
            <li>Cropped cut</li>
            <li>Drawstring hood</li>
            <li>Approx. length (M): 19.25"</li>
            <li>Model height: 5'10" | Wear size: Small</li>
        </ul>
        <br>
        <h4>Care & Materials</h4>
        <ul>
            <li>73% polyester, 27% cotton</li>
            <li>Machine wash/hang dry</li>
        </ul>
    </div>
<!-- -=-=-=-=--=--= footer part {starts} -=-=-=-=--=--= -->
<div class="footer">
    <div class="one">
        <div class="arr1">
            <div class="loc col">
                <img src="https://cdn-icons-png.flaticon.com/128/684/684809.png" alt="">
                <a href="">Store Locator</a>
            </div>
            <div class="ord col">
                <img src="https://cdn-icons-png.flaticon.com/128/5161/5161308.png" alt="">
                <a href="">Order Status</a>
            </div>
            <div class="gift col">
                <img src="https://cdn-icons-png.flaticon.com/128/658/658015.png" alt="">
                <a href="">Gift Cards/Balance</a>
            </div>
            <div class="feed col">
                <img src="https://cdn-icons-png.flaticon.com/128/8316/8316205.png" alt="">
                <a href="">Feedback</a>
            </div>
        </div>
    </div>
    <div class="two">
        <div class="arr2">
            <div class="help">
                <p>Shopping Help</p>
            </div>
            <div class="linkss">
                <a href="#">Help Desk</a>
                <a href="#">Return & Exchanges</a>
                <a href="#">Price & Price Match Policy</a>
                <a href="#">Shipping & Handling</a>
                <a href="#">Size Charts</a>
                <a href="#">Buy Online, Pick Up In Store</a>
                <a href="#">Student Discount</a>
            </div>
        </div>
    </div>
    <div class="three">
        <div class="arr3">
            <div class="ques">
                <p>Questions ?</p>
            </div>
            <div class="cont">
                <p>Chat With Us</p>
                <a href="#">Available 9AM-12AM EST</a>
            </div>
            <div class="call">
                <p>Call Us</p>
                <a href="#">1.877.289.2376</a>
            </div>
            <div class="us">
                <p>Contact Us</p>
            </div>
        </div>
    </div>
    <div class="four">
        <div class="arr4">
            <div class="about">
                <p>About Us</p>
            </div>
            <div class="linkss">
                <a href="#">About Aeropostale</a>
                <a href="#">Careers</a>
                <a href="#">Supply Chain</a>
                <a href="#">Aero Impact</a>
                <a href="#">Your Privacy Choices</a>
            </div>
        </div>
    </div>
    <div class="five">
        <div class="arr5">
            <div class="about">
                <p>Get The Latest Styles & Offers:</p>
            </div>
            <div class="search">
                <input type="search" placeholder="&nbsp; &nbsp; &nbsp;Enter Email">
                <button>Subscribe</button>
            </div>
            <div class="para">
                <p>
                    For more information, please see our Privacy Policy. <br>California residents, see our California Privacy Notice <br> and Do Not Sell My Personal Information page.
                </p>
            </div>
            <div class="foll">
                <p>Follow Us</p>
            </div>
            <div class="socials">
                <img src="https://cdn-icons-png.flaticon.com/128/1384/1384089.png" alt="instagram">
                <img src="https://cdn-icons-png.flaticon.com/128/2111/2111819.png" alt="twitter">
                <img src="https://cdn-icons-png.flaticon.com/128/20/20837.png" alt="facebook">
                <img src="https://cdn-icons-png.flaticon.com/128/1384/1384086.png" alt="Youtube">
                <img src="https://cdn-icons-png.flaticon.com/128/3938/3938055.png" alt="tiktok">
            </div>
        </div>
    </div>
    <div class="six">
        <a href="#">Don’t Sell My Information</a>
        <a href="#">Terms of Use</a>
        <a href="#">Accessibility Statement</a>
        <a href="#">Privacy Policy</a>
        <a href="#">CA Transparency Act</a>
        <a href="#"><p>© 2023 Aeropostale.All Rights Reserved.</p></a>
    </div>
</div>
<!-- -=-=-=-=--=--= footer part bar {ends} -=-=-=-=--=--= -->
</body>
</html>
<script src="/script/index.js"></script>
<script src="./script/description.js"></script>