-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
148 lines (123 loc) · 2.97 KB
/
styles.css
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
title {
color: #b5651d; /* Brown */
}
header {
background-color: #d2691e; /* Chocolate color */
color: white;
text-align: center;
padding: 1em;
font-size: 2em;
}
h2 {
color: #ff8c00; /* Dark orange */
margin-top: 1em;
}
p {
line-height: 1.6;
margin-bottom: 1em;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
u {
text-decoration: underline;
}
ul {
list-style-type: disc;
padding-left: 1.5em;
}
li {
margin-bottom: 0.5em;
}
footer {
background-color: #8b4513; /* Saddle brown */
color: white;
text-align: center;
padding: 1em 0;
width: 100%;
}
section {
padding: 1em;
background-color: #ffe4b5; /* Lemon chiffon */
margin: 1em 10%;
border-radius: 8px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 100vh;
}
.main-content {
display: flex;
justify-content: space-around;
width: 80%;
margin: 1em 0;
}
a {
color: #d2691e; /* Chocolate color */
text-decoration: none;
}
a:hover {
text-decoration: underline; /* Underline on hover */
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #ff8c00; /* Dark orange */
color: white;
}
td {
background-color: #f5f5dc; /* Light beige for table cells */
}
.navbar {
display: flex;
justify-content: center; /* Center the links */
background-color: #f8b400; /* Light yellow background */
padding: 10px 20px; /* Padding around the navbar */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.navbar a {
color: #333; /* Dark text color */
text-decoration: none; /* Remove underline */
padding: 10px 15px; /* Padding around each link */
margin: 0 10px; /* Margin between links */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}
.navbar a:hover {
background-color: #333; /* Dark background on hover */
color: #fff; /* White text on hover */
}.image-gallery {
display: flex;
justify-content: center; /* Center the images in the gallery */
flex-wrap: wrap; /* Allow images to wrap to the next line */
gap: 15px; /* Space between images */
padding: 20px; /* Padding around the gallery */
}
.image-gallery img {
width: 200px; /* Set a fixed width for the images */
height: auto; /* Maintain aspect ratio */
border-radius: 8px; /* Rounded corners for images */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
}
.image-gallery img:hover {
transform: scale(1.05); /* Slightly enlarge image on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}
select {
display: block !important;
}