Skip to content

Commit 6015c8c

Browse files
DimuthuWeerathungaDimuthuWeerathunga
committed
omnifood beginning
1 parent f986f42 commit 6015c8c

File tree

8 files changed

+723
-2
lines changed

8 files changed

+723
-2
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
/* align-items: center; */
4141
width: 800px;
4242
margin: 100px auto;
43-
padding: 32px;
44-
padding-left: 86px;
43+
padding: 32px 48px 32px 48px;
44+
/* padding-left: 86px; */
4545
border-radius: 8px;
4646
display: flex;
4747
gap: 86px;

‎Dimuthu/06-Components/03-table.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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>Accordion Component</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<style>
13+
/*
14+
SPACING SYSTEM (px)
15+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
16+
17+
FONT SIZE SYSTEM (px)
18+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
19+
*/
20+
21+
/* main color: #087f5b
22+
Gray color: #343a40
23+
*/
24+
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
/* ------------------------ */
32+
/* GENERAL STYLES */
33+
/* ------------------------ */
34+
body {
35+
font-family: 'Inter', sans-serif;
36+
color: #343a40;
37+
display: flex;
38+
justify-content: center;
39+
}
40+
table{
41+
width: 800px;
42+
margin-top: 100px;
43+
/* border: 1px solid #343a40; */
44+
border-collapse: collapse;
45+
font-size: 18px;
46+
}
47+
th, td{
48+
/* border: 1px solid #343a40; */
49+
padding: 16px 24px;
50+
text-align: left;
51+
}
52+
thead th{
53+
background-color: #087f5b;
54+
color: #fff;
55+
width: 25%;
56+
}
57+
tbody tr:nth-child(odd){
58+
background-color: #f9f9fa;
59+
}
60+
tbody tr:nth-child(even){
61+
background-color: #e9ecef;
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<table>
67+
<thead>
68+
<tr>
69+
<th>Chair</td>
70+
<th>The Laid Back</td>
71+
<th>The Worker Bee</td>
72+
<th>The Chair 4/2</td>
73+
</tr>
74+
</thead>
75+
<tbody>
76+
<tr>
77+
<th>Width</td>
78+
<td>80cm</td>
79+
<td>60cm</td>
80+
<td>220cm</td>
81+
</tr>
82+
<tr>
83+
<th>Height</td>
84+
<td>100cm</td>
85+
<td>110cm</td>
86+
<td>90cm</td>
87+
</tr>
88+
<tr>
89+
<th>Depth</td>
90+
<td>70cm</td>
91+
<td>65cm</td>
92+
<td>80cm</td>
93+
</tr>
94+
<tr>
95+
<th>Weight</td>
96+
<td>16kg</td>
97+
<td>22kg</td>
98+
<td>80kg</td>
99+
</tr>
100+
</tbody>
101+
</table>
102+
</body>
103+
</html>

‎Dimuthu/06-Components/04-pagination.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
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>Accordion Component</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<style>
13+
/*
14+
SPACING SYSTEM (px)
15+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
16+
17+
FONT SIZE SYSTEM (px)
18+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
19+
*/
20+
21+
/* main color: #087f5b
22+
Gray color: #343a40
23+
*/
24+
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
/* ------------------------ */
32+
/* GENERAL STYLES */
33+
/* ------------------------ */
34+
body {
35+
font-family: 'Inter', sans-serif;
36+
color: #343a40;
37+
display: flex;
38+
justify-content: center;
39+
}
40+
.pagination {
41+
margin-top: 100px;
42+
display: flex;
43+
align-items: center;
44+
gap: 8px;
45+
}
46+
.btn {
47+
border: 1px solid #087f5b;
48+
width: 48px;
49+
height: 48px;
50+
border-radius: 50%;
51+
background: none;
52+
cursor: pointer;
53+
}
54+
.btn:hover {
55+
background-color: #087f5b;
56+
}
57+
58+
.btn:hover .btn-icon {
59+
stroke: #fff;
60+
}
61+
.btn-icon {
62+
width: 24px;
63+
height: 24px;
64+
}
65+
66+
.page-link:link,
67+
.page-link:visited {
68+
font-size: 18px;
69+
color: #343a40;
70+
text-decoration: none;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
width: 36px;
75+
height: 36px;
76+
border-radius: 50%;
77+
}
78+
.page-link:hover,
79+
.page-link:active {
80+
background-color: #087f5b;
81+
color: #fff;
82+
}
83+
.page-link.page-link--current {
84+
background-color: #087f5b;
85+
color: #fff;
86+
}
87+
.dots {
88+
color: #868e96;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<div class="pagination">
94+
<button class="btn">
95+
<svg
96+
xmlns="http://www.w3.org/2000/svg"
97+
class="btn-icon"
98+
fill="none"
99+
viewBox="0 0 24 24"
100+
stroke="currentColor"
101+
>
102+
<path
103+
stroke-linecap="round"
104+
stroke-linejoin="round"
105+
stroke-width="2"
106+
d="M15 19l-7-7 7-7"
107+
/>
108+
</svg>
109+
</button>
110+
<a href="#" class="page-link">1</a>
111+
<a href="#" class="page-linkt">2</a>
112+
<a href="#" class="page-link page-link--current">3</a>
113+
<a href="#" class="page-link">4</a>
114+
<a href="#" class="page-link">5</a>
115+
<a href="#" class="page-link">6</a>
116+
<span class="dots">...</span>
117+
<a href="#" class="page-link">23</a>
118+
<button class="btn">
119+
<svg
120+
xmlns="http://www.w3.org/2000/svg"
121+
class="btn-icon"
122+
fill="none"
123+
viewBox="0 0 24 24"
124+
stroke="currentColor"
125+
>
126+
<path
127+
stroke-linecap="round"
128+
stroke-linejoin="round"
129+
stroke-width="2"
130+
d="M9 5l7 7-7 7"
131+
/>
132+
</svg>
133+
</button>
134+
</div>
135+
</body>
136+
</html>

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

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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>Omnifood Hero Section</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<style>
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
html {
21+
font-family: 'Rubik', sans-serif;
22+
color: #444;
23+
}
24+
.container {
25+
margin: 0 auto;
26+
width: 1200px;
27+
}
28+
header {
29+
/* background-color: orangered; */
30+
height: 100vh;
31+
position: relative;
32+
background-image: url(hero.jpg);
33+
background-size: cover;
34+
color: #fff;
35+
background-image: linear-gradient(
36+
rgba(34, 34, 34, 0.6),
37+
rgba(34, 34, 34, 0.6)
38+
),
39+
url(hero.jpg);
40+
}
41+
nav {
42+
font-size: 20px;
43+
font-weight: 700;
44+
display: flex;
45+
justify-content: space-between;
46+
padding-top: 32px;
47+
/* background-color: green; */
48+
/* background-image: linear-gradient(to right, red, blue); */
49+
}
50+
.header-container {
51+
width: 1200px;
52+
position: absolute;
53+
/* in relation to parent size */
54+
top: 50%;
55+
left: 50%;
56+
/* in relation to element size */
57+
transform: translate(-50%, -50%);
58+
}
59+
.header-container-inner {
60+
width: 50%;
61+
}
62+
h1 {
63+
font-size: 52px;
64+
margin-bottom: 32px;
65+
}
66+
p {
67+
font-size: 20px;
68+
line-height: 1.6;
69+
margin-bottom: 48px;
70+
}
71+
.btn:link,
72+
.btn:visited {
73+
font-size: 20px;
74+
font-weight: 600;
75+
background-color: #e67e22;
76+
color: #fff;
77+
text-decoration: none;
78+
display: inline-block;
79+
padding: 16px 32px;
80+
border-radius: 9px;
81+
}
82+
h2 {
83+
font-size: 44px;
84+
margin-bottom: 48px;
85+
}
86+
section {
87+
padding: 96px 0;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<header>
93+
<nav class="container">
94+
<div>LOGO</div>
95+
<div>NAVIGATION</div>
96+
</nav>
97+
<div class="header-container">
98+
<div class="header-container-inner">
99+
<h1>A healthy meal delivered to your door, every single day!</h1>
100+
<p>
101+
The smart 365-days-per-year food subscription that will make you eat
102+
healthy again. Tailored to your personal tastes and nutritional
103+
needs.
104+
</p>
105+
<a href="#" class="btn">Start eating well</a>
106+
</div>
107+
</div>
108+
</header>
109+
<section>
110+
<div class="container">
111+
<h2>Some random heading</h2>
112+
<p>
113+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt
114+
iste distinctio quia est consequatur mollitia minima repellendus,
115+
doloribus dicta accusantium, non corporis vero libero magnam accusamus
116+
harum! Repellendus, hic asperiores? Lorem ipsum dolor sit amet
117+
consectetur adipisicing elit. Rem accusamus iure consequuntur itaque
118+
accusantium perferendis, sed, quae quidem eligendi non, officiis
119+
cumque animi laborum soluta. Cum accusantium voluptatem odit
120+
distinctio.
121+
</p>
122+
</div>
123+
</section>
124+
<section></section>
125+
</body>
126+
</html>

0 commit comments

Comments
 (0)