-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (147 loc) · 8.25 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
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Genotek Z 1685 Expansion Joint</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<img class="navbar-logo" src="genotek text.png" alt="Genotek Logo"/>
<ul class="navbar-menu">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<video autoplay muted loop class="hero-video">
<source src="hero-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="hero-overlay">
<h2>Z 1685</h2>
<p>Product revolutionizing the world of expansion joint covers with its strong load-bearing capacity.</p>
</div>
</section>
<section class="textbox">
<div class="container-textbox">
<h3 class="title-textbox">introducing TP–7 field recorder.</h3>
<div class="description-textbox">
<div class="textbox-content">
TP–7 fits perfectly in the palm of your hand and lets your fingers naturally adopt the controls. the index finger triggers fast forward and the middle finger rewinds. your thumb records a memo, the pinky selects the mode. it's a genuinely rewarding man-machine experience.TP–7 fits perfectly in the palm of your hand and lets your fingers naturally adopt the controls. the index finger triggers fast forward and the middle finger rewinds. your thumb records a memo, the pinky selects the mode. it's a genuinely rewarding man-machine experience.
</div>
</div>
</div>
</section>
<section class="carousel">
<div class="firstimage-text">
<!-- <h2>presenting you Z 1685</h2>
<div class="firstimage-text-container">
<p>explanatory text for explaining the product using eye-catching words and it should be short precise and attractive so that more users are attracted towards it</p></div> -->
<!-- <img class="icon-poster" src="./carousel_photos/icon-poster.png" /> -->
</div>
<img class="carousel-image" src="/carousel_photos/one.png" alt="Carousel Image One"/>
</section>
<section class="doubleimage">
<h2 class="fourthimage-title">product feature videos</h2>
<p class="fourthimage-desc">
this product comes with multiple features and to make the users better understand how this thing works here are some 3d animations to explain the usage in better terms just typing random words to make it fill the container for testing purposes and there will be around 3 to 4 lines in this
</p>
<div class="video-one">
<div class="video-one-container">
<video autoplay muted loop class="video-one-parent">
<source src="water1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-one-text-container">
<h2>
water barrier
</h2>
<p>
explanatory text explaining why water barrier is necessary and how this product aims at fixing those issues
as well as how it does it better than other products
</p>
</div>
</div>
</section>
<div class="video-one">
<div class="video-one-text-container">
<h2>
water barrier
</h2>
<p>
explanatory text explaining why water barrier is necessary and how this product aims at fixing those issues
as well as how it does it better than other products
</p>
</div>
<div class="video-one-container">
<video autoplay muted loop class="video-one-parent">
<source src="angle.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<section class="doubleimage">
<h2 class="finishes-title">comes in multiple finishes</h2>
<p class="finishes-desc">this product comes with a really good finish and all the benefits of using this material over others just typing random words to make it fill the container for testing purposes and there will be around 3 to 4 lines in this</p>
</section>
<section class="slidable">
<div class="slidable-images-container">
<div class="slidable-images">
<img id="slide-1" src="/finishes/marble.png"/>
<img id="slide-2" src="/finishes/ON_ROAD.png"/>
<img id="slide-3" src="/finishes/paver.png"/>
</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
</section>
<section class="firetruck-video">
<div class="firetruck-text">
<h2> minimal deflection under heavy load </h2>
</div>
<video autoplay muted loop class="firetruck">
<source src="fire-truck.mp4" type="video/mp4"/>
</video>
</section>
<div class="secondimage-text">
<h2>honeycomb Structure</h2>
<div class="secondimage-text-container">
<p>the honeycomb structure in an expansion joint is engineered to optimize load distribution and minimize deflection. Comprising a hexagonal lattice, it efficiently absorbs and redistributes stress, allowing the joint to withstand significant loads without compromising structural integrity. This design enhances flexibility and durability, providing superior performance in handling both thermal expansion and mechanical loads while maintaining minimal deflection. The result is a robust yet adaptable joint that supports maximum load capacity and longevity in various applications.</p>
</div>
</div>
<img class="carousel-image" src="/carousel_photos/two.png" alt="Carousel Image Two"/>
<div class="thirdimage">
<div class="thirdimage-text">
<h2>cylindrical hinge</h2>
<div class="thirdimage-text-container">
<p>The cylindrical hinge in an expansion joint enables smooth, multi-directional movement, accommodating axial, lateral, and rotational forces. Its cylindrical design ensures even load distribution and minimal friction, enhancing durability and flexibility. Engineered for high performance, it effectively manages structural stresses while maintaining alignment, making it ideal for handling thermal expansion and seismic activity in various applications.</p>
</div>
</div>
<img class="carousel-image" src="/carousel_photos/three.png" alt="Carousel Image Three"/></div>
<div class="secondimage-text">
<h2>text for anti slip serration</h2>
<div class="secondimage-text-container">
<p>the honeycomb structure in an expansion joint is engineered to optimize load distribution and minimize deflection. Comprising a hexagonal lattice, it efficiently absorbs and redistributes stress, allowing the joint to withstand significant loads without compromising structural integrity. This design enhances flexibility and durability, providing superior performance in handling both thermal expansion and mechanical loads while maintaining minimal deflection. The result is a robust yet adaptable joint that supports maximum load capacity and longevity in various applications.</p>
</div>
</div>
<img class="carousel-image" src="/carousel_photos/four.png" alt="Carousel Image Two"/>
<section class="doubleimage">
<h2 class="fourthimage-title">text specifying the importance of the material used</h2>
<p class="fourthimage-desc">this product comes with a really good finish and all the benefits of using this material over others just typing random words to make it fill the container for testing purposes and there will be around 3 to 4 lines in this</p>
<img src="/carousel_photos/seven.png" />
</section>
<!-- Footer -->
<footer>
<p>© 2024 Genotek. All rights reserved.</p>
</footer>
</body>
</html>