-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
197 lines (177 loc) · 7.2 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Sit Commigo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Nothing+You+Could+Do&family=Roboto:wght@500&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<header>
<div class="content-wrapper">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>Products</li>
</ul>
</nav>
<div class="logo content-wrapper">
<div>
<img src="img/logo.svg" alt="logo_chair">
</div>
<div>
<button class="pre-order1">Pre-order</button>
</div>
</div>
</div>
<div class="divider1"></div>
<div class="divider2"></div>
<div class="divider3"></div>
</header>
<main>
<section class="hero">
<div class="content-wrapper">
<h1>Be <span>CARING</span>.</h1>
<h2>Be <span>RESPONSIBLE</span>.</h2>
<p>Be <span>KIND</span> to humanity and the environment, one seat at a time.</p>
<div class="hero-image">
</div>
<div class="para1">
<p class="para"><span>Sit Conmigo’s</span> mission is to create chairs that are
trendy, stylish, and best of all, comfy! Every <span>Sit
Conmigo</span> chair is made with only sustainable,
fair-trade materials.</p>
<button class="read-more1">Read More!</button>
</div>
</div>
</section>
<div class="divider1"></div>
<div class="divider2"></div>
<div class="divider3"></div>
<div class="top-mission">
<figure>
<img src="img/chair_logo.svg" alt="chair">
</figure>
<p> More than a conversation piece, it’s a <em>humanitarian</em> piece!</p>
</div>
<div class="divider1"></div>
<div class="divider2"></div>
<div class="divider3"></div>
<section class="products">
<div class="chair1">
<img src="img/urbe_green.png" alt="Urbe Green">
<p>Some really fun copy about how interesting the chairs are will go here. Lorem ipsum dolor sit amet, saperet scriptorem suscipiantur ius ex, et dicta discere sed. Duo id apeirian appellantur. Altera volutpat ad per, in partem tacimates vulputate qui. His iudico aeterno ad.</p>
<h3>Urbe Green</h3>
<input type="button" value="Pre-order">
</div>
<div class="chair2">
<img src="img/campo.png" alt="Campo">
<h3>Campo</h3>
<p>Some really fun copy about how interesting the chairs are will go here. Lorem ipsum dolor sit amet, saperet scriptorem suscipiantur ius ex, et dicta discere sed. Duo id apeirian appellantur. Altera volutpat ad per, in partem tacimates vulputate qui. His iudico aeterno ad.</p>
<input type="button" value="Pre-order">
</div>
<div class="chair1">
<img src="img/urbe_red.png" alt="Urbe Red">
<p>Some really fun copy about how interesting the chairs are will go here. Lorem ipsum dolor sit amet, saperet scriptorem suscipiantur ius ex, et dicta discere sed. Duo id apeirian appellantur. Altera volutpat ad per, in partem tacimates vulputate qui. His iudico aeterno ad.</p>
<h3>Urbe Red</h3>
<input type="button" value="Pre-order">
</div>
<div class="chair2">
<img src="img/playa.png" alt="Playa">
<h3>Playa</h3>
<p>Some really fun copy about how interesting the chairs are will go here. Lorem ipsum dolor sit amet, saperet scriptorem suscipiantur ius ex, et dicta discere sed. Duo id apeirian appellantur. Altera volutpat ad per, in partem tacimates vulputate qui. His iudico aeterno ad.</p>
<input type="button" value="Pre-order">
</div>
</section>
<div class="bottom-mission">
<p>Be part of the Sit Conmigo movement! <span>Pre-order</span> your stylish, sustainably-built chair <span>today!</span></p>
</div>
<div class="preorder">
<input type="button" value="Pre-order">
</div>
<div class="ordernow">
<input type="button" value="Order Now!">
</div>
<div class="newchair">
<input type="button" value="Get Your New Chair!">
</div>
</main>
<footer>
<div class="about-sec">
<div class="aboutit">
<div class="image">
<img src="img/yolanda.png" alt="product designer">
<div class="desktopsign">‐‐ <em>Yolanda Lopez</em> ‐‐</div>
</div>
<div class="commit-hdr">
<h5>Being fair is the name of the game</h5>
</div>
<div class="commitment">
<p>Here at <span>Sit Conmigo</span> we are committed to promoting fair labor practices that ensure our employees have safe working conditions and are paid fairly for their skills. The result is a chair that you'll not only love in your home or office but a chair that was lovingly made by the person building it.</p>
<div class="signature">‐‐ <em>Yolanda Lopez</em> ‐‐</div>
</div>
</div> <!--end of aboutit class-->
<div class="readmore">
<input type="button" value="read more">
</div>
<div class="chat">
<img src="img/chat.svg" alt="chat box">
</div>
<div class="arrow">
<img src="img/up-arrow.svg" alt="up arrow">
</div>
<div class="divider1"></div>
<div class="divider2"></div>
<div class="divider3"></div>
</div> <!--end of about-sec class-->
<div class="footer">
<div class="footer-logo">
<img src="img/logo.svg" alt="logo">
</div>
<div class="nav2">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="newsletter">
<input class="email" type="text" value="Email" placeholder="email">
<p>Stay in touch with us for the latest products!</p>
</div>
<div class="social">
<p>
<a href="#" target="_blank"><img src="img/facebook.svg" alt="facebook icon"></a>
</p>
<p>
<a href="#" target="_blank"><img src="img/instagram.svg" alt="instagram icon"></a>
</p>
<p>
<a href="#" target="_blank"><img src="img/pinterest.svg" alt="pinterest icon"></a>
</p>
<p><a href="#" target="_blank"><img src="img/twitter.svg" alt="twitter icon"></a>
</p>
</div>
</div> <!--end of footer class-->
</footer>
</body>
</html>