Files: eb3938470f7dee8766731b14c7345333971487e8 / styles / header.css
1590 bytesRaw
1 | .header, |
2 | .logo, |
3 | .ring, |
4 | .internal-ring, |
5 | .texts { |
6 | display: flex; |
7 | align-items: center; |
8 | justify-content: center; |
9 | } |
10 | |
11 | .texts { |
12 | align-items: baseline; |
13 | flex-direction: column; |
14 | margin-left: 45px; |
15 | } |
16 | |
17 | .header { |
18 | color: #fff; |
19 | height: 300px; |
20 | } |
21 | |
22 | .header, |
23 | .ring { |
24 | background: rgb(110, 110, 110); |
25 | } |
26 | |
27 | .logo, |
28 | .internal-ring { |
29 | background: #fff; |
30 | } |
31 | |
32 | .logo, |
33 | .ring, |
34 | .internal-ring { |
35 | border-radius: 50%; |
36 | } |
37 | |
38 | .logo { |
39 | height: 150px; |
40 | margin-left: -14%; |
41 | width: 150px; |
42 | } |
43 | |
44 | .ring { |
45 | height: 140px; |
46 | width: 140px; |
47 | } |
48 | .internal-ring { |
49 | flex-direction: column; |
50 | height: 130px; |
51 | width: 130px; |
52 | } |
53 | |
54 | .header span { |
55 | color: rgb(110, 110, 110); |
56 | font-size: 40px; |
57 | } |
58 | |
59 | .header hr { |
60 | background: rgb(110, 110, 110); |
61 | border: none; |
62 | border-radius: 6px; |
63 | height: 6px; |
64 | margin: 10px; |
65 | padding: 0; |
66 | width: 26px; |
67 | } |
68 | |
69 | .header h1, |
70 | .header h2 { |
71 | margin: 0; |
72 | } |
73 | |
74 | .header h1 { |
75 | font-size: 52px; |
76 | } |
77 | |
78 | .header h2 { |
79 | font-size: 20px; |
80 | margin-left: 3px; |
81 | text-transform: uppercase; |
82 | } |
83 | |
84 | .nav ul { |
85 | background: rgb(110, 110, 110); |
86 | display: flex; |
87 | justify-content: center; |
88 | list-style: none; |
89 | margin: 0; |
90 | padding: 0; |
91 | } |
92 | |
93 | .nav a { |
94 | color: #fff; |
95 | display: inline-block; |
96 | letter-spacing: 1px; |
97 | min-width: 100px; |
98 | padding: 10px; |
99 | text-align: center; |
100 | transition: background .2s, color .2s; |
101 | } |
102 | |
103 | .nav a:hover { |
104 | background: #fff; |
105 | color: rgb(110, 110, 110); |
106 | } |
107 | |
108 | @media (max-width: 740px) { |
109 | .header { |
110 | flex-direction: column; |
111 | } |
112 | .logo { |
113 | margin-left: 0; |
114 | } |
115 | .texts { |
116 | margin-left: 0; |
117 | margin-top: 20px; |
118 | } |
119 | |
120 | .header h1 { |
121 | font-size: 38px; |
122 | } |
123 | .header h2 { |
124 | font-size: 18px; |
125 | } |
126 | } |
Built with git-ssb-web