Skip to content

Commit 438d92d

Browse files
omardeleoomardeleo
committed
Codecorgi Challenge code-corgi#1 
1 parent 1c6047b commit 438d92d

File tree

2 files changed

+303
-0
lines changed

2 files changed

+303
-0
lines changed

‎css/style.css‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-width: 412px;
9+
width: 100%;
10+
font-family: 'Roboto', sans-serif;
11+
}
12+
13+
.container {
14+
max-width: 1000px;
15+
width: 100%;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
}
20+
21+
.title {
22+
font-weight: normal;
23+
width: 100%;
24+
}
25+
26+
.thumb {
27+
cursor: pointer;
28+
}
29+
30+
bottom {
31+
width: 100%;
32+
display: flex;
33+
}
34+
35+
middle .card .thumb{
36+
width: 100%;
37+
height: 110px;
38+
}
39+
40+
bottom .card .thumb{
41+
width: 100%;
42+
height: 140px;
43+
}
44+
45+
.one {
46+
background: steelblue;
47+
}
48+
49+
.two {
50+
background: darkslateblue;
51+
}
52+
53+
.three {
54+
background: darkorchid;
55+
}
56+
57+
.four {
58+
background: coral;
59+
}
60+
61+
.five {
62+
background: firebrick;
63+
}
64+
65+
.six {
66+
background: gold;
67+
}
68+
69+
.seven {
70+
background: seagreen;
71+
}
72+
73+
@media all and (max-width:719px) {
74+
body {
75+
padding: 0 20px;
76+
}
77+
78+
.title {
79+
margin-top: 40px;
80+
}
81+
82+
.large-thumb {
83+
height: 175px;
84+
background: steelblue;
85+
margin: 25px 0;
86+
}
87+
88+
.text {
89+
margin-bottom: 30px;
90+
line-height: 1.5;
91+
}
92+
93+
middle {
94+
width: 100%;
95+
display: flex;
96+
flex-wrap: wrap;
97+
}
98+
99+
middle .card {
100+
width: 50%;
101+
}
102+
103+
middle .card .thumb{
104+
width: 100%;
105+
height: 110px;
106+
}
107+
108+
bottom .card .thumb{
109+
width: 100%;
110+
height: 140px;
111+
}
112+
113+
middle .card {
114+
padding-right: 8px;
115+
}
116+
117+
middle .card:nth-of-type(2n) {
118+
padding-right: 0px;
119+
padding-left: 8px;
120+
}
121+
122+
bottom {
123+
display: flex;
124+
flex-direction: column;
125+
}
126+
127+
bottom .card {
128+
width: 100%;
129+
}
130+
131+
.bars-container {
132+
display: flex;
133+
width: 100%;
134+
}
135+
136+
.bar {
137+
height: 40px;
138+
background: lightgray;
139+
margin: 15px 0;
140+
}
141+
142+
bottom .bar {
143+
width: 50%;
144+
}
145+
146+
}
147+
148+
@media all and (min-width:720px) {
149+
body {
150+
display: flex;
151+
flex-direction: column;
152+
align-items: center;
153+
padding: 0 16px;
154+
}
155+
156+
.title {
157+
margin: 60px 0 55px 0;
158+
}
159+
160+
.main {
161+
width: 100%;
162+
max-width: 800px;
163+
display: flex;
164+
flex-direction: column;
165+
justify-content: center;
166+
}
167+
168+
header {
169+
display: flex;
170+
flex-direction: row;
171+
justify-content: space-between;
172+
width: 100%;
173+
}
174+
175+
.large-thumb {
176+
background: steelblue;
177+
width: 100%;
178+
max-width: 580px;
179+
height: 200px;
180+
margin-right: 4px;
181+
}
182+
183+
.text {
184+
width: 200px;
185+
}
186+
187+
middle, bottom {
188+
display: flex;
189+
justify-content: space-between;
190+
}
191+
192+
middle {
193+
margin-top: 40px;
194+
}
195+
196+
middle .card {
197+
width: 100%;
198+
max-width: 180px;
199+
padding: 2px;
200+
}
201+
202+
middle .card:first-of-type {
203+
padding-left: 0;
204+
}
205+
206+
middle .card:last-of-type {
207+
padding-right: 0;
208+
}
209+
210+
.bar {
211+
height: 40px;
212+
background: lightgray;
213+
margin-top: 35px;
214+
}
215+
216+
bottom {
217+
margin-top: 70px;
218+
}
219+
220+
bottom .card {
221+
width: 100%;
222+
max-width: 220px;
223+
}
224+
225+
bottom .card {
226+
width: 100%;
227+
}
228+
229+
}
230+

‎index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<html>
2+
<head>
3+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
4+
<link rel="stylesheet" href="./css/style.css">
5+
</head>
6+
<body>
7+
<div class="container">
8+
<h1 class="title">AINULINDALE</h1>
9+
<div class="main">
10+
<header>
11+
<div class="large-thumb"></div>
12+
<div class="text">
13+
There was Eru, the One, who in Arda is called Ilúvatar; and he made first the Ainur, the Holy Ones, that were the
14+
offspring of his thought, and they were with him before aught else was made.
15+
</div>
16+
</header>
17+
<middle>
18+
<div class="card">
19+
<div class="thumb one"></div>
20+
<div class="bar"></div>
21+
</div>
22+
<div class="card">
23+
<div class="thumb two"></div>
24+
<div class="bar"></div>
25+
</div>
26+
<div class="card">
27+
<div class="thumb three"></div>
28+
<div class="bar"></div>
29+
</div>
30+
<div class="card">
31+
<div class="thumb four"></div>
32+
<div class="bar"></div>
33+
</div>
34+
</middle>
35+
<bottom>
36+
<div class="card">
37+
<div class="thumb five"></div>
38+
<div class="bars-container">
39+
<div class="bar"></div>
40+
<div class="bar"></div>
41+
</div>
42+
</div>
43+
<div class="card">
44+
<div class="thumb six"></div>
45+
<div class="bars-container">
46+
<div class="bar"></div>
47+
<div class="bar"></div>
48+
</div>
49+
</div>
50+
<div class="card">
51+
<div class="thumb seven"></div>
52+
<div class="bars-container">
53+
<div class="bar"></div>
54+
<div class="bar"></div>
55+
</div>
56+
</div>
57+
</bottom>
58+
</div>
59+
</div>
60+
<script>
61+
const largeThumb = document.querySelector('.large-thumb');
62+
const thumbs = document.querySelectorAll('.thumb');
63+
64+
thumbs.forEach(thumb => {
65+
thumb.addEventListener('click', (evt) =>{
66+
const element = evt.target;
67+
const bgColor = window.getComputedStyle(element, null).getPropertyValue('background-color');
68+
largeThumb.style.backgroundColor = bgColor;
69+
})
70+
})
71+
</script>
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)