Skip to content

Commit b43863a

Browse files
le-huy-jhle-huy-jh
committedMar 18, 2022
update
1 parent 5d47c1b commit b43863a

File tree

3 files changed

+104
-22
lines changed

3 files changed

+104
-22
lines changed
 

‎Exercise 7/index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -313,11 +313,14 @@
313313
const success = (pos) => {
314314
position["latitude"] = pos.coords.latitude;
315315
position["longitude"] = pos.coords.longitude;
316+
console.log(position)
316317
renderMap();
317318
};
318319

319320
const error = () => {
320-
alert("ERROR");
321+
position["latitude"] = 10.862592;
322+
position["longitude"] = 106.758144;
323+
renderMap();
321324
};
322325

323326
const getLocation = () => {

‎Exercise 8/index.html

+26-17
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="style.css">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
88
<title>Document</title>
9-
</head>
10-
<body>
9+
</head>
10+
<body>
1111
<nav>
12-
<div class="hamburger-menu">
13-
<div></div>
14-
</div>
12+
<div class="hamburger-menu">
13+
<div></div>
14+
</div>
1515
</nav>
1616
<section class="hero">
17-
<div class="left">
18-
<img src="./assets/images/down-arrow1.png" alt="">
19-
<div class="text">PAIN TTHE POWER</div>
20-
<div class="text">BLAZ ROBAR</div>
17+
<div class="left">
18+
<img src="./assets/images/down-arrow1.png" alt="" />
19+
<div class="text">PAIN TTHE POWER</div>
20+
<div class="text">BLAZ ROBAR</div>
21+
</div>
22+
<div class="right">
23+
<div class="hero-box">
24+
<h1>PAINT YOUR PIXTURE</h1>
25+
<h4>Humble Beginings</h4>
26+
<div>
27+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
28+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
29+
</div>
2130
</div>
22-
<div class="right">right</div>
31+
</div>
2332
</section>
24-
</body>
25-
</html>
33+
</body>
34+
</html>

‎Exercise 8/style.css

+74-4
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ body {
7474
font-size: 12px;
7575
font-weight: 400;
7676
line-height: 40;
77-
margin-left: 30px;
77+
margin-left: 70px;
7878
}
7979

8080
.hero .left .text:last-child {
@@ -91,6 +91,7 @@ body {
9191

9292
.hero .right {
9393
position: relative;
94+
width: calc(100vw - 60px);
9495
left: 60px;
9596
top: -60px;
9697
background-image: url("./assets/images/bg.png");
@@ -103,6 +104,34 @@ body {
103104
assuming the content is written in black */
104105
filter: drop-shadow(0 0 8px black); /* FF~35 */
105106
filter: drop-shadow(0 0 0 8px black);
107+
display: flex;
108+
align-items: center;
109+
justify-content: center;
110+
}
111+
112+
.hero .right .hero-box {
113+
color: #ffffff;
114+
width: 90%;
115+
}
116+
117+
.hero .right .hero-box h1 {
118+
font-weight: 700;
119+
font-size: 40px;
120+
line-height: 50px;
121+
}
122+
123+
.hero .right .hero-box h4 {
124+
margin-top: 15px;
125+
font-weight: 700;
126+
font-size: 24px;
127+
line-height: 25px;
128+
}
129+
130+
.hero .right .hero-box div {
131+
margin-top: 5px;
132+
font-weight: 400;
133+
font-size: 13px;
134+
line-height: 25px;
106135
}
107136

108137
@media (min-width: 768px) {
@@ -117,9 +146,50 @@ body {
117146
}
118147

119148
.hero .left {
120-
top: -60px;
121-
left: calc(-60vh + 60px);
122-
width: 60vh;
149+
top: -80px;
150+
left: calc(-100vh + 80px);
151+
width: 100vh;
123152
height: 80px;
124153
}
154+
155+
.hero .right {
156+
top: calc(-145px - 60px);
157+
z-index: -1;
158+
height: calc(100vh + 145px + 60px);
159+
}
160+
161+
.hero .right .hero-box {
162+
color: #ffffff;
163+
width: 80%;
164+
}
165+
166+
.hero .right .hero-box h1 {
167+
font-size: 132px;
168+
line-height: 102px;
169+
}
170+
171+
.hero .right .hero-box h4 {
172+
margin-top: 30px;
173+
}
174+
175+
.hero .right .hero-box div {
176+
margin-top: 15px;
177+
}
125178
}
179+
180+
@media (min-width: 1024px) {
181+
.hamburger-menu {
182+
padding: 45px 27px;
183+
}
184+
185+
.hamburger-menu div,
186+
.hamburger-menu div::before,
187+
.hamburger-menu div::after {
188+
width: 26px;
189+
}
190+
191+
.hero .right .hero-box {
192+
color: #ffffff;
193+
width: 80%;
194+
}
195+
}

0 commit comments

Comments
 (0)
Please sign in to comment.