Skip to content

Commit 043f9d0

Browse files
codingstellacodingstella
authored
Add files via upload
0 parents  commit 043f9d0

15 files changed

+409
-0
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<html>
2+
<head> </head> <body> <h1 align = center> Display</h1> <img src = "img/Display.png"> </body>
3+
</html>

‎css/styles.css

+347
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
*{
2+
margin: 0px;
3+
padding: 0px;
4+
}
5+
6+
body{
7+
overflow-x: hidden;
8+
}
9+
10+
header{
11+
display: flex;
12+
align-items: center;
13+
justify-content: space-between;
14+
width: 90%;
15+
margin: 10px auto;
16+
}
17+
18+
header .left-side a img{
19+
width: 80px;
20+
}
21+
22+
header .right-side{
23+
display: flex;
24+
}
25+
26+
header .right-side .nav-link-wrapper a{
27+
padding: 10px;
28+
margin: 10px;
29+
text-decoration: none;
30+
color: black;
31+
}
32+
33+
.container{
34+
max-width: 80%;
35+
margin: 50px auto;
36+
}
37+
38+
.container .left-side{
39+
text-align: center;
40+
}
41+
42+
.container .left-side h1{
43+
font-size: 60px;
44+
letter-spacing: 2px;
45+
}
46+
47+
.container .left-side h1 .green{
48+
color: green;
49+
font-family: 'Viga', serif;
50+
}
51+
52+
.container .left-side p{
53+
font-size: 20px;
54+
letter-spacing: 0.5px;
55+
}
56+
57+
.container .left-side a{
58+
display: inline-block;
59+
background: green;
60+
padding: 12px 18px 12px 18px;
61+
text-decoration: none;
62+
border-radius: 25px;
63+
color: white;
64+
margin-top: 15px;
65+
font-size: 17px;
66+
font-weight: bold;
67+
}
68+
69+
.container .right-side{
70+
text-align: center;
71+
margin-top: 60px;
72+
}
73+
74+
.container .right-side img{
75+
max-width: 50%;
76+
}
77+
78+
.container .right-side .box{
79+
position: absolute;
80+
display: grid;
81+
right: 0%;
82+
bottom: 0%;
83+
}
84+
85+
.container .right-side .box img{
86+
width: 25px;
87+
margin: 10px;
88+
}
89+
90+
.container .right-side .box img.facebook{
91+
width: 18.5px;
92+
}
93+
94+
.thumb{
95+
display: flex;
96+
margin-top: -60px;
97+
justify-content: center;
98+
}
99+
100+
.thumb a:hover{
101+
margin-top: -15px;
102+
transition: 0.2s;
103+
}
104+
105+
.thumb img{
106+
width: 54px;
107+
margin: 20px;
108+
}
109+
110+
@media (min-width: 1140px){
111+
*{
112+
margin: 0px;
113+
padding: 0px;
114+
}
115+
116+
body{
117+
overflow-x: hidden;
118+
}
119+
120+
header{
121+
display: flex;
122+
align-items: center;
123+
justify-content: space-between;
124+
width: 90%;
125+
margin: 10px auto;
126+
}
127+
128+
header .left-side a img{
129+
width: 80px;
130+
}
131+
132+
header .right-side{
133+
display: flex;
134+
}
135+
136+
header .right-side .nav-link-wrapper a{
137+
padding: 10px;
138+
margin: 10px;
139+
text-decoration: none;
140+
color: black;
141+
}
142+
143+
.container{
144+
max-width: 90%;
145+
margin: 50px auto;
146+
display: flex;
147+
}
148+
149+
.container .left-side{
150+
text-align: left;
151+
flex: 1;
152+
}
153+
154+
.container .left-side h1{
155+
font-size: 60px;
156+
letter-spacing: 2px;
157+
}
158+
159+
.container .left-side h1 .green{
160+
color: green;
161+
font-family: 'Viga', serif;
162+
}
163+
164+
.container .left-side p{
165+
font-size: 20px;
166+
letter-spacing: 0.5px;
167+
}
168+
169+
.container .left-side a{
170+
display: inline-block;
171+
background: green;
172+
padding: 12px 18px 12px 18px;
173+
text-decoration: none;
174+
border-radius: 25px;
175+
color: white;
176+
margin-top: 15px;
177+
font-size: 17px;
178+
font-weight: bold;
179+
}
180+
181+
.container .right-side{
182+
flex: 1;
183+
text-align: center;
184+
}
185+
186+
.container .right-side img{
187+
width: 330px;
188+
margin-left: 150px;
189+
margin-top: -30px;
190+
}
191+
192+
.container .right-side .box{
193+
display: grid;
194+
position: absolute;
195+
bottom: 40%;
196+
right: 1%;
197+
}
198+
199+
.container .right-side .box img{
200+
width: 25px;
201+
margin: 10px;
202+
}
203+
204+
.container .right-side .box img.facebook{
205+
width: 18.5px;
206+
}
207+
208+
.thumb{
209+
position: absolute;
210+
bottom: 0%;
211+
left: 40%;
212+
}
213+
214+
.thumb a:hover{
215+
margin-top: -15px;
216+
transition: 0.2s;
217+
}
218+
219+
.thumb img{
220+
width: 54px;
221+
margin: 20px;
222+
}
223+
}
224+
225+
@media only screen and (max-width: 650px){
226+
header{
227+
display: block;
228+
}
229+
230+
header .left-side a img{
231+
width: 80px;
232+
margin: auto;
233+
display: block;
234+
}
235+
236+
header .right-side{
237+
display: flex;
238+
justify-content: center;
239+
margin-top: 35px;
240+
}
241+
242+
header .right-side .nav-link-wrapper a{
243+
padding: 10px;
244+
margin: 10px;
245+
text-decoration: none;
246+
color: black;
247+
}
248+
.container{
249+
max-width: 80%;
250+
margin: 50px auto;
251+
}
252+
253+
.container .left-side{
254+
text-align: center;
255+
}
256+
257+
.container .left-side h1{
258+
font-size: 50px;
259+
letter-spacing: 2px;
260+
}
261+
262+
.container .left-side h1 .green{
263+
color: green;
264+
font-family: 'Viga', serif;
265+
}
266+
267+
.container .left-side p{
268+
font-size: 18px;
269+
letter-spacing: 0.5px;
270+
}
271+
272+
.container .left-side a{
273+
display: inline-block;
274+
background: green;
275+
padding: 12px 18px 12px 18px;
276+
text-decoration: none;
277+
border-radius: 25px;
278+
color: white;
279+
margin-top: 15px;
280+
font-size: 16.2px;
281+
font-weight: bold;
282+
}
283+
}
284+
285+
@media only screen and (max-width: 404px){
286+
header{
287+
display: block;
288+
}
289+
290+
header .left-side a img{
291+
width: 80px;
292+
margin: auto;
293+
display: block;
294+
}
295+
296+
header .right-side{
297+
display: flex;
298+
justify-content: center;
299+
margin-top: 35px;
300+
}
301+
302+
header .right-side .nav-link-wrapper a{
303+
padding: 5px;
304+
margin: 5px;
305+
text-decoration: none;
306+
color: black;
307+
}
308+
.container .right-side img{
309+
width: 330px;
310+
margin-top: -30px;
311+
}
312+
.container .right-side img{
313+
max-width: 50%;
314+
}
315+
316+
.container .right-side .box{
317+
display: none;
318+
position: absolute;
319+
bottom: 250px;
320+
right: 25px;
321+
}
322+
323+
.container .right-side .box img{
324+
width: 25px;
325+
margin: 10px;
326+
}
327+
328+
.container .right-side .box img.facebook{
329+
width: 18.5px;
330+
}
331+
332+
.thumb{
333+
display: flex;
334+
margin-top: -30px;
335+
justify-content: center;
336+
}
337+
338+
.thumb a:hover{
339+
margin-top: -15px;
340+
transition: 0.2s;
341+
}
342+
343+
.thumb img{
344+
width: 45px;
345+
margin: 20px;
346+
}
347+
}

‎img/Display.png

289 KB
Loading

‎img/facebook.png

534 Bytes
Loading

‎img/img1.png

345 KB
Loading

‎img/img2.png

796 KB
Loading

‎img/img3.png

261 KB
Loading

‎img/instagram.png

1.22 KB
Loading

‎img/logo.png

16.3 KB
Loading

‎img/thumb1.png

28.8 KB
Loading

‎img/thumb2.png

28.3 KB
Loading

‎img/thumb3.png

23.9 KB
Loading

‎img/twitter.png

757 Bytes
Loading

0 commit comments

Comments
 (0)