store.html

<!DOCTYPE html>
<html>
<head>
    <title>Store</title>
    <link rel="icon" href="images/Ukay-Ni-Lola.png" type="image/x-icon">
    <meta name="description" content="This is the description">
    <link rel="stylesheet" href="style.css" />
    <script src="store.js" async></script>
</head>
<body>
<header class="main-header">
    <nav class="main-nav nav">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="store.html">STORE</a></li>
            <li><a href="about.html">ABOUT</a></li>
        </ul>
    </nav>
    <h1 class="band-name band-name-large">Ukay ni Lola</h1>
</header>
<section class="container content-section">
    <h2 class="section-header">Imported | Korean Style</h2>
    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">IK-200</span>
            <img class="shop-item-image" src="Images/Korean1.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=199.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IK-800</span>
            <img class="shop-item-image" src="Images/Korean2.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=250.00</span>
                <button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IK-300</span>
            <img class="shop-item-image" src="Images/Korean3.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=400.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IK-138</span>
            <img class="shop-item-image" src="Images/Korean4.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=280.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">Imported | Pants</h2>
    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">IP-300</span>
            <img class="shop-item-image" src="Images/Pants1.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IP-400</span>
            <img class="shop-item-image" src="Images/Pants2.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IP-500</span>
            <img class="shop-item-image" src="Images/Pants3.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">IP-100</span>
            <img class="shop-item-image" src="Images/Pants4.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">Class A | Over Size</h2>
    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">CAOs-300</span>
            <img class="shop-item-image" src="Images/Oversize1.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">CAOs-400</span>
            <img class="shop-item-image" src="Images/Oversize2.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">CAOs-500</span>
            <img class="shop-item-image" src="Images/Oversize3.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">CAOs-100</span>
            <img class="shop-item-image" src="Images/Oversize4.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">Original | Sports</h2>
    <div class="shop-items">
        <div class="shop-item">
            <span class="shop-item-title">OS-300</span>
            <img class="shop-item-image" src="Images/Sports1.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">OS-400</span>
            <img class="shop-item-image" src="Images/Sports2.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">OS-500</span>
            <img class="shop-item-image" src="Images/Sports3.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=200.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
        <div class="shop-item">
            <span class="shop-item-title">OS-100</span>
            <img class="shop-item-image" src="Images/Sports4.jpg">
            <div class="shop-item-details">
                <span class="shop-item-price">P=300.00</span>
                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
            </div>
        </div>
    </div>
</section>
<section class="container content-section">
    <h2 class="section-header">CART</h2>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
    </div>
    <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">P=0</span>
    </div>
    <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
<footer class="main-footer">
    <div class="main-footer-container">
        <h3 class="FOOTER">Midterm Project in P-20</h3>
    </div>
</footer>
</body>
</html>