-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
96 lines (96 loc) · 7.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/05f1bca9fd.js" crossorigin="anonymous"></script>
<title>{ Fabulous } | Developer</title>
</head>
<body>
<svg onclick="openNav();" style="fill:white;" class="toggle-btn" viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a class="item" onclick="closeNav()" href="#">Home</a>
<a class="item" onclick="closeNav()" href="#about">About</a>
<a class="item" onclick="closeNav()" href="#projects">Projects</a>
<a class="item" onclick="closeNav()" href="#feedback">Feedback</a>
</div>
<div id="particles-js" class="hero">
<h1 id="title"> <span id="mm">F</span>abulous</h1>
<h2>You are Fabulous.</h2>
<a id="know-more" href="#about">Know more <span class="bg"></span></a>
</div>
<div class="about">
<div class="text" id="about">
<h1 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true">About</h1>
<img data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" src="./media/chumma.png" class="img-fluid float-start shadow p-1 mb-2" width="50%" alt="...">
<p data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1000" data-aos-once="true">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, magni optio. At mollitia impedit, labore, eveniet ipsum numquam perspiciatis nobis beatae odio quibusdam inventore incidunt! Minima esse quidem tempora harum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque incidunt repellendus debitis eum atque eligendi laboriosam voluptatum error, tempora, nemo nisi optio sint sit delectus? Aliquam nihil quam earum magnam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, magni optio. At mollitia impedit, labore, eveniet ipsum numquam perspiciatis nobis beatae odio quibusdam inventore incidunt! Minima esse quidem tempora harum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque incidunt repellendus debitis eum atque eligendi laboriosam voluptatum error, tempora, nemo nisi optio sint sit delectus? Aliquam nihil quam earum magnam.
</p>
</div>
</div>
<div id="projects" class="projects">
<h1 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true">Projects</h1>
<div class="projectcards">
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" class="card shadow-lg">
<h2>Title</h2><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quos molestias rerum aliquid deleniti. Perferendis quae consectetur optio, doloribus nemo laudantium rerum sapiente eos aperiam illo voluptatibus quos mollitia pariatur.</p><br>
<div class="buttons"><a class="shadow-lg" target="_blank" href="https://universal-weather.netlify.app/">Live Demo</a><a class="shadow-lg" target="_blank" href="#weatherapp-js">Repo</a></div>
</div>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" class="card shadow-lg">
<h2>Title</h2><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quo ratione ullam adipisci ducimus eum consequuntur quasi non iste quia, earum inventore itaque magni voluptates accusamus at, quos, nemo quas!</p><br>
<div class="buttons"><a class="shadow-lg" target="_blank" href="https://the-clock.netlify.app/">Live Demo</a><a class="shadow-lg" target="_blank" href="#Js-Clock">Repo</a></div>
</div>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" class="card shadow-lg">
<h2>Title</h2><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda repudiandae consectetur deserunt voluptatibus quae atque tempora nam recusandae libero eum! Libero est maxime qui expedita officia aliquam nulla aut aspernatur.</p><br>
<div class="buttons"><a class="shadow-lg" target="_blank" href="#snake-game">Repo</a></div>
</div>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="true" class="card shadow-lg">
<h2>Title</h2><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga nemo veritatis quae nostrum sit alias molestias. Ad provident ipsa dignissimos atque nihil, pariatur facere totam eum nostrum reprehenderit fugiat minus.</p><br>
<div class="buttons"><a class="shadow-lg" target="_blank" href="#GK-QUIZ">Repo</a></div>
</div>
</div>
</div>
<div id="feedback" class="feedback">
<h1 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" data-aos-once="true">Feedback</h1><br><br>
<form data-aos="fade-up" data-aos-duration="1000" data-aos-delay="2000" data-aos-once="true" action="https://formcarry.com/s/yourformcarryID" method="POST" accept-charset="UTF-8" >
<input class="shadow" type="email" name="Email" placeholder="Email">
<input class="shadow" type="text" name="Name" placeholder="Name">
<textarea class="shadow feed" type="text" name="Feedback" placeholder="Feedback"></textarea>
<input class="shadow btn btn-secondary send" type="submit" value="Send">
</form>
</div>
<div class="footer">
<div class="mlinks">
<a target="_blank" href="https://github.com/MadhanDevlpr"><i class="fab fa-github-square"></i></a>
<a target="_blank" href="https://codepen.io/madhanaadithya"><i class="fab fa-codepen"></i></a>
</div>
<p id="copy">© 2022 Madhan Aadithya.</p>
<p>Open sourced with MIT License.</p>
</div>
<script src="./js/script.js"></script>
<script src="./js/particles.js"></script>
<script src="./js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>