-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (93 loc) · 3.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<title>Layers Suryansh</title>
<link rel="stylesheet" href="style.css">
</head>
<body background-color: #f7f7f7;>
<style>
.scrolling-container {
background-color: rgb(0, 0, 0); /* set a background color for the container */
overflow: hidden; /* hide the overflow of the container */
}
.scrolling-text {
animation: scroll 40s linear infinite;
color: rgb(255, 254, 254);
background-color: rgb(0, 0, 0);
}
.scrolling-text span {
display: inline-block;
margin-right: 40px;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="scrolling-container">
<div class="scrolling-text">
<span>Marvel Launch coming next week, stay tuned! </span>
<span>Marvel Launch coming next week, stay tuned! </span>
<span>Marvel Launch coming next week, stay tuned! </span>
</div>
</div>
<header>
<div class="logo">
<a href="#"><img src="https://iili.io/HGl8Se9.webp" alt="Logo"></a>
</div>
<nav>
<ul>
<li><a href="msg.html"class="button">Home</a></li>
<li><a href="msg.html"class="button">Shop</a></li>
<li><a href="msg.html"class="button">About</a></li>
<li><a href="msg.html"class="button">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>More than Just Good Looking</h1>
<p>We sell the best products for the best prices</p>
<a href="msg.html" class="button">Shop Now</a>
</section>
<section>
<img src="https://iili.io/HGlSsQs.webp" class="image"alt="My Image">
</section>
<section class="products">
<h2>Featured Products</h2>
<ul>
<li>
<img src="https://iili.io/HGMW5en.webp" alt="Product 1">
<h3>Product 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="msg.html" class="button">Buy Now</a>
</li>
<li>
<img src="https://iili.io/HGMWhmu.webp" alt="Product 2">
<h3>Product 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="msg.html" class="button">Buy Now</a>
</li>
<li>
<img src="https://iili.io/HGMWv1V.webp" alt="Product 3">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="msg.html" class="button">Buy Now</a>
</li>
</ul>
</section>
<section class="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor turpis eget mi malesuada, eu rhoncus urna ultricies. Donec convallis mauris vitae lacus molestie, non mollis arcu posuere. Morbi a velit sed ex suscipit ultrices vel in dolor. Phasellus accumsan, dui vel aliquet tempus, velit felis laoreet ante, id euismod tellus est at est. Nunc placerat odio id orci posuere, vel hendrerit velit ultricies. Aliquam sit amet molestie magna. Donec at purus eu quam dictum fringilla. Curabitur euismod semper orci, eget blandit ipsum efficitur eu.</p>
</section>
</main>
<footer>
<p>© My Sales Website 2023</p>
</footer>
</body>
</html>