Skip to content

Commit fbbdb59

Browse files
ruthieOzruthieOz
authored
new commit
1 parent d698534 commit fbbdb59

File tree

4 files changed

+346
-93
lines changed

4 files changed

+346
-93
lines changed

‎Huckleberry/styles.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,57 @@ body {
9999
font-weight: bold;
100100
margin-bottom: 10px;
101101
}
102+
103+
/* Responsive Design */
104+
@media (max-width: 768px) {
105+
.container {
106+
flex-direction: column; /* Stack items vertically on smaller screens */
107+
padding: 10px; /* Adjust padding for smaller screens */
108+
}
109+
110+
.card {
111+
padding: 15px;
112+
}
113+
114+
.card h1 {
115+
font-size: 20px; /* Reduce font size for smaller screens */
116+
}
117+
118+
.card p {
119+
font-size: 14px; /* Reduce font size for smaller screens */
120+
}
121+
122+
.navbar ul {
123+
flex-direction: column; /* Stack navbar items vertically */
124+
gap: 10px;
125+
}
126+
127+
.navbar ul li a {
128+
font-size: 14px; /* Smaller font size for smaller screens */
129+
padding: 8px 15px;
130+
}
131+
}
132+
133+
@media (max-width: 480px) {
134+
.navbar ul {
135+
justify-content: flex-start;
136+
padding-left: 10px; /* Align items to the left */
137+
}
138+
139+
.navbar ul li a {
140+
padding: 8px; /* Adjust padding for smaller devices */
141+
font-size: 12px; /* Smaller font for very small screens */
142+
}
143+
144+
.container {
145+
gap: 10px; /* Reduce gap between cards */
146+
}
147+
148+
.card h1 {
149+
font-size: 18px;
150+
}
151+
152+
.card p {
153+
font-size: 12px;
154+
}
155+
}

‎Novuswatch/styles.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,3 +104,62 @@ h1 {
104104
line-height: 1.6;
105105
color: #333;
106106
}
107+
108+
/* Responsive Design */
109+
@media (max-width: 768px) {
110+
.navbar ul {
111+
flex-direction: column; /* Stack navbar links vertically */
112+
gap: 10px;
113+
padding: 0 10px;
114+
}
115+
116+
.navbar ul li a {
117+
font-size: 14px; /* Smaller font size for navbar links */
118+
padding: 8px 15px;
119+
}
120+
121+
.card-container {
122+
gap: 15px; /* Adjust space between cards */
123+
}
124+
125+
.card {
126+
padding: 15px; /* Reduce card padding for smaller screens */
127+
max-width: 90%; /* Make cards fit better on smaller screens */
128+
}
129+
130+
h1 {
131+
font-size: 20px;
132+
}
133+
134+
.series {
135+
font-size: 14px;
136+
}
137+
138+
.description {
139+
font-size: 13px;
140+
}
141+
}
142+
143+
@media (max-width: 480px) {
144+
.navbar ul li a {
145+
font-size: 12px; /* Reduce font size further for very small screens */
146+
padding: 6px 10px;
147+
}
148+
149+
.card {
150+
padding: 10px; /* Further reduce padding for small screens */
151+
max-width: 100%; /* Cards take full width of the viewport */
152+
}
153+
154+
h1 {
155+
font-size: 18px;
156+
}
157+
158+
.series {
159+
font-size: 12px;
160+
}
161+
162+
.description {
163+
font-size: 12px;
164+
}
165+
}

‎Webdevelopment-training/styles.css‎

Lines changed: 163 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,182 @@
11
/* General Body Styling */
22
body {
3-
font-family: Arial, sans-serif;
4-
margin: 0;
5-
padding: 0;
6-
background-color: #f9f9f9;
7-
display: flex;
8-
flex-direction: column;
9-
align-items: center;
10-
min-height: 100vh;
3+
font-family: Arial, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
background-color: #f9f9f9;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
min-height: 100vh;
11+
}
12+
13+
/* Navigation Bar */
14+
.navbar {
15+
background-color: #333;
16+
padding: 10px 0;
17+
position: sticky;
18+
top: 0;
19+
width: 100%;
20+
z-index: 1000;
21+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
.navbar ul {
25+
list-style-type: none;
26+
margin: 0;
27+
padding: 0;
28+
display: flex;
29+
justify-content: center;
30+
gap: 20px;
31+
}
32+
33+
.navbar ul li {
34+
display: inline;
35+
}
36+
37+
.navbar ul li a {
38+
color: white;
39+
text-decoration: none;
40+
font-size: 16px;
41+
padding: 10px 20px;
42+
transition: background-color 0.3s ease;
43+
}
44+
45+
.navbar ul li a:hover,
46+
.navbar ul li a.active {
47+
background-color: #007B5F;
48+
border-radius: 5px;
49+
}
50+
51+
/* Form Container */
52+
.form-container {
53+
background-color: white;
54+
padding: 30px;
55+
width: 100%;
56+
max-width: 400px;
57+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
58+
border-radius: 10px;
59+
margin-top: 50px;
60+
}
61+
62+
/* Form Styling */
63+
.signup-form {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 20px;
67+
}
68+
69+
.form-group {
70+
display: flex;
71+
flex-direction: column;
72+
gap: 5px;
73+
}
74+
75+
.form-group label {
76+
font-size: 14px;
77+
font-weight: bold;
78+
color: #333;
79+
}
80+
81+
.form-group select,
82+
.form-group input {
83+
padding: 10px;
84+
font-size: 14px;
85+
border: 1px solid #ccc;
86+
border-radius: 5px;
87+
outline: none;
88+
transition: border-color 0.3s ease;
89+
}
90+
91+
.form-group select:focus,
92+
.form-group input:focus {
93+
border-color: #007B5F;
94+
}
95+
96+
.register-button {
97+
background-color: #007B5F;
98+
color: white;
99+
border: none;
100+
padding: 10px;
101+
font-size: 16px;
102+
border-radius: 5px;
103+
cursor: pointer;
104+
transition: background-color 0.3s ease;
105+
}
106+
107+
.register-button:hover {
108+
background-color: #005f46;
109+
}
110+
111+
/* Responsive Design */
112+
@media (max-width: 768px) {
113+
.navbar ul {
114+
flex-direction: column; /* Stack navigation items vertically */
115+
gap: 10px;
116+
padding: 0 10px;
11117
}
12-
13-
/* Navigation Bar */
14-
.navbar {
15-
background-color: #333;
16-
padding: 10px 0;
17-
position: sticky;
18-
top: 0;
19-
width: 100%;
20-
z-index: 1000;
21-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
118+
119+
.navbar ul li a {
120+
font-size: 14px;
121+
padding: 8px 15px; /* Reduce padding on smaller screens */
22122
}
23-
24-
.navbar ul {
25-
list-style-type: none;
26-
margin: 0;
27-
padding: 0;
28-
display: flex;
29-
justify-content: center;
30-
gap: 20px;
123+
124+
.form-container {
125+
padding: 20px; /* Reduce padding for smaller screens */
126+
margin-top: 30px;
31127
}
32-
33-
.navbar ul li {
34-
display: inline;
128+
129+
.signup-form {
130+
gap: 15px; /* Adjust gap between form elements */
35131
}
36-
37-
.navbar ul li a {
38-
color: white;
39-
text-decoration: none;
40-
font-size: 16px;
41-
padding: 10px 20px;
42-
transition: background-color 0.3s ease;
132+
133+
.form-group label {
134+
font-size: 13px;
135+
}
136+
137+
.form-group select,
138+
.form-group input {
139+
font-size: 13px;
140+
padding: 8px;
43141
}
44-
45-
.navbar ul li a:hover,
46-
.navbar ul li a.active {
47-
background-color: #007B5F;
48-
border-radius: 5px;
142+
143+
.register-button {
144+
font-size: 14px;
145+
padding: 8px;
49146
}
50-
51-
/* Form Container */
147+
}
148+
149+
@media (max-width: 480px) {
150+
.navbar ul {
151+
padding: 0; /* Remove extra padding for very small screens */
152+
}
153+
154+
.navbar ul li a {
155+
font-size: 12px;
156+
padding: 6px 10px;
157+
}
158+
52159
.form-container {
53-
background-color: white;
54-
padding: 30px;
55-
width: 100%;
56-
max-width: 400px;
57-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
58-
border-radius: 10px;
59-
margin-top: 50px;
160+
padding: 15px; /* Reduce padding for very small screens */
161+
border-radius: 5px; /* Slightly less rounded corners */
60162
}
61-
62-
/* Form Styling */
163+
63164
.signup-form {
64-
display: flex;
65-
flex-direction: column;
66-
gap: 20px;
67-
}
68-
69-
.form-group {
70-
display: flex;
71-
flex-direction: column;
72-
gap: 5px;
165+
gap: 10px;
73166
}
74-
167+
75168
.form-group label {
76-
font-size: 14px;
77-
font-weight: bold;
78-
color: #333;
169+
font-size: 12px;
79170
}
80-
171+
81172
.form-group select,
82173
.form-group input {
83-
padding: 10px;
84-
font-size: 14px;
85-
border: 1px solid #ccc;
86-
border-radius: 5px;
87-
outline: none;
88-
transition: border-color 0.3s ease;
174+
font-size: 12px;
175+
padding: 6px;
89176
}
90-
91-
.form-group select:focus,
92-
.form-group input:focus {
93-
border-color: #007B5F;
94-
}
95-
177+
96178
.register-button {
97-
background-color: #007B5F;
98-
color: white;
99-
border: none;
100-
padding: 10px;
101-
font-size: 16px;
102-
border-radius: 5px;
103-
cursor: pointer;
104-
transition: background-color 0.3s ease;
105-
}
106-
107-
.register-button:hover {
108-
background-color: #005f46;
179+
font-size: 12px;
180+
padding: 6px;
109181
}
110-
182+
}

0 commit comments

Comments
 (0)