Skip to content

Commit 8de3997

Browse files
hayjmuirhayjmuir
committed
asdf
1 parent 5393ad9 commit 8de3997

File tree

2 files changed

+216
-2
lines changed

2 files changed

+216
-2
lines changed

‎index.html‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,41 @@
77
<link rel="stylesheet" href="styles.css">
88
</head>
99
<body>
10-
<!-- Add your HTML here -->
10+
<!-- Hero Section: This is the main banner at the top of the page -->
11+
<section class="hero">
12+
<!-- Main headline -->
13+
<h1>Clean Water for Everyone</h1>
14+
<!-- Subheadline -->
15+
<p>Join us in bringing safe, clean water to communities in need.</p>
16+
</section>
17+
18+
<!-- Story Section: This tells the story of the nonprofit -->
19+
<section class="story">
20+
<h2>Our Story</h2>
21+
<p>
22+
23+
</section>
24+
25+
<!-- Real-World Impact Story Section -->
26+
<section class="impact-story">
27+
<!-- Section headline -->
28+
<h2>Real Impact: Meet Amina</h2>
29+
<!-- Container for image and text -->
30+
<div class="impact-content">
31+
<!-- Impact image -->
32+
<img src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=600&q=80" alt="Amina smiling with clean water" class="impact-image">
33+
<!-- Impact story text -->
34+
<p>
35+
Amina used to walk miles every day to collect water for her family. Thanks to your support, her village now has a clean water well. Amina can go to school and her family is healthier and happier.
36+
</p>
37+
</div>
38+
</section>
39+
40+
<!-- Call-to-Action Section: This encourages visitors to take action -->
41+
<section class="call-to-action">
42+
<h2>Make a Difference</h2>
43+
<p>Your support can help save lives. Every donation brings us closer to a world with clean water for all.</p>
44+
<a href="#" class="donate-button">Donate Now</a>
45+
</section>
1146
</body>
1247
</html>

‎styles.css‎

Lines changed: 180 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,183 @@ Fonts:
1616
- Proxima Nova
1717
- Avenir
1818
19-
*/
19+
*/
20+
21+
/*
22+
Charity: Water Landing Page Styles
23+
This CSS uses the provided color palette and beginner-friendly styles.
24+
*/
25+
26+
/* Set up the main font and background color for the whole page */
27+
body {
28+
background-color: #f4f8fb; /* Soft light blue for a fresh look */
29+
font-family: 'Avenir', 'Proxima Nova', Arial, sans-serif;
30+
margin: 0;
31+
padding: 0;
32+
color: #222;
33+
}
34+
35+
/* Add a slight shadow and rounded corners to each section for depth */
36+
section {
37+
background: #fff; /* White background for sections */
38+
border-radius: 12px; /* Rounded corners */
39+
box-shadow: 0 2px 8px rgba(46, 157, 247, 0.07); /* Soft blue shadow */
40+
margin: 24px 10px; /* Space between sections */
41+
padding: 24px 16px;
42+
}
43+
44+
/* Hero Section Styles */
45+
.hero {
46+
position: relative; /* Needed for overlay */
47+
/* Set a background image that covers the whole section */
48+
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1500&q=80');
49+
background-size: cover; /* Make the image cover the whole area */
50+
background-position: center; /* Center the image */
51+
background-repeat: no-repeat;
52+
color: #fff; /* White text for contrast */
53+
text-align: center; /* Center the text */
54+
padding: 60px 20px; /* Add space above and below */
55+
border-radius: 0 0 16px 16px; /* Only round bottom corners */
56+
57+
/* Add a dark overlay for better text readability */
58+
/* This uses a simple linear-gradient overlay */
59+
background-blend-mode: darken;
60+
background-color: rgba(46, 157, 247, 0.45); /* Blue overlay */
61+
}
62+
63+
/* Make the headline bold and modern */
64+
.hero h1 {
65+
font-size: 2.5em;
66+
font-weight: bold;
67+
letter-spacing: 1px;
68+
margin-bottom: 15px;
69+
text-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Soft shadow for readability */
70+
}
71+
72+
/* Style the subheadline */
73+
.hero p {
74+
font-size: 1.2em;
75+
margin-top: 0;
76+
text-shadow: 0 1px 4px rgba(0,0,0,0.12);
77+
}
78+
79+
/* Story Section Styles */
80+
.story {
81+
background-color: #8BD1CB; /* Secondary Light Blue */
82+
color: #222;
83+
text-align: center;
84+
padding: 30px 20px;
85+
}
86+
87+
/* Add accent color to section headings */
88+
h2 {
89+
color: #2E9DF7; /* Primary blue */
90+
margin-top: 0;
91+
font-weight: bold;
92+
}
93+
94+
/* Call-to-Action Section Styles */
95+
.call-to-action {
96+
background-color: #FFC907; /* Primary Yellow */
97+
color: #222;
98+
text-align: center;
99+
padding: 30px 20px;
100+
}
101+
102+
/* Style the impact story image */
103+
.impact-image {
104+
width: 100%;
105+
max-width: 320px;
106+
border-radius: 10px;
107+
margin-bottom: 16px;
108+
box-shadow: 0 2px 8px rgba(46, 157, 247, 0.10);
109+
}
110+
111+
/* Donate Button Styles */
112+
.donate-button {
113+
display: inline-block;
114+
background-color: #4FCB53; /* Green */
115+
color: #fff;
116+
padding: 14px 32px;
117+
text-decoration: none;
118+
border-radius: 6px;
119+
font-weight: bold;
120+
font-size: 1.1em;
121+
margin-top: 18px;
122+
box-shadow: 0 2px 8px rgba(79, 203, 83, 0.10);
123+
transition: background 0.3s, transform 0.2s;
124+
border: none;
125+
cursor: pointer;
126+
}
127+
128+
/* Change button color when hovered */
129+
.donate-button:hover {
130+
background-color: #159A48; /* Dark Green */
131+
transform: translateY(-2px) scale(1.04); /* Slight lift */
132+
}
133+
134+
/* Add some spacing between sections */
135+
section {
136+
margin-bottom: 20px;
137+
}
138+
139+
/*
140+
Media Queries for Responsive Design
141+
Media queries help make your website look good on different screen sizes,
142+
like phones (small screens) and computers (large screens).
143+
*/
144+
145+
/* This media query applies styles when the screen is 600px wide or less (like on most phones) */
146+
@media (max-width: 600px) {
147+
/* Make hero section padding smaller on small screens */
148+
.hero {
149+
padding: 32px 8px;
150+
font-size: 1em;
151+
}
152+
153+
/* Make headline font size smaller so it fits on small screens */
154+
.hero h1 {
155+
font-size: 1.4em;
156+
}
157+
158+
/* Make subheadline font size smaller */
159+
.hero p {
160+
font-size: 1em;
161+
}
162+
163+
/* Make story and call-to-action sections have less padding */
164+
.story,
165+
.call-to-action,
166+
.donation-section {
167+
padding: 14px 8px;
168+
}
169+
170+
/* Make impact story image smaller and stack above the text */
171+
.impact-content {
172+
display: block; /* Stack items vertically */
173+
text-align: center;
174+
}
175+
176+
.impact-image {
177+
width: 90%; /* Make image take up most of the width */
178+
max-width: 220px;
179+
}
180+
}
181+
182+
/* This media query applies styles when the screen is wider than 600px (like on tablets and computers) */
183+
@media (min-width: 601px) {
184+
/* Show image and text side by side in the impact story */
185+
.impact-content {
186+
display: flex; /* Place items in a row */
187+
align-items: center; /* Vertically center items */
188+
justify-content: center; /* Center the whole group */
189+
gap: 28px; /* Space between image and text */
190+
text-align: left;
191+
max-width: 800px;
192+
margin: 0 auto;
193+
}
194+
195+
.impact-image {
196+
width: 300px;
197+
}
198+
}

0 commit comments

Comments
 (0)