sandygrandy.github.io/product.html at main · sandygrandy/sandygrandy.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="/Favicon/favicon-16x16.png" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rainydays home page</title>

    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <header class="product-header">
        <div class="header">
            <a href="/">
                <img src="./main-logo.png" id="logo" alt="Rainydays logo">
            </a>
            <div class="nav">
                <a href="./jacktets.html">Shop</a>
                <a href="./contact.html">Contact us</a>
                <a href="./about-us.html">About us</a>
                <a href="./checkout.html" id="menu-cart">Cart</a>
            </div>
                <input type="checkbox" id="hamburger-input" class="hamburger-show" >
                <label id="hamburger-menu" for="hamburger-input" >
                    <nav id="sidebar-menu">
                        <h3>Menu</h3>
                        <ul>
                            <li><a href="./jacktets.html">Shop</a></li>
                            <li><a href="./contact.html">Contact us</a></li>
                            <li><a href="./about-us.html">About us</a></li>
                            <li><a href="./checkout.html">Cart</a></li>
                        </ul>
                    </nav>
                </label>
                <div class="overlay"></div>
        </div>
    </header>

    <section id="product-details">
        <div>
            <img src="#" alt="Product-preview" id="image">
        </div>
        <div>
            <h1 id="title">Product name</h1>
            <h2 id="gender">Gender</h2>
            <h3 id="price">Price $</h3>
            <select id="sizes">
                <option>Sizes</option>
                <option>XS</option>
                <option>S</option>
                <option>M</option>
                <option>L</option>
                <option>XL</option>
                <option>XXL</option>
            </select>
            <p id="description">Product description Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, nemo eius? Esse, aspernatur, incidunt ipsum hic delectus dolore accusantium rem ex quas, voluptatibus autem exercitationem blanditiis. Eligendi doloribus enim nesciunt.</p>
            <button id="product-button">Add to cart</button>
        </div>

    </section>
    <footer class="footer-rainydays">
        <img src="./main-logo.png" alt="Main Logo for Rainyday">

        <div>
            <h5>Support</h5>
                <a href="#">Contact us</a>
                <br>
                <a href="#">FAQ</a>
                <br>
                <a href="#">Returns</a>
                <br>
                <a href="#">Shipping</a>
                <br>
                <a href="#">Payment</a>
        </div>

        <div>
            <h5>Rainydays</h5>
                <a href="#">About us</a>
                <br>
                <a href="#">Career</a>
                <br>
                <a href="#">Locate us</a>
        </div>

        <div>
            <h5>Policies</h5>
                <a href="#">Privacy policy</a>
                <br>
                <a href="#">Cookies</a>
                <br>
                <a href="#">Integrity policy</a>
        </div>
    </footer>

    <script src="./js/product-details.js" type="module"></script>
</body>
</html>