-
Notifications
You must be signed in to change notification settings - Fork 2
/
main_light.html
147 lines (122 loc) · 5.7 KB
/
main_light.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
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main_light.css">
<title>FASHION SITE</title>
</head>
<body>
<div class="base light-mode">
<h1>mod<br>ern<br>voice</h1>
<header>
<div class="navbar">
<a href="#">home</a>
<a href="#">explore</a>
<a href="#">about us</a>
<a href="#">contact us</a>
</div>
<!-- <div class="handles">
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div> -->
<div class="logo"><h3>LOGO</h3></div>
</header>
<div class="site-face">
<div class="site-face-text">
<h1>modern<br>voice</h1>
<p>Let the fashion be your therapy.<br>Explore, express & understand yourself<br>through your fashion style.</p>
</div>
<img class="site-face-images" src="pngaaa.com-482112.png">
</div>
<div class="product-profile">
<!-- index number -->
<h1 id="idx">#1</h1>
<!-- text -->
<div class="product-profile-text">
<h1>passionate red &<br>classic gray</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus porta eros nec pellentesque. Curabitur ligula ante, tempus ac mauris lobortis, suscipit consequat ligula. Quisque sagittis libero pharetra nibh sagittis malesuada. Cras ornare justo ex, vitae fermentum lacus venenatis eget. Donec pulvinar mollis odio, eu hendrerit massa tincidunt varius. Sed interdum sapien eros, ut pulvinar tellus volutpat eget. Phasellus erat lectus, vehicula ac magna id, auctor dapibus mauris. Nam ac nibh pulvinar quam ullamcorper tristique. Aliquam venenatis mi ut est pharetra, eu volutpat nunc blandit.</p>
<br><br>
<button class="buy-btn">buy</button>
</div>
<!-- separator -->
<div class="vertical-bar"></div>
<!-- image -->
<img src="pexels-yogendra-singh-1760900.jpg">
<div class="img-frame"></div>
<!-- image element on the image -->
</div>
<div class="product-profile">
<!-- index number -->
<h1 id="idx">#2</h1>
<!-- text -->
<div class="product-profile-text">
<h1>futuristic fashion</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus porta eros nec pellentesque. Curabitur ligula ante, tempus ac mauris lobortis, suscipit consequat ligula. Quisque sagittis libero pharetra nibh sagittis malesuada. Cras ornare justo ex, vitae fermentum lacus venenatis eget. Donec pulvinar mollis odio, eu hendrerit massa tincidunt varius. Sed interdum sapien eros, ut pulvinar tellus volutpat eget. Phasellus erat lectus, vehicula ac magna id, auctor dapibus mauris. Nam ac nibh pulvinar quam ullamcorper tristique. Aliquam venenatis mi ut est pharetra, eu volutpat nunc blandit.</p>
<br><br>
<button class="buy-btn">buy</button>
</div>
<!-- separator -->
<div class="vertical-bar"></div>
<!-- image -->
<img src="pexels-jansel-ferma-2085118.jpg">
<div class="img-frame"></div>
<!-- image element on the image -->
</div>
<div class="product-profile">
<!-- index number -->
<h1 id="idx">#3</h1>
<!-- text -->
<div class="product-profile-text">
<h1>casual<br>but intriguing style</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus porta eros nec pellentesque. Curabitur ligula ante, tempus ac mauris lobortis, suscipit consequat ligula. Quisque sagittis libero pharetra nibh sagittis malesuada. Cras ornare justo ex, vitae fermentum lacus venenatis eget. Donec pulvinar mollis odio, eu hendrerit massa tincidunt varius. Sed interdum sapien eros, ut pulvinar tellus volutpat eget. Phasellus erat lectus, vehicula ac magna id, auctor dapibus mauris. Nam ac nibh pulvinar quam ullamcorper tristique. Aliquam venenatis mi ut est pharetra, eu volutpat nunc blandit.</p>
<br><br>
<button class="buy-btn">buy</button>
</div>
<!-- separator -->
<div class="vertical-bar"></div>
<!-- image -->
<img src="pexels-edgar-serrano-1964970.jpg">
<div class="img-frame"></div>
<!-- image element on the image -->
</div>
<div class="product-profile">
<!-- index number -->
<h1 id="idx">#4</h1>
<!-- text -->
<div class="product-profile-text">
<h1>sophisticated but<br>also mysterious</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus porta eros nec pellentesque. Curabitur ligula ante, tempus ac mauris lobortis, suscipit consequat ligula. Quisque sagittis libero pharetra nibh sagittis malesuada. Cras ornare justo ex, vitae fermentum lacus venenatis eget. Donec pulvinar mollis odio, eu hendrerit massa tincidunt varius. Sed interdum sapien eros, ut pulvinar tellus volutpat eget. Phasellus erat lectus, vehicula ac magna id, auctor dapibus mauris. Nam ac nibh pulvinar quam ullamcorper tristique. Aliquam venenatis mi ut est pharetra, eu volutpat nunc blandit.</p>
<br><br>
<button class="buy-btn">buy</button>
</div>
<!-- separator -->
<div class="vertical-bar"></div>
<!-- image -->
<img src="pexels-sachin-bharti-1631181.jpg">
<div class="img-frame"></div>
<!-- image element on the image -->
</div>
<footer>
<div class="footer-arrangement">
<div class="logo"><h3>LOGO</h3></div>
<p>modern voice</p>
</div>
<div class="footer-arrangement">
<a href="#">privacy policy</a>
<a href="#">disclaimer policy</a>
<a href="#">contact us</a>
<a href="#">about us</a>
</div>
<div class="footer-arrangement">
<a href="#">shopify</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">facebook</a>
</div>
</footer>
</div>
</body>
</html>