source: PostgreSqlDotnetCore/wwwroot/css/site.css@ 99d0ecc

main
Last change on this file since 99d0ecc was 2aea0fd, checked in by ElenaMoskova <elena.moskova99@…>, 2 months ago

init commit Elena

  • Property mode set to 100644
File size: 3.7 KB
Line 
1@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Source+Sans+Pro&display=swap');
2
3
4@media (min-width: 768px) {
5 html {
6 font-size: 16px;
7 }
8}
9
10.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
11 box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
12}
13
14html {
15 font-size: 14px;
16 position: relative;
17 min-height: 100%;
18}
19
20
21body {
22 font-family: 'Manrope', sans-serif !important;
23}
24
25.hero-text > .btn {
26 color: #fff;
27 text-transform: uppercase;
28 padding: 20px 20px;
29 font-size: 1rem;
30 cursor: pointer;
31 display: flex;
32 align-items: center;
33 gap: 12px;
34}
35
36.btn-sm {
37 padding: 12px 24px;
38 font-size: 0.9rem;
39 color: #19456B;
40}
41
42.btn-primary {
43 background-color: #16C79A;
44 border-radius: 50px;
45}
46
47 .btn-primary:hover {
48 background-color: #1AA17E;
49 }
50
51.btn-outline {
52 border: 2px solid #19456B;
53 background-color: transparent;
54 border-radius: 50px;
55}
56
57 .btn-outline:hover {
58 color: #11698E;
59 border-color: #11698E;
60 }
61
62.container {
63 max-width: 1280px;
64 /*max-height: 680px;*/
65 margin: 0 auto;
66}
67
68.overtitle {
69 font-size: 16px;
70 line-height: 24px;
71 color: #19456B;
72 font-weight: 700;
73 text-transform: uppercase;
74 border-radius: 32px 32px 0px 0px;
75}
76
77.title {
78 font-size: 44px;
79 line-height: 56px;
80 font-weight: 700;
81 color: #19456B;
82}
83
84/* layout */
85
86#header-container { /*isso é um elemento*/
87 background-color: #F8F1F1;
88}
89
90.header { /*isso é uma classe*/
91 padding: 24px 72px;
92 color: #19456B;
93 display: flex;
94 justify-content: space-between;
95 align-items: center;
96}
97
98/* hero section */
99
100#hero-container {
101 background-color: #F8F1F1;
102 color: #19456B;
103 padding: 48px 72px;
104}
105
106.hero {
107 display: flex;
108 align-items: center;
109 gap: 32px;
110}
111
112.hero-text {
113 flex: 1;
114 display: flex;
115 flex-direction: column;
116 align-items: flex-start;
117 gap: 16px;
118 padding: 96px 0;
119}
120
121.hero-img {
122 flex: 1;
123 align-self: flex-end;
124}
125
126.hero-img {
127 display: flex;
128}
129
130 .hero-img img {
131 max-width: 40%;
132 height: 100%;
133 margin-left: 720px;
134 margin-top: -570px;
135 }
136
137.herotxt {
138 font-size: 56px;
139 line-height: 64px;
140 font-weight: 700;
141}
142
143.text-p {
144 font-size: 20px;
145 line-height: 28px;
146 max-width: 520px;
147 color: #11698E
148}
149
150/* services section */
151
152#services-container {
153 padding: 96px 72px;
154 background-color: #19456B;
155}
156
157.services-list {
158 display: flex;
159 gap: 32px;
160}
161
162.service-card {
163 background-color: #11698E;
164 border-radius: 40px;
165 color: #fff;
166}
167
168 .service-card img {
169 width: 100%;
170 }
171
172.service-text {
173 padding: 32px;
174}
175
176 .service-text h3 {
177 font-size: 24px;
178 line-height: 32px;
179 font-weight: 700;
180 }
181
182 .service-text p {
183 font-size: 16px;
184 line-height: 24px;
185 font-weight: 400;
186 }
187
188/* location section */
189
190#location-container {
191 background-color: #f5f3f4;
192}
193
194 #location-container .location {
195 padding: 96px 72px 48px;
196 }
197
198 #location-container address {
199 display: flex;
200 align-items: center;
201 gap: 12px;
202 }
203
204
205/* footer section */
206
207footer {
208 background-color: #11698e;
209 color: #fff;
210 gap: 10px;
211 padding: 48px 72px;
212 display: flex;
213 justify-content: space-between;
214 align-items: center;
215}
216
217.footer-logocopy {
218 display: flex;
219 flex-direction: column;
220 gap: 16px;
221}
222
223/* scroll section */
224
225::-webkit-scrollbar {
226 width: 12px;
227}
228
229::-webkit-scrollbar-track {
230 background: #19456B;
231}
232
233::-webkit-scrollbar-thumb {
234 background: #16C79A;
235 border-radius: 4px;
236}
237
238.footer-image {
239 position: absolute;
240 right: 0;
241 margin-top: -360px;
242}
Note: See TracBrowser for help on using the repository browser.