Skip to content

Commit 54c4cc6

Browse files
RealMathModelRealMathModel
authored
Add files via upload
1 parent cfc5049 commit 54c4cc6

3 files changed

Lines changed: 668 additions & 0 deletions

File tree

‎test/index.html‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Crowdfunding — Participate & Win</title>
7+
8+
<!-- shield logo as favicon -->
9+
<link rel="icon" href="images/logo.jpg">
10+
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
15+
<link rel="stylesheet" href="style.css">
16+
</head>
17+
<body>
18+
19+
<!-- ===== HEADER ===== -->
20+
<header>
21+
<nav class="navbar">
22+
<a href="#home" class="logo">
23+
<img src="images/logo.jpg" alt="Crowdfunding logo">
24+
</a>
25+
26+
<button class="burger" id="burger" aria-label="menu"><i class="fa-solid fa-bars"></i></button>
27+
28+
<ul class="nav-links" id="navLinks">
29+
<li><a href="#home">Home</a></li>
30+
<li><a href="#about">About</a></li>
31+
<li><a href="#services">Services</a></li>
32+
<li><a href="#testimonials">Testimonials</a></li>
33+
<li><a href="#contact">Contact</a></li>
34+
<li><a href="#hero-form" class="btn btn-outline btn-sm">Get it now</a></li>
35+
</ul>
36+
</nav>
37+
38+
<!-- hero / banner -->
39+
<section class="hero" id="home">
40+
<div class="hero-left">
41+
<h1>Crowdfunding</h1>
42+
<p class="hero-sub">Participate in the campaign for a chance to win</p>
43+
44+
<form class="campaign-form" id="hero-form" onsubmit="return false;">
45+
<input type="text" placeholder="Enter your name">
46+
<input type="email" placeholder="Enter your email">
47+
<select>
48+
<option value="" disabled selected>Enter amount</option>
49+
<option>$50</option>
50+
<option>$100</option>
51+
<option>$250</option>
52+
<option>$500</option>
53+
</select>
54+
55+
<div class="raised-nums"><strong>$6,850</strong> <span>/ $20,000</span></div>
56+
57+
<button type="submit" class="btn btn-blue btn-block">PARTICIPATE</button>
58+
</form>
59+
</div>
60+
61+
<div class="hero-right">
62+
<img src="images/hero-illustration.jpg" alt="crowdfunding illustration">
63+
</div>
64+
</section>
65+
66+
<!-- social row under hero (like the video) -->
67+
<div class="hero-socials">
68+
<a href="#" aria-label="facebook"><i class="fa-brands fa-facebook-f"></i></a>
69+
<a href="#" aria-label="instagram"><i class="fa-brands fa-instagram"></i></a>
70+
<a href="#" aria-label="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
71+
<a href="#" aria-label="whatsapp"><i class="fa-brands fa-whatsapp"></i></a>
72+
</div>
73+
</header>
74+
75+
76+
<!-- ===== MAIN ===== -->
77+
<main>
78+
79+
<!-- ABOUT -->
80+
<section class="about" id="about">
81+
<div class="about-img">
82+
<img src="images/hero-illustration.jpg" alt="about crowdfunding">
83+
</div>
84+
<div class="about-text">
85+
<span class="eyebrow">ABOUT US</span>
86+
<h2>Turning small pledges into big things</h2>
87+
<p>
88+
At Crowdfunding we connect people who have an idea with people who want
89+
to see it happen. Every campaign is a chance to back something you
90+
believe in — and maybe win along the way. It's simple, transparent, and
91+
built around a community that shows up for each other.
92+
</p>
93+
<ul class="check-list">
94+
<li><i class="fa-solid fa-check"></i> Start or join a campaign in minutes</li>
95+
<li><i class="fa-solid fa-check"></i> Secure and transparent payments</li>
96+
<li><i class="fa-solid fa-check"></i> Track how close each goal is in real time</li>
97+
<li><i class="fa-solid fa-check"></i> A real team behind you, from A to Z</li>
98+
</ul>
99+
<a href="#contact" class="btn btn-blue">Get in touch</a>
100+
</div>
101+
</section>
102+
103+
104+
<!-- SERVICES (matches the video: intro + 4 cards) -->
105+
<section class="services" id="services">
106+
<h2 class="center-title">Services</h2>
107+
<p class="services-intro">
108+
At Crowdfunding, we don't believe in one-size-fits-all. We combine industry
109+
expertise with a forward-thinking approach to help you navigate challenges and
110+
seize new opportunities. Whether you are looking to scale, optimize, or innovate,
111+
our team is here to guide the way.
112+
</p>
113+
114+
<div class="cards">
115+
<div class="card">
116+
<img src="images/icon-getting-started.jpg" alt="">
117+
<span class="num">01</span>
118+
<h3>Getting started</h3>
119+
<p>All you need from A to Z to getting started are available.</p>
120+
</div>
121+
122+
<div class="card">
123+
<img src="images/icon-pricing.jpg" alt="">
124+
<span class="num">02</span>
125+
<h3>Pricing List</h3>
126+
<p>We have several plans that are best suited for you.</p>
127+
</div>
128+
129+
<div class="card">
130+
<img src="images/icon-trust.jpg" alt="">
131+
<span class="num">03</span>
132+
<h3>Trust</h3>
133+
<p>Trust helps foster a productive environment.</p>
134+
</div>
135+
136+
<div class="card">
137+
<img src="images/icon-collaboration.jpg" alt="">
138+
<span class="num">04</span>
139+
<h3>Collaboration</h3>
140+
<p>Working together to achieve a goal.</p>
141+
</div>
142+
</div>
143+
</section>
144+
145+
146+
<!-- PROMO -->
147+
<section class="promo">
148+
<div class="promo-inner">
149+
<h2>Have an idea worth funding?</h2>
150+
<p>Launch your first campaign today and let the community help you make it real.</p>
151+
<a href="#contact" class="btn btn-light">Start a campaign</a>
152+
</div>
153+
</section>
154+
155+
156+
<!-- TESTIMONIALS -->
157+
<section class="testimonials" id="testimonials">
158+
<h2 class="center-title">What people say</h2>
159+
<div class="quotes">
160+
<article class="quote">
161+
<div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
162+
<p>"Reached my goal in less than a week. The whole process was smooth and the team actually helped me."</p>
163+
<div class="person">
164+
<span class="avatar" style="background:#2f5fe0">OH</span>
165+
<div><strong>Omar Haddad</strong><span>Campaign creator</span></div>
166+
</div>
167+
</article>
168+
169+
<article class="quote">
170+
<div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
171+
<p>"Professional and creative. I backed three projects here and each one kept me updated the whole way."</p>
172+
<div class="person">
173+
<span class="avatar" style="background:#e8557f">SM</span>
174+
<div><strong>Sara Mansour</strong><span>Backer</span></div>
175+
</div>
176+
</article>
177+
178+
<article class="quote">
179+
<div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i></div>
180+
<p>"Simple, transparent, trustworthy. Exactly what a crowdfunding platform should feel like."</p>
181+
<div class="person">
182+
<span class="avatar" style="background:#16233d">DC</span>
183+
<div><strong>Daniel Carter</strong><span>Founder</span></div>
184+
</div>
185+
</article>
186+
</div>
187+
</section>
188+
189+
190+
<!-- CONTACT -->
191+
<section class="contact" id="contact">
192+
<h2 class="center-title">Contact us</h2>
193+
<div class="contact-wrap">
194+
<form class="contact-form" id="contactForm" novalidate>
195+
<div class="field">
196+
<label for="name">Full name</label>
197+
<input type="text" id="name" placeholder="Jane Doe" required>
198+
</div>
199+
<div class="field">
200+
<label for="email">Email</label>
201+
<input type="email" id="email" placeholder="jane@email.com" required>
202+
</div>
203+
<div class="field">
204+
<label for="subject">Subject</label>
205+
<input type="text" id="subject" placeholder="I'd like to start a campaign">
206+
</div>
207+
<div class="field">
208+
<label for="message">Message</label>
209+
<textarea id="message" rows="5" placeholder="Tell us about your idea..." required></textarea>
210+
</div>
211+
<button type="submit" class="btn btn-blue">Send message</button>
212+
<p class="form-note" id="formNote"></p>
213+
</form>
214+
215+
<aside class="contact-info">
216+
<h3>Get in touch</h3>
217+
<p>Questions about a campaign? Reach out, we usually reply within a day.</p>
218+
<ul>
219+
<li><span class="ci-icon"><i class="fa-solid fa-envelope"></i></span>
220+
<div><strong>Email</strong><a href="mailto:hello@crowdfunding.com">hello@crowdfunding.com</a></div></li>
221+
<li><span class="ci-icon"><i class="fa-solid fa-phone"></i></span>
222+
<div><strong>Phone</strong><a href="tel:+1800555123">+1 800 555 123</a></div></li>
223+
<li><span class="ci-icon"><i class="fa-solid fa-location-dot"></i></span>
224+
<div><strong>Office</strong><span>221 Campaign St, San Francisco</span></div></li>
225+
</ul>
226+
<div class="ci-socials">
227+
<a href="#" aria-label="facebook"><i class="fa-brands fa-facebook-f"></i></a>
228+
<a href="#" aria-label="instagram"><i class="fa-brands fa-instagram"></i></a>
229+
<a href="#" aria-label="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
230+
<a href="#" aria-label="whatsapp"><i class="fa-brands fa-whatsapp"></i></a>
231+
</div>
232+
</aside>
233+
</div>
234+
</section>
235+
236+
</main>
237+
238+
239+
<!-- ===== FOOTER ===== -->
240+
<footer>
241+
<div class="footer-grid">
242+
<div class="f-col f-about">
243+
<a href="#home" class="logo"><img src="images/logo.jpg" alt=""><span>Crowdfunding</span></a>
244+
<p>Back the ideas you believe in. Built for creators and the people who support them.</p>
245+
<div class="f-socials">
246+
<a href="#" aria-label="facebook"><i class="fa-brands fa-facebook-f"></i></a>
247+
<a href="#" aria-label="instagram"><i class="fa-brands fa-instagram"></i></a>
248+
<a href="#" aria-label="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
249+
<a href="#" aria-label="whatsapp"><i class="fa-brands fa-whatsapp"></i></a>
250+
</div>
251+
</div>
252+
<div class="f-col">
253+
<h4>Explore</h4>
254+
<a href="#home">Home</a>
255+
<a href="#about">About</a>
256+
<a href="#services">Services</a>
257+
<a href="#contact">Contact</a>
258+
</div>
259+
<div class="f-col">
260+
<h4>Support</h4>
261+
<a href="#">Help center</a>
262+
<a href="#">How it works</a>
263+
<a href="#">FAQ</a>
264+
<a href="#">Terms</a>
265+
</div>
266+
<div class="f-col">
267+
<h4>Newsletter</h4>
268+
<p>Get campaign highlights once a week.</p>
269+
<form class="news-form" onsubmit="return false;">
270+
<input type="email" placeholder="Your email">
271+
<button type="submit"><i class="fa-solid fa-paper-plane"></i></button>
272+
</form>
273+
</div>
274+
</div>
275+
<div class="copyright">
276+
<p>&copy; 2026 Crowdfunding. All rights reserved.</p>
277+
<p>Made with <i class="fa-solid fa-heart"></i> for people with ideas.</p>
278+
</div>
279+
</footer>
280+
281+
<script src="script.js"></script>
282+
</body>
283+
</html>

‎test/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// small bits of interactivity for the page
2+
3+
// --- mobile menu toggle ---
4+
const burger = document.getElementById("burger");
5+
const navLinks = document.getElementById("navLinks");
6+
7+
burger.addEventListener("click", () => {
8+
navLinks.classList.toggle("open");
9+
});
10+
11+
// close the menu after tapping a link (on phone)
12+
navLinks.querySelectorAll("a").forEach(link => {
13+
link.addEventListener("click", () => navLinks.classList.remove("open"));
14+
});
15+
16+
17+
// --- contact form validation ---
18+
const form = document.getElementById("contactForm");
19+
const note = document.getElementById("formNote");
20+
21+
form.addEventListener("submit", function (e) {
22+
e.preventDefault();
23+
24+
const name = document.getElementById("name").value.trim();
25+
const email = document.getElementById("email").value.trim();
26+
const msg = document.getElementById("message").value.trim();
27+
28+
const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
29+
30+
if (!name || !email || !msg) {
31+
note.textContent = "Please fill in your name, email and message.";
32+
note.className = "form-note err";
33+
return;
34+
}
35+
if (!emailOk) {
36+
note.textContent = "Hmm, that email doesn't look right.";
37+
note.className = "form-note err";
38+
return;
39+
}
40+
41+
note.textContent = "Thanks " + name + "! We'll get back to you soon.";
42+
note.className = "form-note ok";
43+
form.reset();
44+
});

0 commit comments

Comments
 (0)