1
+ @import url ('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap' );
2
+
3
+ body {
4
+ margin : 0 ;
5
+ font-family : "Space Grotesk" , sans-serif;
6
+ display : flex;
7
+ flex-direction : column;
8
+ }
9
+
10
+ /* Nav */
11
+ nav {
12
+ display : flex;
13
+ width : 100% ;
14
+ position : relative;
15
+ box-sizing : border-box;
16
+ border-bottom : 2px solid aqua;
17
+ background-color : black;
18
+ }
19
+
20
+ nav ul {
21
+ justify-content : space-between;
22
+ align-items : center;
23
+ list-style-type : none;
24
+ display : flex;
25
+ color : white;
26
+ padding : 0 ;
27
+ width : 60% ;
28
+ margin : 0 ;
29
+ box-sizing : border-box;
30
+ }
31
+
32
+ nav ul li {
33
+ height : 100% ;
34
+ width : 100% ;
35
+ display : flex;
36
+ border-right : 2px solid aqua;
37
+ align-items : center;
38
+ justify-content : center;
39
+ transition : 0.3s ;
40
+ cursor : pointer;
41
+ }
42
+
43
+ nav ul li : has (button ) {
44
+ border-right : none;
45
+ }
46
+
47
+ nav ul li : hover {
48
+ background-color : white;
49
+ color : aqua;
50
+ font-weight : 500 ;
51
+ }
52
+
53
+ nav button {
54
+ background-color : transparent;
55
+ color : inherit;
56
+ font-family : inherit;
57
+ color : inherit;
58
+ border : none;
59
+ outline : none;
60
+ font-weight : inherit;
61
+ font-size : inherit;
62
+ display : flex;
63
+ align-items : center;
64
+ gap : 16px ;
65
+ }
66
+
67
+ a {
68
+ color : inherit;
69
+ text-decoration : none;
70
+
71
+ }
72
+
73
+ .logo {
74
+ width : 50% ;
75
+ padding : 48px 0 ;
76
+ display : flex;
77
+ align-items : center;
78
+ border-right : 2px solid aqua;
79
+ }
80
+
81
+ .logo img {
82
+ display : none;
83
+ }
84
+
85
+
86
+
87
+
88
+ /* HERO */
89
+
90
+ h1 {
91
+ font-size : 64px ;
92
+ margin : 0 ;
93
+ }
94
+
95
+ # start {
96
+ width : 100% ;
97
+ box-sizing : border-box;
98
+ display : flex;
99
+ border-bottom : 2px solid aqua;
100
+ }
101
+
102
+ # start article {
103
+ border-right : 2px solid aqua;
104
+ width : calc (56.41% );
105
+ box-sizing : border-box;
106
+ padding : 64px 48px ;
107
+ display : flex;
108
+ flex-direction : column;
109
+ }
110
+
111
+ /* #start figure {
112
+ width: 60%;
113
+ display: flex;
114
+ } */
115
+
116
+
117
+
118
+
119
+
120
+ /* MISSION */
121
+ .mission {
122
+ border-bottom : 2px solid aqua;
123
+ display : flex;
124
+ box-sizing : border-box;
125
+ width : 100% ;
126
+ }
127
+
128
+ h2 {
129
+ font-size : 40px ;
130
+ margin : 0 ;
131
+ }
132
+
133
+ .mission figure {
134
+ width : 54% ;
135
+ }
136
+
137
+ .mission article {
138
+ border-left : 2px solid aqua;
139
+ width : calc (46.3% );
140
+ box-sizing : border-box;
141
+ padding : 120px 48px ;
142
+ display : flex;
143
+ flex-direction : column;
144
+ }
145
+
146
+
147
+ /* Webinars */
148
+ .webinars {
149
+ border-bottom : 2px solid aqua;
150
+ display : flex;
151
+ padding : 64px 48px ;
152
+ width : 100% ;
153
+ box-sizing : border-box;
154
+ flex-direction : column;
155
+ }
156
+ h3 {
157
+ font-size : 32px ;
158
+ margin : 0 ;
159
+ }
160
+
161
+ .webinars button {
162
+ width : max-content;
163
+ padding : 24px 32px ;
164
+ border : 2px solid black;
165
+ box-shadow : 5px 5px 1px black;
166
+ color : inherit;
167
+ font-family : inherit;
168
+ color : inherit;
169
+ outline : none;
170
+ font-weight : inherit;
171
+ font-size : inherit;
172
+ transition : 0.1s ;
173
+ cursor : pointer;
174
+ }
175
+
176
+ .webinars button : hover {
177
+ translate : -10px -10px ;
178
+ box-shadow : 10px 10px 1px black;
179
+
180
+ }
181
+
182
+
183
+
184
+ /* footer */
185
+ footer {
186
+ width : 100% ;
187
+ padding : 48px ;
188
+ display : flex;
189
+ /* flex-direction: column; */
190
+ gap : 16px ;
191
+ justify-content : space-between;
192
+ box-sizing : border-box;
193
+ background-color : black;
194
+ color : white;
195
+ }
196
+
197
+ footer p {
198
+ margin : 0 ;
199
+ }
0 commit comments