Skip to content

Commit a5c7f69

Browse files
jonathanedempseyjonathanedempsey
committed
24 - Responisve Website Standard Layout Finished
1 parent 1581d59 commit a5c7f69

1 file changed

Lines changed: 142 additions & 0 deletions

File tree

‎24 - Responisve Website/responsive-START.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,145 @@ img {
1212
max-width: 100%;
1313
}
1414

15+
/* Wrapper */
16+
.wrapper {
17+
display: grid;
18+
grid-gap: 20px;
19+
}
20+
21+
/* Top section */
22+
.top {
23+
display: grid;
24+
grid-template-areas:
25+
"hero hero cta1"
26+
"hero hero cta2";
27+
grid-gap: 20px;
28+
}
29+
30+
.hero {
31+
grid-area: hero;
32+
min-height: 400px;
33+
background: white url(images/taco.jpg);
34+
background-size: cover;
35+
background-position: bottom right;
36+
padding: 50px;
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: center;
40+
align-items: start;
41+
}
42+
43+
.hero > * {
44+
background: var(--yellow);
45+
padding: 5px;
46+
}
47+
48+
.cta {
49+
background: var(--yellow);
50+
display: grid;
51+
align-items: center;
52+
justify-items: center;
53+
align-content: center;
54+
}
55+
56+
.cta p {
57+
margin: 0;
58+
}
59+
60+
.cta1 {
61+
grid-area: cta1;
62+
}
63+
64+
.cta2 {
65+
grid-area: cta2;
66+
}
67+
68+
.price {
69+
font-size: 60px;
70+
font-weight: 300;
71+
}
72+
73+
/* Navigation */
74+
.menu ul {
75+
display: grid;
76+
grid-gap: 10px;
77+
padding: 0;
78+
list-style: none;
79+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
80+
}
81+
82+
.menu a {
83+
background: var(--yellow);
84+
display: block;
85+
text-decoration: none;
86+
padding: 10px;
87+
text-align: center;
88+
text-transform: uppercase;
89+
font-size: 20px;
90+
}
91+
92+
[aria-controls="menu-list"] {
93+
display: none;
94+
}
95+
96+
/* Features! */
97+
.features {
98+
display: grid;
99+
grid-gap: 20px;
100+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
101+
}
102+
103+
.feature {
104+
background: white;
105+
padding: 10px;
106+
border: 1px solid white;
107+
text-decoration: center;
108+
box-shadow: 0 0 4px rgba(0,0,0,0.1);
109+
}
110+
111+
.feature .icon {
112+
font-size: 50px;
113+
}
114+
115+
.feature p {
116+
color: rgba(0,0,0,0.5);
117+
}
118+
119+
/* About Section */
120+
.about {
121+
background: white;
122+
padding: 50px;
123+
display: grid;
124+
grid-template-columns: 400px 1fr;
125+
align-items: center;
126+
}
127+
128+
/* Gallery */
129+
.gallery {
130+
display: grid;
131+
grid-gap: 20px;
132+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
133+
}
134+
135+
.gallery h2 {
136+
grid-column: 1 / -1;
137+
display: grid;
138+
grid-template-columns: 1fr auto 1fr;
139+
grid-gap: 20px;
140+
align-items: center;
141+
}
142+
143+
.gallery h2:before, .gallery h2:after {
144+
display: block;
145+
content: '';
146+
height: 10px;
147+
background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
148+
}
149+
150+
.gallery h2:after {
151+
--direction: right;
152+
}
153+
154+
.gallery img {
155+
width: 100%;
156+
}

0 commit comments

Comments
 (0)