Skip to content

Commit 4015523

Browse files
N0sBaN0sBa
committed
Update
1 parent 73b3047 commit 4015523

File tree

3 files changed

+190
-5
lines changed

3 files changed

+190
-5
lines changed

‎starter/06-Components/02-carousel.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,21 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Carousel Document</title>
88
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
10+
911
* {
1012
margin: 0;
1113
padding: 0;
1214
}
15+
body {
16+
font-family: 'Inter', sans-serif;
17+
color: #343a40;
18+
}
1319
.carousel {
1420
width: 800px;
1521
margin: 100px auto;
1622
background-color: #087f5b;
17-
padding-left: 80px;
23+
padding-left: 86px;
1824
border-radius: 8px;
1925

2026
display: flex;
@@ -25,8 +31,8 @@
2531
img {
2632
width: 80px;
2733
height: 80px;
28-
border-radius: 8px;
29-
transform: scale(2.35);
34+
border-radius: 4px;
35+
transform: scale(2.6);
3036
box-shadow: 0 0 12px 12px rgba(0,0,0,0.1);
3137
}
3238
.content {
@@ -56,7 +62,6 @@
5662

5763
position: absolute;
5864
cursor: pointer;
59-
6065
box-shadow: 0 0 12px 4px rgba(0,0,0,0.2);
6166
}
6267
.btn--left {
@@ -83,6 +88,7 @@
8388
border-radius: 50%;
8489
border: 2px solid #087f5b;
8590
cursor: pointer;
91+
background-color: white;
8692
}
8793
.dot--fill {
8894
background-color: #087f5b;
@@ -93,7 +99,7 @@
9399
<div class="carousel">
94100
<img src="maria.jpg" alt="Maria">
95101
<div class="content">
96-
<p class="content-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat beatae, facilis hic qui sapiente illum sit placeat incidunt? Quidem, fugiat?</p>
102+
<p class="content-detail">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt debitis vitae molestiae, velit aut facilis praesentium, quaerat earum a voluptate dolores quam sequi unde iure quia corrupti, repellendus eos animi! Accusantium voluptatum culpa tempore distinctio architecto odio minima qui provident.</p>
97103
<p class="content-author">Maria Deia Kiags</p>
98104
<p class="content-job">Content Manager of Momo</p>
99105
</div>

‎starter/06-Components/05-hero.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;500;700&display=swap" rel="stylesheet">
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
html {
20+
font-family: "Rubik", sans-serif;
21+
color: #444;
22+
}
23+
24+
.container {
25+
width: 1200px;
26+
margin: 0 auto;
27+
}
28+
29+
header {
30+
height: 100vh;
31+
position: relative;
32+
background-image:
33+
linear-gradient(rgba(0,0,0,0.6), rgba(46, 40, 40, 0.6)),
34+
url(hero.jpg);
35+
background-size: cover;
36+
color: #fff;
37+
38+
}
39+
40+
nav {
41+
font-size: 20px;
42+
font-weight: 700;
43+
display: flex;
44+
justify-content: space-between;
45+
padding-top: 32px;
46+
/* background-image: linear-gradient(to right, red, blue); */
47+
}
48+
49+
.header-container {
50+
width: 1200px;
51+
position: absolute;
52+
left: 50%;
53+
top: 50%;
54+
transform: translate(-50%, -50%);
55+
}
56+
57+
.header-container-inner {
58+
width: 50%;
59+
}
60+
61+
h1 {
62+
font-size: 52px;
63+
margin-bottom: 32px;
64+
line-height: 1.05;
65+
}
66+
67+
p {
68+
font-size: 20px;
69+
line-height: 1.6;
70+
margin-bottom: 48px;
71+
}
72+
73+
.btn:link,
74+
.btn:visited {
75+
font-size: 20px;
76+
font-weight: 600;
77+
color: #fff;
78+
text-decoration: none;
79+
display: inline-block;
80+
padding: 16px 32px;
81+
border-radius: 8px;
82+
}
83+
84+
h2 {
85+
font-size: 44px;
86+
margin-bottom: 48px;
87+
}
88+
89+
section {
90+
padding: 96px 0;
91+
background-color: #f7f7f7;
92+
}
93+
</style>
94+
</head>
95+
96+
<body>
97+
<header>
98+
<nav class="container">
99+
<div>LOGO</div>
100+
<div>NAVIGATION</div>
101+
</nav>
102+
<div class="header-container">
103+
<div class="header-container-inner">
104+
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
105+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ratione perspiciatis maxime magni
106+
expedita
107+
dicta exercitationem reprehenderit assumenda quam recusandae!</p>
108+
<a href="#" class="btn">Start eating well</a>
109+
</div>
110+
</div>
111+
</header>
112+
<section>
113+
<div class="container">
114+
<h2>Some random heading</h2>
115+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque exercitationem ratione numquam ab
116+
ducimus
117+
reprehenderit. Soluta accusamus minus quas iusto dignissimos quidem debitis, ipsum quod adipisci
118+
praesentium cum, vel hic quam molestias tempore ad excepturi error iste fuga harum, obcaecati
119+
molestiae.
120+
Earum dicta ab sint odio? Aspernatur earum placeat blanditiis. Lorem ipsum dolor, sit amet
121+
consectetur
122+
adipisicing elit. Suscipit vel laborum sunt. Eos maxime quidem dicta tempora odio tempore
123+
dignissimos?
124+
</p>
125+
</div>
126+
</section>
127+
</body>
128+
129+
</html>

‎starter/06-Components/06-app-layout.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<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+
<title>Document</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body {
15+
font-family: sans-serif;
16+
color: #333a40;
17+
font-size: 24px;
18+
height: 100vh;
19+
20+
display: grid;
21+
grid-template-columns: 80px 400px 1fr 250px;
22+
grid-template-rows: 80px 1fr;
23+
}
24+
nav {
25+
grid-column: 1;
26+
grid-row: 1 / -1;
27+
background-color: black;
28+
}
29+
menu {
30+
31+
}
32+
section {
33+
34+
}
35+
main {
36+
37+
}
38+
aside {
39+
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<nav>Nav</nav>
45+
<menu>Menu</menu>
46+
<section>Inbox</section>
47+
<main>Main</main>
48+
<aside>Aside</aside>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)