Skip to content

Commit f16d0fd

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
building a web application layout
1 parent 01537e9 commit f16d0fd

File tree

2 files changed

+150
-1
lines changed

2 files changed

+150
-1
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
width: 48px;
4747
background-color: #fff;
4848
border-radius: 50%;
49+
cursor: pointer;
4950

5051
display: flex;
5152
align-items: center;
@@ -88,6 +89,12 @@
8889
font-weight: 500;
8990
}
9091

92+
a.current-page {
93+
color: white;
94+
background-color: #087f5b;
95+
border-radius: 50%;
96+
}
97+
9198
a:hover,
9299
a:active {
93100
color: white;
@@ -116,7 +123,7 @@
116123
</button>
117124
<a href="#" class="pnumber">1</a>
118125
<a href="#" class="pnumber">2</a>
119-
<a href="#" class="pnumber">3</a>
126+
<a href="#" class="pnumber current-page">3</a>
120127
<a href="#" class="pnumber">4</a>
121128
<a href="#" class="pnumber">5</a>
122129
<a href="#" class="pnumber">6</a>

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
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>Omifood Hero Section</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap"
14+
rel="stylesheet"
15+
/>
16+
17+
<style>
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
html {
25+
font-family: "Rubik", sans-serif;
26+
color: #343a40;
27+
line-height: 1;
28+
}
29+
30+
.container {
31+
margin: 0 auto;
32+
width: 1200px;
33+
/* background-color: red; */
34+
}
35+
36+
.header-container {
37+
width: 1200px;
38+
position: absolute;
39+
left: 50%;
40+
top: 50%;
41+
42+
transform: translate(-50%, -50%);
43+
44+
/* text-align: center; */
45+
}
46+
47+
.header-container-inner {
48+
width: 50%;
49+
}
50+
51+
header {
52+
color: #fff;
53+
/* background-color: deepskyblue; */
54+
height: 100vh;
55+
position: relative;
56+
57+
background-image: linear-gradient(
58+
rgba(34, 34, 34, 0.6),
59+
rgba(34, 34, 34, 0.6)
60+
),
61+
url(hero.jpg);
62+
63+
background-size: cover;
64+
}
65+
66+
nav {
67+
font-size: 20px;
68+
font-weight: 700;
69+
display: flex;
70+
justify-content: space-between;
71+
/* background-color: green; */
72+
padding-top: 32px;
73+
}
74+
75+
h1 {
76+
font-size: 52px;
77+
margin-bottom: 32px;
78+
line-height: 1;
79+
}
80+
81+
p {
82+
font-size: 20px;
83+
line-height: 1.6;
84+
margin-bottom: 48px;
85+
}
86+
87+
h2 {
88+
font-size: 44px;
89+
margin-bottom: 48px;
90+
}
91+
92+
section {
93+
padding: 96px;
94+
background-color: #f7f7f7;
95+
}
96+
97+
.btn:link,
98+
.btn:visited {
99+
font-size: 20px;
100+
font-weight: 700;
101+
background-color: #e67e22;
102+
color: #fff;
103+
text-decoration: none;
104+
105+
display: inline-block;
106+
padding: 16px 32px;
107+
border-radius: 9px;
108+
}
109+
</style>
110+
</head>
111+
112+
<body>
113+
<header>
114+
<nav class="container">
115+
<div>Logo</div>
116+
<div>NAVIGATION</div>
117+
</nav>
118+
<div class="header-container">
119+
<div class="header-container-inner">
120+
<h1>A healthy meal delivered to your door, every single day</h1>
121+
<p>
122+
The smart 365-days-per-year food subscription that will make you eat
123+
healthy again. Tailored to your personal tastes and nutritional
124+
needs.
125+
</p>
126+
<a href="#" class="btn">Start eating well</a>
127+
</div>
128+
</div>
129+
</header>
130+
<section>
131+
<div class="container">
132+
<h2>Some random title</h2>
133+
<p>
134+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
135+
accusamus itaque eaque necessitatibus totam neque dolores! Quaerat
136+
nihil repellendus ab, tempora accusamus molestiae rerum dicta,
137+
praesentium dolor molestias saepe delectus.
138+
</p>
139+
</div>
140+
</section>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)