body, h
1
, h
2
, p, ul,li {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
}
body {
font-family
:
'Segoe UI'
,
Tahoma
, Geneva,
Verdana
,
sans-serif
;
background-color
:
#f8f8f8
;
color
:
#333
;
font-family
:
'Quicksand'
,
sans-serif
;
}
header {
text-align
:
center
;
padding
:
20px
;
background-color
:
#ffffff
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
border-radius:
10px
;
}
header h
1
{
font-size
:
2.5em
;
color
:
#4c2c69
;
}
header h
2
{
font-size
:
1.5em
;
color
:
#6b567c
;
}
nav {
background-color
:
#4c2c69
;
box-shadow:
0px
2px
5px
rgba(
0
,
0
,
0
,
0.2
);
}
nav ul {
list-style
:
none
;
display
: flex;
justify-
content
:
center
;
padding
:
10px
;
}
nav li {
margin
:
0
;
}
nav a {
text-decoration
:
none
;
color
:
#fff
;
padding
:
10px
20px
;
margin
:
0
10px
;
border-radius:
5px
;
transition: background-color
0.3
s ease;
display
: inline-
block
;
}
nav a:hover {
background-color
:
#6b567c
;
}
main {
padding
:
20px
;
}
section {
margin-bottom
:
40px
;
background-color
:
#fff
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
section h
2
{
color
:
#4c2c69
;
}
p {
line-height
:
1.6
;
}
.image-grid {
display
: grid;
grid-template-columns:
repeat
(auto-fill, minmax(
250px
,
1
fr));
gap:
20px
;
}
img {
width
:
100%
;
border-radius:
5px
;
box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
form {
margin-top
:
20px
;
background-color
:
#fff
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
label {
display
:
block
;
margin-bottom
:
5px
;
color
:
#4c2c69
;
}
input,
textarea {
width
:
100%
;
padding
:
10px
;
margin-bottom
:
15px
;
border
:
1px
solid
#ccc
;
border-radius:
5px
;
}
button {
background-color
:
#4c2c69
;
color
:
#fff
;
padding
:
10px
20px
;
border
:
none
;
border-radius:
5px
;
cursor
:
pointer
;
transition: background-color
0.3
s ease;
}
button:hover {
background-color
:
#6b567c
;
}
footer {
text-align
:
center
;
padding
:
10px
;
background-color
:
#4c2c69
;
color
:
#fff
;
box-shadow:
0px
-2px
5px
rgba(
0
,
0
,
0
,
0.2
);
}
@media (
max-width
:
768px
) {
nav ul {
flex-
direction
: column;
align-items:
center
;
}
nav a {
margin
:
5px
0
;
}
.image-grid {
grid-template-columns:
repeat
(auto-fill, minmax(
100%
,
1
fr));
}
}
header {
background-color
:
#ffcccb
;
color
:
#4c2c69
;
}
nav a {
color
:
#fff
;
}
section {
background-color
:
#f8f8f8
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
margin-bottom
:
20px
;
}
button {
background-color
:
#4c2c69
;
color
:
#fff
;
}
footer {
background-color
:
#4c2c69
;
color
:
#fff
;
padding
:
10px
;
text-align
:
center
;
}
nav a:hover,
button:hover {
background-color
:
#6b567c
;
}
i {
margin-right
:
5px
;
}
main {
padding
:
20px
;
}
section {
background-color
:
#f8f8f8
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
margin-bottom
:
20px
;
}
section h
2
{
color
:
#4c2c69
;
display
: flex;
align-items:
center
;
margin-bottom
:
15px
;
}
section p {
line-height
:
1.6
;
margin-bottom
:
15px
;
}
section a {
display
: inline-
block
;
padding
:
10px
20px
;
background-color
:
#4c2c69
;
color
:
#fff
;
text-decoration
:
none
;
border-radius:
5px
;
transition: background-color
0.3
s ease;
}
section a:hover {
background-color
:
#6b567c
;
}
form {
margin-top
:
20px
;
background-color
:
#fff
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0px
2px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
form label {
display
:
block
;
margin-bottom
:
10px
;
color
:
#4c2c69
;
}
form input,
form textarea {
width
:
100%
;
padding
:
10px
;
margin-bottom
:
15px
;
border
:
1px
solid
#ccc
;
border-radius:
5px
;
}
form button {
background-color
:
#4c2c69
;
color
:
#fff
;
padding
:
10px
20px
;
border
:
none
;
border-radius:
5px
;
cursor
:
pointer
;
transition: background-color
0.3
s ease;
}
form button:hover {
background-color
:
#6b567c
;
}
section i {
font-size
:
24px
;
margin-right
:
10px
;
color
:
#6b567c
;
}