-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (123 loc) · 4.8 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- -->
<meta
property="og:title"
content="Base Apparel coming soon | Frontend Mentor | Alamin"
/>
<meta
name="description"
content="Sharpen your skills in JavaScript, CSS, and HTML form validation with the Base Apparel coming soon page project from Frontend Mentor. Build a sleek and functional landing page for a fictitious fashion brand and showcase your front-end development prowess."
/>
<meta
property="og:description"
content="Sharpen your skills in JavaScript, CSS, and HTML form validation with the Base Apparel coming soon page project from Frontend Mentor. Build a sleek and functional landing page for a fictitious fashion brand and showcase your front-end development prowess."
/>
<meta property="og:image" content="https://raw.githubusercontent.com/CodeWithAlamin/Base-Apparel/main/screenshots/Compared%20-%20Base%20Apparel%20coming%20soon%20-%20dark%20mode.png" />
<meta
property="og:url"
content="https://base-apparel-alamin.netlify.app/"
/>
<meta name="author" content="Alamin | codpapa360" />
<meta
name="keywords"
content="Base Apparel coming soon, FrontendMentor, Responsive web design, HTML, CSS, JavaScript, Sass, Front-end development, User experience, Accessibility"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Base Apparel coming soon | Frontend Mentor | Alamin"
/>
<meta
name="twitter:site"
content="@https://base-apparel-alamin.netlify.app/"
/>
<meta
name="twitter:description"
content="Sharpen your skills in JavaScript, CSS, and HTML form validation with the Base Apparel coming soon page project from Frontend Mentor. Build a sleek and functional landing page for a fictitious fashion brand and showcase your front-end development prowess."
/>
<meta name="twitter:image" content="https://raw.githubusercontent.com/CodeWithAlamin/Base-Apparel/main/screenshots/Compared%20-%20Base%20Apparel%20coming%20soon%20-%20dark%20mode.png" />
<meta
name="twitter:image:alt"
content="Base Apparel coming soon | Frontend Mentor | Alamin"
/>
<!-- -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./sass/main.scss" />
<script defer src="./script.js"></script>
<title>Base Apparel coming soon | Frontend Mentor | Alamin</title>
</head>
<body>
<div class="top-container">
<main class="main-contents">
<div class="top-section">
<div class="logo">
<img src="./images/logo.svg" alt="Base Apparel logo" />
</div>
<div>
<input type="checkbox" class="dark-mode-checkbox" id="dark-mode-checkbox">
<label for="dark-mode-checkbox" class="dark-mode-lebel">
<img class="icon-dark" src="./images/icon-dark.svg" alt="Dark icon">
<img class="icon-light" src="./images/icon-light.svg" alt="Light icon">
<div class='dark-mode-middle-circle'>
</label>
</div>
</div>
<div class="hero-image">
<img src="./images/hero-mobile.jpg" alt="Hero image" />
</div>
<div class="contents">
<h1 class="contents__header"><span>We're</span><br />coming soon</h1>
<p class="contents__description">
Hello fellow shoppers! We're currently building our new fashion
store. Add your email below to stay up-to-date with announcements
and our launch deals.
</p>
<form class="form" action="">
<input
class="input-email"
type="email"
placeholder="Email Address"
/>
<button class="btn-submit" type="submit"><img src="./images/icon-arrow.svg" alt="Arror icon"></button>
<img
class="error-icon"
src="./images/icon-error.svg"
alt="Error icon"
/>
<p class="error-output"></p>
</form>
</div>
</main>
</div>
<footer>
<div class="attribution-wrapper">
<p class="attribution">
Coded by
<a
class="attb-link"
href="https://twitter.com/CodeWithAlamin"
target="_blank"
>Alamin</a
>
<br />
Challenge by
<a
class="attb-link attb-fem"
href="https://www.frontendmentor.io/profile/CodeWithAlamin"
target="_blank"
>Frontend Mentor</a
>
</p>
</div>
</footer>
</body>
</html>