-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (99 loc) · 4.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unit Converter</title>
<!-- link css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- gooogle fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="crossorigin">
<link
href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&family=Montserrat&family=Sacramento&display=swap"
rel="stylesheet">
<!-- bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<!-- font awsome -->
<script src="https://kit.fontawesome.com/33c005a0aa.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<div class="header-top">
<section class="head-title">
<h1 class="uhead target">
<span class="fa-solid fa-beat-fade fa-calculator"></span>
Unit Converter</h1>
</section>
</div>
<!-- button section -->
<div class="button-section ">
<h2 class="choose-heading">Choose your converter</h2>
<div class="main-card ">
<div class="card1 border border-white border-5 target">
<a href="length.html">
<i class="fa-solid fa-ruler fa-bounce fa-2xs" style="color: #fe1667;"></i>
Length</a>
</div>
<div class="card1 border border-success border-5 target">
<a href="weight.html">
<i class="fa-solid fa-scale-unbalanced-flip fa-bounce" style="color: #fe1667;"></i>
Weight</a>
</div>
<div class="card1 border border-warning-subtle target border-5">
<a href="area.html">
<i
class="fa-sharp fa-solid fa-chart-area fa-bounce fa-2xs"
style="color: #fe1667;"></i>
Area</a>
</div>
<div class="card2 border-5 border border-primary target">
<a href="temperature.html">
<i
class="fa-solid fa-temperature-three-quarters fa-shake "
style="color: #db1c1c;"></i>
Temperature</a>
</div>
<div class="card2 border border-danger border-5 target ">
<a href="volume.html">
<i class="fa-solid fa-cubes-stacked fa-beat-fade fa-xs "></i>
Volume</a>
</div>
<div class="card2 border border-info border-5 target">
<a href="time.html">
<i class="fa-solid fa-clock fa-spin" style="color: #dfe4ec;"></i>
Time</a>
</div>
</div>
<!-- foooter section -->
<div class="foot">
<footer class="footer-section">
<div class=" align-middle">
<footer id="footer1">
<a href="https://twitter.com/jayprak56111945" style="color: #ffff;">
<i class=" target share-icon fa-brands fa-square-twitter"></i>
</a>
<a href="" style="color: #ffff;">
<i class=" target share-icon fa-brands fa-facebook"></i>
</a>
<a href="" style="color: #ffff;">
<i class="target share-icon fa-solid fa-envelope"></i>
</a>
<a href="https://github.com/IamJayPrakash">
<i class="target share-icon fa-brands fa-github" style="color: #ffffff;"></i>
</a>
</footer>
<p class=" .fs-6 fst-italic font-monospace" style="text-align:center">copyright©️ 2024, All Right Reserved
<br>Jay Prakash</p>
</div>
</footer>
</div>
</body>
</html>