-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (140 loc) · 4.97 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
<!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">
<title>Home | WebD Projects</title>
<style>
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: rgb(0,0,0,0.8);
font-weight: 100;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body{
padding:20px;
background:rgb(220, 241, 234);
}
.container{
width:800px;
max-width:96%;
margin:0 auto;
}
h1{
background:white;
padding:20px 30px;
box-shadow:0 20px 25px -10px rgb(0,0,0,0.2);
}
.links{
background:white;
padding:20px 30px;
box-shadow:0 20px 25px -10px rgb(0,0,0,0.2);
}
li{
position: relative;
padding:10px;
list-style-type: square;
}
li:hover iframe{
transform: scale(0.25);
}
iframe{
width:1920px;
height:1080px;
border-radius: 10px;;
position:absolute;
transform: scale(0);
margin-left:10px;
transition:0.2s ease all;
transform-origin: left top;
box-shadow:0 20px 25px rgb(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="container">
<h1>Following are different basics project that are made for practising HTML, CSS and basic JS. </h1>
<div class="links">
<li>
<a href="./Animation/Animation.html">The Animation</a>
<iframe src="./Animation/Animation.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Cards/index.html">The Cards</a>
<iframe src="./Cards/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Clock/clock.html">The Clock</a>
<iframe src="./Clock/clock.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Date and Time/Date_and_time.html">Date & Time</a>
<iframe src="./Date and Time/Date_and_time.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Entity Editor/index.html">The Entity Editor</a>
<iframe src="./Entity Editor/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Fancy border radius/fancyBorder.html">Fancy border radius</a>
<iframe src="./Fancy border radius/fancyBorder.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Fruits/Fruit Game.html">The Fruit game</a>
<iframe src="./Fruits/Fruit Game.html" frameborder="0"></iframe>
</li>
<li>
<a href="./HTML_Entities/entities.html">HTML entities</a>
<iframe src="./HTML_Entities/entities.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Cards/index.html">The Cards</a>
<iframe src="./Cards/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Keyboard and box/index.html">Keyboard & Box</a>
<iframe src="./Keyboard and box/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Mouse events/point.html">Mouse Events</a>
<iframe src="./Mouse events/point.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Notepad/notepad.html">The Notepad</a>
<iframe src="./Notepad/notepad.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Regex Website/index.html">The Regex Website</a>
<iframe src="./Regex Website/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./Snake and ladder/snake_and_ladder.html">Snake and ladder</a>
<iframe src="./Snake and ladder/snake_and_ladder.html" frameborder="0"></iframe>
</li>
<li>
<a href="./The bulb/bulb.html">The Bulb</a>
<iframe src="./The bulb/bulb.html" frameborder="0"></iframe>
</li>
<li>
<a href="./The Dictionary App/index.html">The dictionary app</a>
<iframe src="./The Dictionary App/index.html" frameborder="0"></iframe>
</li>
<li>
<a href="./The Jokes/JOKES.html">The Jokes</a>
<iframe src="./The Jokes/JOKES.html" frameborder="0"></iframe>
</li>
<li>
<a href="./The keyboard check/keyboardCheckup.html">Keyboard Checkup</a>
<iframe src="./The keyboard check/keyboardCheckup.html" frameborder="0"></iframe>
</li>
<li>
<a href="./The Notes Taking App/index.html">Noes Taking App</a>
<iframe src="./The Notes Taking App/index.html" frameborder="0"></iframe>
</li>
</div>
</div>
</body>
</html>