-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (233 loc) · 15.2 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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plan Of The Year - 2024</title>
<!-- Tailwind & Daisy UI -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Font -->
<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=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/ee2747d84d.js" crossorigin="anonymous"></script>
<!-- Style Sheet Link -->
<link rel="stylesheet" href="style.css">
</head>
<body class="ws">
<header>
<!-- Header -->
<div class="hero min-h-screen mb-[140px]" style="background-image: url(./Media/images/banner/banner2.png);">
<!-- Navbar -->
<div class="navbar mb-[850px] flex justify-between lg:px-[210px]">
<div class="">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow rounded-box w-52">
<li><a href="./index.html">HOME</a></li>
<li><a>SOCIAL LINK</a>
<ul class="p-2">
<li><a href="https://www.facebook.com/fatema.a5878/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/fatema.a5878/" target="_blank">Instagram</a></li>
<li><a href="#" target="_blank">LinkedIn</a></li>
<li><a href="https://twitter.com/fatema_a5878" target="_blank">Twitter</a></li>
</ul>
</li>
<li><a href="./index2.html">CONTACT</a></li>
</ul>
</div>
<a class="text-xl"><img src="./Media/images/logo3.png" class="w-32 lg:w-40" alt=""></a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="./index.html">HOME</a></li>
<li>
<details>
<summary>SOCIAL LINK</summary>
<ul class="p-2">
<li><a href="https://www.facebook.com/fatema.a5878/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/fatema.a5878/" target="_blank">Instagram</a></li>
<li><a href="#" target="_blank">LinkedIn</a></li>
<li><a href="https://twitter.com/fatema_a5878" target="_blank">Twitter</a></li>
</ul>
</details>
</li>
<li><a href="./index2.html">CONTACT</a></li>
</ul>
</div>
</div>
<!-- Banner -->
<div class="">
<div class="lg:ml-[1100px] pt-0 mr-4 lg:mr-[230px]">
<h1 class="mb-6 ml-[0px] text-4xl lg:text-6xl text-[#151414] leading-snug font-bold text-right">All Thinks Are Possible If You believe</h1>
<p class="mb-8 ml-3 lg:ml-0 text-sm lg:text-base mr-[10px] text-[#444343] text-right">"All Things Are Possible If You Believe" emphasizes the profound impact of belief on achieving goals. Through unwavering faith and determination, individuals can surmount obstacles and accomplish remarkable feats in life.</p>
<a href="./index2.html"><button class="btn btn-primary w-[160px] bg-[#005FAC] text-[#fff] hover:bg-[#fff] hover:text-[#005FAC] border-2 border-inherit
border-solid hover:border-[#005FAC] ml-[200px] lg:ml-[410px]">Contact Us</button></a>
</div>
</div>
</div>
<div>
</div>
</header>
<!-- Main -->
<main>
<section class="flex lg:flex-row flex-col gap-[88px] items-center mx-5 lg:mx-[350px] mb-[100px] lg:mb-[190px]">
<div class=""><img src="./Media/images/person.png" alt=""></div>
<div>
<h1 class="text-[#151414] text-4xl font-bold mb-6">My target in this<br> year<span class="text-xl">(2024)</span></h1>
<p class="text-base text-[#444343] mb-4">Reflecting on the failures of the previous year,<br> I acknowledge setbacks as learning opportunities.<br> They've taught resilience, determination, and the<br> importance of perseverance in pursuit of future success.</p>
<div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-solid fa-person-praying text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Making a habit of praying 5 times a day.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-regular fa-calendar-check text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Get GPA 5 In The HSC Exam.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-solid fa-code text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Complete the full Web Development Course.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-regular fa-calendar-check text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Become a Jr. Web Developer.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-brands fa-angellist text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Become a Pro-label English Speaker.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-solid fa-user-nurse text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Get admission into Medical for doing BSC Nursing.</p>
</div>
<div class="flex gap-2 items-center mb-2">
<i class="fa-solid fa-handshake text-[#22c55e] text-2xl"></i>
<p class="text-base text-[#444343]">- Get hired into a Job.(If possible)</p>
</div>
</div>
</div>
</section>
<section class="mb-[80px] lg:mb-[130px]">
<h1 class="text-center text-4xl font-bold text-[#151414] mb-12">My Plans</h1>
<div class="grid lg:grid-cols-4 mx-8 lg:mx-32 gap-4 mb-12">
<!-- ------------------------------------------ -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl transition-all box">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/web.png" alt="Web" class="rounded-xl mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Web Development</h2>
<p class="text-[#737272] text-xl font-medium ">I have start the work</p>
</div>
</div>
<!-- -------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl transition-all box">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/study.png" alt="Study" class="rounded-xl w-40 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Complete HSC</h2>
<p class="text-[#737272] text-xl font-medium">Study hard to complete HSC exam properly</p>
</div>
</div>
<!-- ----------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl box transition-all">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/js.png" alt="JS" class="rounded-xl w-28 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Javascript</h2>
<p class="text-[#737272] text-xl font-medium">I want to learn</p>
</div>
</div>
<!-- ----------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl box transition-all">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/achivement.png" alt="Achivement" class="rounded-xl w-40 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Achieve A<sup>+</sup></h2>
<p class="text-[#737272] text-xl font-medium">Get GPA 5 In The HSC Exam</p>
</div>
</div>
</div>
<div class="grid lg:grid-cols-3 mx-8 lg:mx-72 gap-4">
<!-- ----------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl box transition-all">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/girl.png" alt="Achivement" class="rounded-xl w-40 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Learning English</h2>
<p class="text-[#737272] text-xl font-medium">Become a Pro-label English Speaker</p>
</div>
</div>
<!-- ----------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl box transition-all">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/stethoscope.png" alt="Achivement" class="rounded-xl w-40 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Get admission</h2>
<p class="text-[#737272] text-xl font-medium">Get admission into Medical for doing BSC Nursing</p>
</div>
</div>
<!-- ----------------------------------------------- -->
<div class="card w-80 h-[330px] bg-base-100 shadow-xl box transition-all">
<figure class="px-10 pt-4">
<img src="./Media/images/icons/hired.png" alt="Hired" class="rounded-xl w-40 mb-4" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-2xl font-bold text-[#151414] mb-4">Get Hire</h2>
<p class="text-[#737272] text-xl font-medium">Get hired into a Job in International/National Industries</p>
</div>
</div>
<!-- ----------------------------------------------- -->
</div>
</section>
<!-- -------------------------------------------------------------------------------------------------- -->
<section class="mb-[80px] lg:mb-[130px] px-5 lg:px-0">
<div class="card w-full bg-base-100 image-full lg:px-[383px]">
<figure><img src="./Media/images/watch.png" alt="Watch" class="relative" />
<img src="./Media/images/gradient1.png" alt="" class="absolute">
</figure>
<div class="card-body pl-8 lg:pl-[64px] pt-[40px] lg:pt-[60px]">
<h2 class="card-title font-bold tect-[#fff] text-4xl leading-snug">Always keep a positive<br> mindset</h2>
<a href="index2.html"><button class="btn btn-primary w-[160px] bg-[#fff] text-[#005FAC] border-none hover:bg-[#005FAC] hover:text-[#fff] border-2 border-inherit border-solid">Contact Now</button></a>
</div>
</div>
</section>
</main>
<footer class="w-100% bg-[#151414]">
<div class="pl-4 lg:pl-[230px] pt-10 lg:pt-[130px] pb-[100px] flex flex-col lg:flex-row gap-5 lg:gap-[480px]">
<div>
<h1 class="text-[#F8F8F8] font-bold text-4xl mb-4">It's Fatema</h1>
<p class="text-base text-[#C7C8CC] mb-6">Thanks for visiting my planing related website for 2024 year.<br> And that's not enough, I will be updated my progress on this plan.<br> You can see those updates on this website. So, Stay tuned🥰<br>You can also connect with me on another social media platform.<br> You can follow me on other sites also.(Link below...)</p>
<p class="text-base text-[#C7C8CC] mb-4">Email : [email protected]</p>
<p class="text-base text-[#C7C8CC] mb-8">Address : Dhaka,<abbr title="Bangladesh">BD</abbr></p>
<div class="flex gap-3 icon">
<a href="https://www.facebook.com/fatema.a5878/" target="_blank"><img src="./Media/images/icons/fb.png" class="w-10 transition-all" alt="fb"></a>
<a href="https://twitter.com/fatema_a5878" target="_blank"><img src="./Media/images/icons/twitter.png" class="w-10 transition-all" alt="twitter"></a>
<a href="#" target="_blank"><img src="./Media/images/icons/Linkedin.png" class="w-10 transition-all" alt="Linkedin"></a>
</div>
</div>
<div>
<h2 class="mb-8 font-semibold text-2xl text-[#fff]">E-mail</h2>
<input type="email" name="email" id="" placeholder="Enter your email" class="py-3 pl-5 pr-[100px] lg:pr-[155px] text-lg rounded-xl mb-4"><br>
<button class="btn btn-primary w-[160px] bg-[#005FAC] text-xl text-[#fff] border-none hover:bg-[#fff] hover:text-[#005FAC] border-2 border-inherit border-solid">Send</button>
</div>
</div>
<!-- Copyright -->
<div class="footer footer-center p-4 bg-base-300 text-base-content">
<aside>
<p>Copyright © 2024 - All right reserved by Fatema Akter</p>
</aside>
</div>
</footer>
</body>
</html>