Skip to content

Commit 03a9816

Browse files
Theheavenlyprogrammer333Theheavenlyprogrammer333
authored
Update contacts.html
1 parent 3b7f58a commit 03a9816

File tree

1 file changed

+129
-41
lines changed

1 file changed

+129
-41
lines changed

‎contacts.html‎

Lines changed: 129 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,135 @@
1+
<!DOCTYPE html>
12
<html lang="en">
3+
24
<head>
3-
<meta charset="UTF-8">
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5-
<link rel="stylesheet" href="/css/bootstrap.min.css">
6-
<link rel="stylesheet" href="contdeco.css">
7-
<script src="/js/bootstrap.min.js"></script>
8-
<title>contact page of taming physics!!!!!!</title>
5+
<meta charset="utf-8" />
6+
<title>Swiper demo</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
8+
<!-- Link Swiper's CSS -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
10+
11+
<!-- Demo styles -->
12+
<style>
13+
html,
14+
body {
15+
position: relative;
16+
height: 100%;
17+
}
18+
19+
body {
20+
background: #000;
21+
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
22+
font-size: 14px;
23+
color: #fff;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
body {
29+
background: #fff;
30+
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
31+
font-size: 14px;
32+
color: #000;
33+
margin: 0;
34+
padding: 0;
35+
}
36+
37+
html,
38+
body {
39+
position: relative;
40+
height: 100%;
41+
}
42+
43+
body {
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}
48+
49+
.swiper {
50+
width: 640px;
51+
height: 520px;
52+
}
53+
54+
.swiper-slide {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
border-radius: 18px;
59+
font-size: 22px;
60+
font-weight: bold;
61+
color: #fff;
62+
}
63+
64+
.swiper-slide:nth-child(1n) {
65+
background-color: rgb(206, 17, 17);
66+
}
67+
68+
.swiper-slide:nth-child(2n) {
69+
background-color: rgb(0, 140, 255);
70+
}
71+
72+
.swiper-slide:nth-child(3n) {
73+
background-color: rgb(10, 184, 111);
74+
}
75+
76+
.swiper-slide:nth-child(4n) {
77+
background-color: rgb(211, 122, 7);
78+
}
79+
80+
.swiper-slide:nth-child(5n) {
81+
background-color: rgb(118, 163, 12);
82+
}
83+
84+
.swiper-slide:nth-child(6n) {
85+
background-color: rgb(180, 10, 47);
86+
}
87+
88+
.swiper-slide:nth-child(7n) {
89+
background-color: rgb(35, 99, 19);
90+
}
91+
92+
.swiper-slide:nth-child(8n) {
93+
background-color: rgb(0, 68, 255);
94+
}
95+
96+
.swiper-slide:nth-child(9n) {
97+
background-color: rgb(218, 12, 218);
98+
}
99+
100+
.swiper-slide:nth-child(10n) {
101+
background-color: rgb(54, 94, 77);
102+
}
103+
</style>
9104
</head>
10-
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
11-
<a class="navbar-brand text-success" href="#">Taming Physics</a>
12-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
13-
<span class="navbar-toggler-icon"></span>
14-
</button>
15-
<div class="collapse navbar-collapse" id="navbarNav">
16-
<ul class="navbar-nav">
17-
<li class="nav-item active">
18-
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/">Home <span class="sr-only">(current)</span></a>
19-
</li>
20-
<li class="nav-item">
21-
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/contacts.html">Contact</a>
22-
</li>
23-
<li class="nav-item">
24-
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/learn.html">Learn</a>
25-
</li>
26-
<li class="nav-item">
27-
<a class="nav-link text-aquamarine disabled" style="color: aquamarine;" href="/demo">Demo</a>
28-
</li>
29-
</ul>
30-
</div>
31-
</nav>
105+
32106
<body>
33-
<section id="consec">
34-
<h1>contact the below number for learning more about the coaching!</h1>
35-
</section>
36-
<br><br><br><br><br>
37-
<section id="sec">
38-
<p style="font-size: xx-large; color: red;">99575757575</p>
39-
</section>
40-
<br>
41-
<section id="emailsec">
42-
<p>e-mail:[email protected]</p>
43-
</section>
44-
107+
108+
<h1>contacts</h1>
109+
<br><br>
110+
<!-- Swiper -->
111+
112+
113+
<div class="swiper mySwiper">
114+
<div class="swiper-wrapper">
115+
<div class="swiper-slide">contact mail:</div>
116+
<div class="swiper-slide">[email protected]</div>
117+
<div class="swiper-slide">contact number:</div>
118+
<div class="swiper-slide">*******</div>
119+
120+
</div>
121+
</div>
122+
123+
<!-- Swiper JS -->
124+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
125+
126+
<!-- Initialize Swiper -->
127+
<script>
128+
var swiper = new Swiper(".mySwiper", {
129+
effect: "cards",
130+
grabCursor: true,
131+
});
132+
</script>
45133
</body>
46134

47-
</html>
135+
</html>

0 commit comments

Comments
 (0)