-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (155 loc) · 13.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Target</title>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./src/output.css">
<link rel="stylesheet" type="text/css" href="./src/style.css">
</head>
<body class="">
<div class="max-w-[1280px] text-[16px] mx-auto">
<header class="flex max-[450px]:flex-col gap-[8px] flex-row justify-between max-[450px]:justify-center items-center h-[80px] border-b-[1px] border-b-gray-400 px-[12px]">
<div class="flex flex-row justify-center gap-[30px]">
<div>
<img src="./src/assets/logo.png" alt="error logo">
</div>
<p class="text-gray-400 max-[700px]:hidden">Premium landing page template</p>
</div>
<p class="text-[20px] text-red-500 font-bold max-[700px]:text-[16px]">Call Now! 1-800123-456</p>
</header>
<nav></nav>
<section class="flex flex-row max-[1040px]:flex-col max-[1040px]:gap-[40px] justify-between items-center px-[30px] py-[60px] border-b-[1px] border-b-gray-400 ">
<div class="flex flex-col gap-[40px] w-[40%] max-[1040px]:w-[100%]">
<p class="text-[38px] font-bold leading-[38px]">The perfect way to convert your traffic into sales</p>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br><br>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.</span>
<div class="flex flex-row gap-[20px] items-center font-bold m-auto">
<button class="rounded-[30px] px-[30px] max-[750px]:px-[10px] py-[10px] bg-gradient-to-t from-red-400 to-orange-400 border-gray border-[4px] text-orange-700">Purchase now!</button>
<p>or</p>
<button class="rounded-[30px] px-[30px] max-[750px]:px-[10px] py-[10px] bg-gradient-to-t from-gray-400 to-gray-200 border-gray border-[4px] text-gray-500">Take a tour</button>
</div>
</div>
<div class="slider w-[50%] max-[1040px]:w-[100%]">
<div><img src="./src/assets/slider-image.png" alt="error slider" class="w-full"></div>
<div><img src="./src/assets/slider-image.png" alt="error slider" class="w-full"></div>
<div><img src="./src/assets/slider-image.png" alt="error slider" class="w-full"></div>
</div>
</section>
<section class="flex flex-row max-[1040px]:flex-col gap-[30px] px-[30px] py-[60px] items-center justify-between border-b-[1px] border-b-gray-400">
<div class="flex flex-row gap-[20px] w-[30%] max-[1040px]:w-[100%]">
<div class="w-[40%] max-w-[100px]"><img src="./src/assets/desktop-solid.svg" alt="error icon"></div>
<div class="flex flex-col gap-[10px]">
<p class="text-[18px] font-bold">Quick and easy</p>
<span>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
</div>
</div>
<div class="flex flex-row gap-[20px] w-[30%] max-[1040px]:w-[100%]">
<div class="w-[40%] max-w-[100px]"><img src="./src/assets/pager-solid.svg" alt="error icon"></div>
<div class="flex flex-col gap-[10px]">
<p class="text-[18px] font-bold">Less risky</p>
<span>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
</div>
</div>
<div class="flex flex-row gap-[20px] w-[30%] max-[1040px]:w-[100%]">
<div class="w-[40%] max-w-[100px]"><img src="./src/assets/clock-regular.svg" alt="error icon"></div>
<div class="flex flex-col gap-[10px]">
<p class="text-[18px] font-bold">Optimized</p>
<span>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
</div>
</div>
</section>
<section class="flex flex-row max-[750px]:flex-col max-[750px]:gap-[30px] px-[30px] py-[60px] items-center max-[750px]:items-start gap-[7%] border-b-[1px] border-b-gray-400">
<div class="flex flex-col w-[60%] max-[750px]:w-full">
<p class="text-[18px] font-bold">Check out the features</p>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. <br>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.</span>
</div>
<div class="flex flex-col text-orange-500">
<a href="" class="border-b-[1px] py-[10px]"><i class="fa-regular fa-circle-right text-gray-500"></i> Lorem ipsum dolor sit amet</a>
<a href="" class="border-b-[1px] py-[10px]"><i class="fa-regular fa-circle-right text-gray-500"></i> Consectetuer adipiscing elit sed diam</a>
<a href="" class="border-b-[1px] py-[10px]"><i class="fa-regular fa-circle-right text-gray-500"></i> Nibh euismod tincidunt ut</a>
<a href="" class="border-b-[1px] py-[10px]"><i class="fa-regular fa-circle-right text-gray-500"></i> Laoreet dolore magna aliquam erat</a>
</div>
</section>
<section class="flex flex-col px-[30px] py-[60px] gap-[30px] border-b-[1px] border-b-gray-400">
<p class="text-[18px] font-bold ">The screenshots</p>
<div class="flex flex-row max-[750px]:flex-col max-[750px]:gap-[20px] items-center justify-between">
<div class="border-[3px] border-gray-300 w-[24%] max-[750px]:w-[80%]"><img src="./src/assets/slider-image.png" alt="error pic"></div>
<div class="border-[3px] border-gray-300 w-[24%] max-[750px]:w-[80%]"><img src="./src/assets/slider-image.png" alt="error pic"></div>
<div class="border-[3px] border-gray-300 w-[24%] max-[750px]:w-[80%]"><img src="./src/assets/slider-image.png" alt="error pic"></div>
<div class="border-[3px] border-gray-300 w-[24%] max-[750px]:w-[80%]"><img src="./src/assets/slider-image.png" alt="error pic"></div>
</div>
</section>
<section class="flex flex-col px-[30px] py-[60px] gap-[30px] border-b-[1px] border-b-gray-400">
<p class="text-[18px] font-bold">See what our customers are saying...</p>
<p class="text-center text-[22px] text-gray-400 border-[1px] border-gray-400 px-[20px] py-[40px]">"Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium."</p>
<span>Mike Tyson, <span class="text-gray-500">Microsoft</span></span>
<div class="flex flex-row gap-[20px] items-center font-bold justify-center">
<button class="rounded-[30px] px-[30px] max-[750px]:px-[10px] py-[10px] bg-gradient-to-t from-red-400 to-orange-400 border-gray border-[4px] text-orange-700">Purchase now!</button>
<p>or</p>
<button class="rounded-[30px] px-[30px] max-[750px]:px-[10px] py-[10px] bg-gradient-to-t from-gray-400 to-gray-200 border-gray border-[4px] text-gray-500">Take a tour</button>
</div>
</section>
<footer class="flex flex-col text-gray-400 max-[750px]:text-[12px]">
<!-- Pre-Footer -->
<div class="flex flex-row max-[450px]:flex-col max-[450px]:gap-[30px] px-[30px] py-[20px] justify-between bg-[#333]">
<div class="flex flex-col w-[30%] max-[450px]:w-[100%] gap-[20px]">
<p class="text-white text-[18px]">Payment method</p>
<span>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</span>
<div class="flex flex-row gap-[10px] items-center">
<div class="w-[40px] h-[30px] bg-white flex items-center justify-center"><img src="./src/assets/mastercard.png" alt=""></div>
<div class="w-[40px] h-[30px] bg-white flex items-center justify-center"><img src="./src/assets/visa-electron.png" alt=""></div>
<div class="w-[40px] h-[30px] bg-white flex items-center justify-center"><img src="./src/assets/paypal.png" alt=""></div>
</div>
</div>
<div class="flex flex-col w-[20%] max-[750px]:w-[30%] max-[450px]:w-[100%] gap-[20px]">
<p class="text-white text-[18px]">Get in touch</p>
<span>
123 Main Street #3 <br>
San Francisco, CA, 94101 <br>
Phone: (866) 123-4567 ext#1 <br>
FAX: (866) 123-0000 <br>
Email: [email protected]
</span>
</div>
<div class="flex flex-col w-[16%] max-[750px]:w-[30%] max-[450px]:w-[100%] gap-[20px]">
<p class="text-white text-[18px]">Design details</p>
<span>Lorem ipsum dolor sit amet, consectetuer adipi- scing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</span>
</div>
<div class="max-[750px]:hidden"><img src="./src/assets/logo-shaded.png" alt="error logo"></div>
</div>
<!-- Footer -->
<div class="flex flex-row max-[600px]:flex-col max-[600px]:gap-[10px] max-[600px]:items-center justify-between px-[30px] py-[20px] bg-gray-950">
<p>Copyright © 2011 Target. All rights reserved. Design by <span class="text-orange-400">Shegy</span></p>
<div class="flex flex-row gap-[10px]">
<a href=""><i class="fa-brands fa-microsoft text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-tumblr text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-facebook text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-linkedin text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-twitter text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-youtube text-[25px]"></i></a>
<a href=""><i class="fa-brands fa-git-alt text-[25px]"></i></a>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js" integrity="sha512-BzvgYEoHXuphX+g7B/laemJGYFdrq4fTKEo+B3PurSxstMZtwu28FHkPKXu6dSBCzbUWqz/rMv755nUwhjQypw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('.slider').slick({
arrows: true,
prevArrow: '<button type="button" class="slick-prev"> <i class="fa-solid fa-chevron-left"></i> </button>',
nextArrow: '<button type="button" class="slick-next"> <i class="fa-solid fa-chevron-right"></i> </button>'
});
});
</script>
</div>
</body>
</html>