Skip to content

Commit a3022bb

Browse files
cpe-codercpe-coder
committed
design the structure for html
1 parent 8448a8d commit a3022bb

File tree

1 file changed

+340
-0
lines changed

1 file changed

+340
-0
lines changed

‎style.css‎

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
2+
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");
3+
4+
@font-face {
5+
font-family: "Booter - Zero Zero";
6+
src: url("Fonts/Booter - Zero Zero.woff") format("woff"),
7+
url("Fonts/Booter - Zero Zero.woff2") format("woff2");
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
font-family: Raleway;
15+
color: #777;
16+
}
17+
18+
html, body {
19+
margin: 0;
20+
padding: 0;
21+
min-height: 100%;
22+
}
23+
24+
.nav ul {
25+
margin: 0;
26+
}
27+
28+
.nav li {
29+
display: inline;
30+
}
31+
32+
.nav a {
33+
display: inline-block;
34+
padding: .5em;
35+
color: white;
36+
text-decoration: none;
37+
}
38+
39+
.main-nav {
40+
text-align: center;
41+
font-size: 1.1em;
42+
font-weight: lighter;
43+
border-bottom: 1px solid rgba(255, 255, 255, .3)
44+
}
45+
46+
.main-nav li {
47+
padding: 0 5%;
48+
}
49+
50+
.nav a:hover {
51+
background-color: rgba(255, 255, 255, .3)
52+
}
53+
54+
.main-header {
55+
background-color: rgba(0, 0, 0, .6);
56+
background-image: url("Images/Header Background.jpg");
57+
background-blend-mode: multiply;
58+
background-size: cover;
59+
padding-bottom: 30px;
60+
}
61+
62+
.band-name {
63+
text-align: center;
64+
margin: 0;
65+
font-size: 4em;
66+
font-family: "Booter - Zero Zero";
67+
font-weight: normal;
68+
color: white;
69+
}
70+
71+
.band-name-large {
72+
font-size: 8em;
73+
}
74+
75+
.content-section {
76+
margin: 1em;
77+
}
78+
79+
.container {
80+
max-width: 900px;
81+
margin: 0 auto;
82+
padding: 0 1.5em;
83+
}
84+
.section-header {
85+
font-family: "Metal Mania";
86+
font-weight: normal;
87+
color: #333;
88+
text-align: center;
89+
font-size: 2.5em;
90+
}
91+
92+
.about-band-image {
93+
float: left;
94+
height: 200px;
95+
width: 200px;
96+
margin: 15px;
97+
border-radius: 50%;
98+
}
99+
100+
.main-footer {
101+
background-color: #56CCF2;
102+
color: white;
103+
padding: .25em 0;
104+
}
105+
106+
.main-footer-container {
107+
display: flex;
108+
align-items: center;
109+
}
110+
111+
.main-footer-container ul {
112+
flex-grow: 1;
113+
text-align: end;
114+
}
115+
116+
.footer-nav li {
117+
padding: 0 .5em;
118+
}
119+
120+
.footer-nav img {
121+
width: 30px;
122+
height: 30px;
123+
}
124+
125+
.btn {
126+
text-align: center;
127+
vertical-align: middle;
128+
padding: .67em .67em;
129+
cursor: pointer;
130+
}
131+
132+
.btn-header {
133+
margin: .5em 15% 2em 15%;
134+
color: white;
135+
border: 2px solid #2D9CDB;
136+
background-color: rgba(255, 255, 255, .1);
137+
border-radius: 0;
138+
font-size: 1.5em;
139+
font-weight: lighter;
140+
padding-left: 2em;
141+
padding-right: 2em;
142+
}
143+
144+
.btn-header:hover {
145+
background-color: rgba(255, 255, 255, .3);
146+
}
147+
148+
.btn-play {
149+
display: block;
150+
margin: 0 auto;
151+
color: #2D9CDB;
152+
font-size: 4em;
153+
border-radius: 50%;
154+
width: 100px;
155+
height: 100px;
156+
padding: 0;
157+
text-align: center;
158+
}
159+
160+
.btn-primary {
161+
color: white;
162+
background-color: #56CCF2;
163+
border: none;
164+
border-radius: .3em;
165+
font-weight: bold;
166+
}
167+
168+
.btn-primary:hover {
169+
background-color: #2D9CDB;
170+
}
171+
172+
.tour-row {
173+
border-bottom: 1px solid black;
174+
padding-bottom: 1em;
175+
margin-bottom: 1em;
176+
}
177+
178+
.tour-row:last-child {
179+
border: none;
180+
}
181+
182+
.tour-item {
183+
display: inline-block;
184+
padding-right: .5em;
185+
}
186+
187+
.tour-date {
188+
color: #555;
189+
width: 11%;
190+
font-weight: bold;
191+
}
192+
193+
.tour-city {
194+
width: 24%;
195+
}
196+
197+
.tour-arena {
198+
width: 42%;
199+
}
200+
201+
.tour-btn {
202+
max-width: 19%;
203+
}
204+
205+
.shop-item {
206+
margin: 30px;
207+
}
208+
209+
.shop-item-title {
210+
display: block;
211+
width: 100%;
212+
text-align: center;
213+
font-weight: bold;
214+
font-size: 1.5em;
215+
color: #333;
216+
margin-bottom: 15px;
217+
}
218+
219+
.shop-item-image {
220+
height: 250px;
221+
}
222+
223+
.shop-item-details {
224+
display: flex;
225+
align-items: center;
226+
padding: 5px;
227+
}
228+
229+
.shop-item-price {
230+
flex-grow: 1;
231+
color: #333;
232+
}
233+
234+
.shop-items {
235+
display: flex;
236+
flex-wrap: wrap;
237+
justify-content: space-around;
238+
}
239+
240+
.cart-header {
241+
font-weight: bold;
242+
font-size: 1.25em;
243+
color: #333;
244+
}
245+
246+
.cart-column {
247+
display: flex;
248+
align-items: center;
249+
border-bottom: 1px solid black;
250+
margin-right: 1.5em;
251+
padding-bottom: 10px;
252+
margin-top: 10px;
253+
}
254+
255+
.cart-row {
256+
display: flex;
257+
}
258+
259+
.cart-item {
260+
width: 45%;
261+
}
262+
263+
.cart-price {
264+
width: 20%;
265+
font-size: 1.2em;
266+
color: #333;
267+
}
268+
269+
.cart-quantity {
270+
width: 35%;
271+
}
272+
273+
.cart-item-title {
274+
color: #333;
275+
margin-left: .5em;
276+
font-size: 1.2em;
277+
}
278+
279+
.cart-item-image {
280+
width: 75px;
281+
height: auto;
282+
border-radius: 10px;
283+
}
284+
285+
.btn-danger {
286+
color: white;
287+
background-color: #EB5757;
288+
border: none;
289+
border-radius: .3em;
290+
font-weight: bold;
291+
}
292+
293+
.btn-danger:hover {
294+
background-color: #CC4C4C;
295+
}
296+
297+
.cart-quantity-input {
298+
height: 34px;
299+
width: 50px;
300+
border-radius: 5px;
301+
border: 1px solid #56CCF2;
302+
background-color: #eee;
303+
color: #333;
304+
padding: 0;
305+
text-align: center;
306+
font-size: 1.2em;
307+
margin-right: 25px;
308+
}
309+
310+
.cart-row:last-child {
311+
border-bottom: 1px solid black;
312+
}
313+
314+
.cart-row:last-child .cart-column {
315+
border: none;
316+
}
317+
318+
.cart-total {
319+
text-align: end;
320+
margin-top: 10px;
321+
margin-right: 10px;
322+
}
323+
324+
.cart-total-title {
325+
font-weight: bold;
326+
font-size: 1.5em;
327+
color: black;
328+
margin-right: 20px;
329+
}
330+
331+
.cart-total-price {
332+
color: #333;
333+
font-size: 1.1em;
334+
}
335+
336+
.btn-purchase {
337+
display: block;
338+
margin: 40px auto 80px auto;
339+
font-size: 1.75em;
340+
}

0 commit comments

Comments
 (0)