HTML-COURSE/Final HTML Project.html at main · shivanigireesh/HTML-COURSE · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index,follow">
    <meta name="description" content="This website is all about Shiathas Skincare in English language">
    <meta name="author" content="Shiathas Skincare">
    <title>SHIATHAS Skincare</title>
</head>
<style>
    img {
        border-width: 10px;
        border-radius: 5%;
    }
</style>
<body>
    <header>
        <div class="logo">
            <a href="#" target="_blank">
                <img src="\images\shiathaslogo.png" alt="Shiathas logo" width="300px" height="160px">
            </a>
        </div>
        <nav>
            <ul style="list-style: none; display: flex; gap: 10px;">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="hero-content">
        <h1>SHIATHAS - Embrace your natural glow..</h1>
        <pre>
Welcome to SHIATHAS, where skincare meets science and self-care. We are dedicated to crafting high-performance,
clean, and skin-loving products that nourish, protect, and enhance your natural beauty. Our formulas are backed
by dermatologists and powered by nature, ensuring safe & effective skincare for all skin types.

Join us on a journey to radiant, healthy skin..
        </pre>
        <button>Explore our products</button>
        <button>Visit our app</button>
    </div>

    <div class="hero-image">
        <div style="display: flex; gap: 25px; justify-content: left;">
            <figure>
                <img src="\images\creams.jpg" width="200px" height="200px" alt="Creams">
                <img src="\images\serumsblue.jpg" width="200px" height="200px" alt="Serums">
            </figure>
        </div>
    </div>

    <section class="about-section">
        <h2>About our products</h2>
        <div class="about-content">
            <p>It's great to meet you! I'm SHIATHAS Skincare.</p>
            <p>
                Hey, this is the SHIATHAS website. You can find the skincare products for you from our website.
                We also have an app, and the link to that app is given above. Please use our app to find
                more products.
            </p>
            <p><strong>Our Top Selling Products</strong></p>

            <div class="about-progress">
                <label for="serums">SERUMS</label>
                <progress id="serums" max="100" value="100">100%</progress>
            </div>

            <div class="about-progress">
                <label for="moisturizer">MOISTURIZER</label>
                <progress id="moisturizer" max="100" value="100">100%</progress>
            </div>

            <div class="about-progress">
                <label for="toner">TONER</label>
                <progress id="toner" max="80" value="80">80%</progress>
            </div>

            <div class="about-progress">
                <label for="facewash">FACEWASH</label>
                <progress id="facewash" max="80" value="80">80%</progress>
            </div>
        </div>
    </section>

    <section class="services-section">
        <h2>Our Products</h2>
        <div class="service-gallery">
            <div style="display: flex; gap: 25px; justify-content: left;">
                <figure>
                    <img src="\images\serums.jpg" alt="Serum" width="150">
                    <figcaption>Serum</figcaption>
                </figure>

                <figure>
                    <img src="\images\milkcreams.jpg" alt="Bath Essentials" width="150">
                    <figcaption>Bath Essentials</figcaption>
                </figure>

                <figure>
                    <img src="\images\Bathcream.jpg" alt="Face Wash" width="150">
                    <figcaption>Face Wash</figcaption>
                </figure>

                <figure>
                    <img src="\images\facemassage.jpg" alt="Face Massage Kit" width="150">
                    <figcaption>Face Massage Kit</figcaption>
                </figure>
            </div>
        </div>
    </section>

    <section class="contact-section">
        <h2>Feel free to contact us</h2>
        <form>
            <div>
                <label for="username">Username</label>
                <input type="text" id="username">
            </div>

            <br>

            <div>
                <label for="email">Email</label>
                <input type="email" id="email">
            </div>

            <br>

            <div>
                <label for="textarea">Message</label>
                <textarea id="textarea" cols="30" rows="10"></textarea>
            </div>

            <br>

            <input type="submit" value="Submit">
        </form>
    </section>

    <footer>
        <p>
            Copyright &copy; 2023 All rights reserved | This template is made with &hearts; by Shiathas members
        </p>
    </footer>
</body>
</html>