-
-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
159 lines (152 loc) · 6.85 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
<!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="./style.css" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicon/favicon-16x16.png"
/>
<link rel="manifest" href="./favicon//site.webmanifest" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<!-- Primary Meta Tags -->
<title>Home | DOM Projects</title>
<meta name="title" content="Home | DOM Projects" />
<meta
name="description"
content="Explore a collection of interactive JavaScript DOM (Document Object Model) projects showcasing dynamic web development. Dive into hands-on examples, live demos, and discover the power of DOM manipulation. Elevate your web development skills with practical exercises and real-world applications."
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.jisan.io/dom-projects/" />
<meta property="og:title" content="Home | DOM Projects" />
<meta
property="og:description"
content="Explore a collection of interactive JavaScript DOM (Document Object Model) projects showcasing dynamic web development. Dive into hands-on examples, live demos, and discover the power of DOM manipulation. Elevate your web development skills with practical exercises and real-world applications."
/>
<meta
property="og:image"
content="https://github.com/Jisan-mia/dom-projects/assets/61211600/40429ec8-6cfb-4c2c-af8e-23d27d285f50"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.jisan.io/dom-projects/" />
<meta property="twitter:title" content="Home | DOM Projects" />
<meta
property="twitter:description"
content="Explore a collection of interactive JavaScript DOM (Document Object Model) projects showcasing dynamic web development. Dive into hands-on examples, live demos, and discover the power of DOM manipulation. Elevate your web development skills with practical exercises and real-world applications."
/>
<meta
property="twitter:image"
content="https://github.com/Jisan-mia/dom-projects/assets/61211600/40429ec8-6cfb-4c2c-af8e-23d27d285f50"
/>
</head>
<body>
<header id="#">
<nav>
<section>
<a href="#" class="left-side">
<div class="brand">
<img src="./favicon/apple-touch-icon.png" />
</div>
<strong>DOM Projects</strong>
</a>
<div class="nav-list">
<div class="nav-item">
<a href="#projects" class="btn project-nav-link">Projects</a>
</div>
<div class="nav-item">
<a
class="btn github-link"
target="_blank"
href="https://github.com/Jisan-mia/dom-projects"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="github"
style="
width: 14px;
height: 14px;
margin-right: 4px;
margin-top: 1px;
"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512"
>
<path
fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path>
</svg>
Github
</a>
</div>
</div>
</section>
</nav>
<section class="hero">
<div class="hero-left">
<h2>JavaScript DOM Projects</h2>
<p>
Dom Projects is an open-source platform that helps you learn
frontend development faster with a hands-on practice style. It is a
collection of projects that you can use to learn HTML, CSS and
JavaScript
</p>
<div class="hero-btns">
<a href="#projects">
<button class="btn">Explore Projects</button>
</a>
<a
target="_blank"
href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model"
>
<button class="btn active">Learn DOM</button>
</a>
</div>
</div>
<div class="hero-right">
<div class="hero-right-img">
<img src="./images/hero1.svg" alt="Coding Project" />
</div>
</div>
</section>
</header>
<section id="projects">
<div class="projects-title">
<h2>Projects List</h2>
</div>
<div class="project-list-area"></div>
</section>
<footer>
<span>
Made with <i class="fa fa-heart pulse"></i> by
<a href="https://www.jisan.io/" target="_blank">Jisan Mia</a>
</span>
</footer>
<script src="./index.js"></script>
</body>
</html>