This repository has been archived by the owner on Apr 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
98 lines (98 loc) · 6.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fire UI CSS and JS files-->
<link rel="stylesheet" type="text/css" href="FireUI.min.css">
<script src="FireUI.min.js"></script>
<!-- Additional style -->
<link rel="stylesheet" href="style.css">
<title>Product name</title>
<!-- Product icon -->
<link rel="shortcut icon" href="product.png" type="image/x-icon">
</head>
<body theme="light">
<div class="topnav theme-reverse topnav-shadow">
<span class="topnav-brand">Product name</span>
<span class="topnav-hamburger-menu" data-target = "myTopnav">☰</span>
<div class="topnav-right" id="myTopnav">
<a class="topnav-item" href="">Home</a>
<a class="topnav-item" href="#aboutUs">About us</a>
<a class="topnav-item" href="#products">Products</a>
<a class="topnav-item" href="#contacts">Contacts</a>
<span switch-theme class="topnav-item">Switch theme</span>
</div>
</div>
<div class="row theme-adjust my-5">
<div class="col-6">
<img src="product.png" alt="Product image" class="intro-image">
</div>
<div class="col-6">
<div class="m-5">
<h1 class="heading-title">Product name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. </p>
</div>
</div>
</div>
<div class="theme-reverse" id="aboutUs">
<div class="container my-5 py-3">
<h1 class="heading-title">About us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam. Cras tempor ipsum ut ex tristique, ac eleifend nibh congue. Praesent imperdiet, lorem quis accumsan efficitur, eros augue finibus nisl, et blandit odio ipsum nec metus. Cras varius, dui luctus eleifend euismod, nunc metus molestie augue, nec posuere tellus urna sit amet purus. Sed ut sem bibendum, lacinia nisl in, vehicula mi. Phasellus vel odio in nulla mattis lobortis. In accumsan tincidunt lectus nec accumsan. Quisque congue arcu vel ante commodo pretium. Pellentesque pellentesque leo vitae eros efficitur scelerisque. Aliquam sit amet facilisis leo, vehicula cursus arcu.</p>
<p>Nam sed dictum arcu. In hac habitasse platea dictumst. Cras vulputate a felis a eleifend. Nunc sit amet mi iaculis, tempor ex non, ultricies orci. Suspendisse mollis venenatis augue, sit amet sollicitudin tortor maximus ac. Ut scelerisque nisl sed orci ultricies bibendum. In a tortor ut ligula interdum mattis. Ut commodo gravida odio, quis condimentum quam sagittis at. In rhoncus felis sit amet finibus vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi imperdiet mi nec nisl rhoncus, nec accumsan dui pellentesque.</p>
</div>
</div>
<div class="theme-adjust" id="products">
<div class="container py-3">
<h1 class="heading-title">Our Products</h1>
<div class="row">
<div class="col-4">
<div class="box box-shadow m-3">
<img src="product.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
</div>
</div>
<div class="col-4">
<div class="box box-shadow m-3">
<img src="product.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
</div>
</div>
<div class="col-4">
<div class="box box-shadow m-3">
<img src="product.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non felis quis ipsum gravida imperdiet. Donec sapien lorem, viverra eget convallis in, commodo id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ut consectetur diam</p>
</div>
</div>
</div>
</div>
</div>
<div class="theme-reverse" id="contacts">
<div class="container mt-5 py-3">
<h1 class="box-title">Contact Us</h1>
<div class="row">
<div class="col-4">
<div class="box box-shadow m-3">
<h3 class="box-title">Address</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-4">
<div class="box box-shadow m-3">
<h3 class="box-title">Phone</h3>
<p>+0000000000</p>
<p>+1234567890</p>
</div>
</div>
<div class="col-4">
<div class="box box-shadow m-3">
<h3 class="box-title">Email</h3>
<p>hello@mail.com</p>
<p>world@mail.com</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>