-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (106 loc) · 7.26 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Donate Today</title>
</head>
<body>
<!-- header>.banner>h1.banner-title{Let's Help Those Who Are More In Need}+p.banner-description>lorem30^.banner-btn-container>button.primary-btn{Donate Now} -->
<header>
<div class="banner">
<h1 class="banner-title">Let's Help Those Who Are More In Need</h1>
<p class="banner-description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit facere iusto ipsa neque, est culpa corporis dolores quisquam possimus. Alias error tempora quisquam natus soluta dolore. Reprehenderit omnis libero nihil.</p>
<div class="banner-btn-container"><button class="primary-btn">Donate Now</button></div>
</div>
</header>
<main>
<!-- section.donate-today>.donate-today-container>h2.section-title{Doante Toady}+p.description>lorem20^.money-container>div.taka-div{100tk}+.primary-clolor-div{200tk}+div.taka-div{500tk}+div.taka-div{1000tk}+div.taka-div{5000tk}^p.other-amount{Other Amount (Taka)}+hr+.donate-today-btn-container>button.primary-btn{Donate Now} -->
<section class="donate-today">
<div class="donate-today-container">
<h2 class="section-title">Doante Toady</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet obcaecati itaque earum, alias eligendi nulla. Illum ullam velit tempora. Doloribus.</p>
<div class="money-container">
<div class="taka-div">100tk</div>
<div class="primary-clolor-div">200tk</div>
<div class="taka-div">500tk</div>
<div class="taka-div">1000tk</div>
<div class="taka-div">5000tk</div>
</div>
<p class="other-amount">Other Amount (Taka)</p>
<hr>
<div class="donate-today-btn-container"><button class="primary-btn">Donate Now</button></div>
</div>
</section>
<!-- section.donate-plan>h2.section-title{Our Donate Plan}+p.donate-description>lorem40^.donate-card-container>.food-card>img+h6.card-title{Food For A Family}+p.card-description>lorem15^^.shelter-card>img+h6.card-title{Shelter for a family}+p.card-description>lorem15^^.education-card>img+h6.card-title{Education for a child}+p.card-description>lorem15 -->
<section class="donate-plan">
<h2 class="section-title">Our Donate Plan For 2024</h2>
<p class="donate-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quam dolorum officia hic numquam enim non, atque, aliquid eligendi tempora, voluptate ad optio aliquam repudiandae nobis iure amet nisi assumenda nemo nostrum explicabo? Odio sed quidem porro fugit dolor debitis.</p>
<div class="donate-card-container">
<div class="food-card">
<img src="resources/icons/food.png" alt="food icon">
<h6 class="card-title">Food For A Family</h6>
<p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi molestiae veritatis vero debitis! Repellendus, itaque.</p>
</div>
<div class="shelter-card">
<img src="resources/icons/shelter.png" alt="shelter icon">
<h6 class="card-title">Shelter for a family</h6>
<p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi molestiae veritatis vero debitis! Repellendus, itaque.</p>
</div>
<div class="education-card">
<img src="resources/icons/Frame-1.png" alt="education icon">
<h6 class="card-title">Education for a child</h6>
<p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi molestiae veritatis vero debitis! Repellendus, itaque.</p>
</div>
</div>
</section>
<!-- section.depend>.flex-container>.flex-data>h2.flex-title{Their lives depend on your donation}+p.flex-text>lorem15+p.flex-text>lorem10^button.primary-btn{How To Contribute?}^^^img -->
<section class="depend">
<div class="flex-container">
<div class="flex-data">
<h2 class="flex-title">Their lives depend on your donation</h2>
<p class="flex-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptates dolorum dignissimos earum quasi deleniti?
<p class="flex-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, distinctio.</p>
</p>
<button class="primary-btn">How To Contribute?</button>
</div>
<img class="flex-image" src="resources/images/donation7.jpg" alt="poor people's picture">
</div>
</section>
<section class="survive">
<div class="flex-container">
<img class="flex-image" src="resources/images/donation13.jpg" alt="poor people's picture">
<div class="flex-data">
<h2 class="flex-title">Their lives depend on your donation</h2>
<p class="flex-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptates dolorum dignissimos earum quasi deleniti?
<p class="flex-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, distinctio.</p>
</p>
<button class="primary-btn">How To Contribute?</button>
</div>
</div>
</section>
<!-- section.update>h2.section-title{Get My Updates}+p.description>lorem20^.subscribe-container>.email>input:email^.subscribtion>button.btn-subscribe{Subscribe} -->
<section class="update">
<h2 class="section-title">Get My Updates</h2>
<p class="donate-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore, voluptatibus. Expedita, sequi assumenda ratione placeat nesciunt illo aliquid repellat nemo.</p>
<div class="subscribe-container">
<div class="email"><input type="email" name="email" id="" placeholder="Email"></div>
<div class="subscribtion"><button class="btn-subscribe">Subscribe</button></div>
</div>
</section>
</main>
<footer>
<h3 class="footer-title">Be Humble</h3>
<p class="footer-text">I'm gonna do it</p>
</footer>
</body>
</html>