-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (173 loc) · 9.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio. Ankul MAddheshiya</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Cambay:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Portfolio</div>
<div class="right">
<ul>
<li class="hov">
<a href="#herosection">Home</a>
<a href="#About">About</a>
<a href="#portfoliopage">Portfolio page</a>
<a href="#contact">Contact</a>
<i class="ri-menu-add-fill"></i>
</li>
</ul>
</div>
</nav>
</header>
<!-- herosection -->
<main>
<section class="herosection">
<div class="lefthersosection">
<div class="T1">Hello, it's Me</div>
<div class="T2">Ankul Maddheshiya</div>
<div class="T3"> And I'm a <span id="element"></span></div>
<div class="T4">I'm A Engineering Student at MMMUT, gorakhpur. I'm a <br>
Mechanical Engineering student, Btech 2nd year. I'm Passinated<br>
about technology and try to learn new skill espically related to programming.
</div>
<div class="social-media-icon">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div><a href="#" class="btn">Download CV</a></div>
</div>
</div>
<div class="rightherosection">
<img src="./Images/A1.png" alt="Ankul home page photo">
</div>
</section>
<hr>
<!-- about section -->
<section class="About" id="About">
<div class="Aboutleft">
<div class="aleft">
<img src="./Images/b2.jpg" alt="">
</div>
</div>
<div class="Aboutright">
<h2>ABOUT <span class="Sm">Me..</span></h2>
<h3>Frontend Developer</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, ducimus nam. Architecto esse
perferendis possimus aspernatur fugit, ipsam atque molestias similique facere repellendus nam odit!
Officiis eos saepe harum laudantium illum deserunt iste dignissimos ab ipsum consequuntur, enim
nostrum odio fuga labore repellendus. Dolore qui sit sequi quidem veniam pariatur sapiente nobis
temporibus! Voluptatum asperiores illo impedit deserunt ipsum quisquam sequi recusandae commodi
veritatis. Dignissimos eligendi quisquam recusandae libero non tenetur ipsa, delectus sunt possimus
natus? Nisi quibusdam dicta quisquam vel, natus alias amet. Voluptates in quibusdam quo excepturi
itaque accusantium. Doloremque quibusdam eligendi earum officiis ut quidem odio sit.</p>
<div class="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium pariatur, reprehenderit ipsam
minima omnis temporibus quod eius sit facilis ipsa alias eos cupiditate, magnam possimus quas dicta
ex? Labore cupiditate, placeat amet dolorem asperiores minus atque doloremque aliquam dolor facilis
accusamus. Aliquam sed voluptatum fugit quo repellendus totam beatae deserunt laudantium earum
libero.
</div>
<div><a href="#" class="more">More About</a></div>
</div>
</section>
<hr>
<!-- Portfolio page -->
<section class="portfoliopage" id="portfoliopage">
<h2>Portfolio Page..</h2>
<div class="cont">
<div class="a1">
<img src="./Images/web-development.jpg" alt="">
<h3>Web Developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est
corporis,maiores assumenda eos aut perferendis totam ipsam
accusantium dolorem voluptas
esse sapiente nostrum? Officiis voluptas nesciunt laboriosam repudiandae vel.
</p>
<div><a href="#" class="Amore">More About</a></div>
</div>
<div class="a2">
<img src="./Images/graphic-design-examples.jpeg" alt="">
<h3>Graphic desineer</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus ipsum accusamus incidunt
culpa reprehenderit ratione hic officiis earum deserunt a cumque quidem, inventore itaque
delectus et minima voluptas nihil!</p>
<div><a href="#" class="Bmore">More About</a></div>
</div>
<div class="a3">
<img src="./Images/NEM_mechanical.jpg" alt="">
<h3>Mechanical Engineer</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis vel facilis officia unde,
temporibus qui enim quis quia! Praesentium, laboriosam itaque dignissimos officiis magni
voluptas repellendus! Minus molestiae optio dignissimos.</p>
<div><a href="#" class="Cmore">More About</a></div>
</div>
</div>
</section>
<hr>
<!-- conatct section -->
<section class="contactpage" id="contact">
<div class="contactleft">
<div class="contacth1">Have a Question</div>
<div class="contactp">
<div class="contactp1">
We're here to help! Fill this form or reach us via email or phone. I am always available to help
you get the best experiance. If You you have any issue then fell free to contact.
Everyone gets a personalize response, so please allow 24 hours during
bussines hours for a reply.
I am Available 24x7
</div>
<div class="maillogo"> <i class="ri-mail-send-line"></i> [email protected]</div>
<div class="contactnumber"><i class="ri-smartphone-line"></i> +91-8471XXXXX8</div>
<div class="chat"> <i class="ri-corner-down-right-line"></i> Fill this form to contact with me
</div>
</div>
</div>
<!-- <div class="contactright"> -->
<!-- <div class="contactheading">Fill this Form...</div> -->
<div class="container">
<form action="#">
<div class="input-box">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</div>
<div class="mobnumber">
<input type="number" placeholder="Mobile Number">
</div>
<div class="emainum">
<input type="email" placeholder="Email Address">
</div>
<div class="textarean">
<textarea name="" id="" cols="" rows="" placeholder="Your Message"></textarea>
</div>
<input type="submit" value="Send Message" class="finalbtn">
</form>
</section>
<!-- footer -->
<footer class="footer">
<div class="footertext">
<p>Copyright © 2024 by @Ankul_Maddheshiya | All Right Reserced.</p>
</footer>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script>
var typed = new Typed('#element', {
strings: ['Web Developer..', 'Mechanical Engineer..', 'Graphic desineer..', 'Web Developer..'],
typeSpeed: 100,
});
</script>/
</body>
</html>