forked from SallyMcGrath/HTML-CSS-W2-InClassProject
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
110 lines (96 loc) · 1.94 KB
/
styles.css
File metadata and controls
110 lines (96 loc) · 1.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* HTML/CSS W2 Project
* Work in pairs
* Mark up your content with semantic html
* Lay out your page using flexbox and grid
* Test your work with Devtools.
* You can get pictures and choose custom size in the download at
* https://www.pexels.com/
* If you want to use a different font, get them from
* https://fonts.google.com/
*/
/* Testing your work
== check your CSS
* uses grid
* uses flexbox
* uses at least one media query
== check your HTML
* uses semantic HTML
* has a Lighthouse Access score of 100 <--
* works on desktop and mobile
* works when you size the text up by 200%
== check your design
* follows the example
* you can choose your own colours and fonts if you like
* write your names at the bottom
* take a screenshot at laptop and Moto G4 device sizes in Devtools
*/
body {
font: 100% "Poppins", sans-serif;
background-color: black;
color: yellow;
text-align: center;
}
main {
display: grid;
gap: 15px;
grid-template-areas: ". azan abed .";
justify-items: stretch;
margin-top: 7%;
grid-template-columns: 0 2fr 2fr 0;
}
.name {
display: flex;
justify-content: space-around;
align-items: center;
color: gold;
font-weight: 700;
padding-top: 2%;
}
.name h2 {
margin-right: 30%;
}
.name img {
margin-left: 3%;
max-width: 250px;
max-height: 150px;
border: 3px solid goldenrod;
border-radius: 10px;
}
.azan {
grid-area: azan;
border-radius: 10px;
transition: 0.5s;
padding-top: 10px;
}
.azan:hover {
box-shadow: 0px 0px 20px gold;
}
.abed {
border-radius: 10px;
transition: 0.5s;
padding-top: 10px;
grid-area: abed;
}
.abed:hover {
box-shadow: 0px 0px 20px gold;
}
.statements {
padding: 1rem;
text-align: left;
margin-left: 5%;
}
footer {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
@media screen and (max-width: 700px) {
main {
grid-template-areas:
". azan azan ."
". abed abed .";
}
.name img {
max-width: 150px;
max-height: auto;
}