-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
134 lines (121 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images.png"type="image/x-icon" />
<title>30 Days, 30 Projects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header with Background and Overlay -->
<header>
<div class="header-background"></div>
<div class="header-content">
<h1 class="fade-in">30 Days, 30 Projects </h1>
<p class="slide-up">Explore 30 unique web projects created by Aditya Raj</p>
<p>This showcase features a diverse range of web applications designed to enhance your experience, from utilities like calculators to interactive tools like to-do lists. Each project highlights different aspects of web development, demonstrating skills in HTML, CSS, and JavaScript.</p>
<p>Join me on this journey of creativity and innovation as I build a new project every day for 30 consecutive days. Click on any project below to see the details and explore the functionality!</p>
<!-- <button class="scroll-btn" onclick="scrollToSection('project-showcase')">Discover Projects</button> -->
</div>
</header>
<!-- Project Showcase Section -->
<div id="project-showcase" class="project-showcase">
<a href="./1.Weather_App/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./1.Weather_App/Screenshot 2024-05-27 201045.png" alt="Project 1">
</div>
<h3>Project 1: Weather App</h3>
<!-- <p>Weather app</p> -->
</div>
</a>
<a href="./2.calculator/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./2.calculator/Calci_Screenshot_.png" alt="Project 2">
</div>
<h3>Project 2: Calculator</h3>
<!-- <p>Simple Calculator with basic arithmetic functions</p> -->
</div>
</a>
<a href="./3.To-Do_list/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./3.To-Do_list/To-Do List" alt="Project 3">
</div>
<h3>Project 3: To-Do List</h3>
<!-- <p>A simple task management app</p> -->
</div>
</a>
<a href="./4.Clock/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./4.Clock/index.html 201045.png" alt="Project 1">
</div>
<h3>Project 4: Clock and many more</h3>
<!-- <p>Weather app</p> -->
</div>
</a>
<a href="./2.calculator/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./2.calculator/Calci_Screenshot_.png" alt="Project 2">
</div>
<h3>Project 5: Calculator</h3>
<!-- <p>Simple Calculator with basic arithmetic functions</p> -->
</div>
</a>
<a href="./3.To-Do_list/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./3.To-Do_list/To-Do List" alt="Project 3">
</div>
<h3>Project 6: To-Do List</h3>
<!-- <p>A simple task management app</p> -->
</div>
</a>
<a href="./1.Weather_App/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./1.Weather_App/Screenshot 2024-05-27 201045.png" alt="Project 1">
</div>
<h3>Project 7: Weather App</h3>
<!-- <p>Weather app</p> -->
</div>
</a>
<a href="./2.calculator/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./2.calculator/Calci_Screenshot_.png" alt="Project 2">
</div>
<h3>Project 8: Calculator</h3>
<!-- <p>Simple Calculator with basic arithmetic functions</p> -->
</div>
</a>
<a href="./3.To-Do_list/index.html" target="_blank" class="project-link">
<div class="project-card">
<div class="project-image-container">
<img src="./3.To-Do_list/To-Do List" alt="Project 3">
</div>
<h3>Project 9: To-Do List</h3>
<!-- <p>A simple task management app</p> -->
</div>
</a>
<!-- More project cards can be added here -->
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<p>Made with ❤️ by Aditya Raj | © 2024 All rights reserved.</p>
<div class="footer-links">
<a href="#about">About Me</a>
<a href="#contact">Contact Me</a>
<a href="#projects">Projects</a>
</div>
</div>
<button class="back-to-top" onclick="scrollToTop()">↑ Top</button>
</footer>
<script src="script.js"></script>
</body>
</html>