-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (112 loc) · 6.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Nunito&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Carologist</title>
</head>
<body>
<div class="logo">
<span><img src="https://www.freelogodesign.org/file/app/client/thumb/646afd1e-87b9-4343-9dd5-89a13c2b04a4_200x200.png?1606649338261" width="100" height="95" alt=""></span>
<span class="logtext" style="font-size:70px">Get Some Fashion for your Car!</span>
<div class="links">
<a class="learn" href="#top">Drive to us</a>
<a class="learn" href="#line">About us</a>
<a class="learn" href="#top">Join</a>
<a class="learn" href="#top">Contact</a>
<a class="learn" href="#">Log in</a>
</div>
</div>
<div class="hero">
<div class="overlay">
<span class="welcome">Carologist</span>
<div style="display: flex; ">
<a class="work" href="#about">Repair</a>
<span class="work"> - Fashion</span>
<span class="work"> - Sell</span>
</div>
<a class="story" href="#found">Meet The Mechanic</a>
</div>
</div>
<div id="line" style="height: 10px;"></div>
<div class="about" id="fashion">
<img src="https://www.streetmusclemag.com/wp-content/blogs.dir/10/files/2011/09/bj-mustang-1.jpg " alt="custom car " width="40% " height="400vh " style="padding-left: 20px; ">
<span class="words ">
<h3 class="ourtitle">We Fashionize</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi sit vel sunt recusandae quas iusto doloremque, quo velit quaerat ratione consectetur neque unde fugiat, alias fugit, odio ab perferendis error quos vero? Voluptates illo neque, ducimus, soluta ut illum mollitia aperiam nam alias sapiente quis exercitationem! Laboriosam explicabo id, saepe, ab aliquid dolore libero fugiat, sequi culpa perspiciatis praesentium ut.
</span>
</div>
<div class="about " id="about ">
<span class="words ">
<h3 class="ourtitle " style="margin: 0px 20px; ">We Repair</h3>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque perferendis quaerat provident quam, sunt tempora tempore voluptas laudantium ipsa ab dolorem similique et nostrum, incidunt eveniet. Assumenda iusto facere in minima fugit? Ea a expedita quam dolore eveniet quisquam commodi tempora ratione! Labore provident accusantium deleniti, rerum iure ipsa sunt aperiam, a, quasi sequi facere perferendis laborum soluta consequatur omnis.
</span>
<img src="https://images.unsplash.com/photo-1543747255-94b72995ac74?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80 " alt="Work Image " width="40% " height="400vh " style="padding-right: 20px; ">
</div>
<div id="line2" style="margin-bottom: 100px;"></div>
<div id="found">
<div class="founder">
<h3 class="ourtitle " style="margin: 0px 10px; ">The Mechanic</h3>
<img src="https://images.unsplash.com/photo-1520975661595-6453be3f7070?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80" alt="Owner" width=30%>
<span style="padding-left: 20px;">Lorem,nihil aliqula nobis sit sint at laudantium? Magni voluptatibus sapiente aut provident impedit consequuntur soluta natus sunt eos quia quae commodi necessitatibus neque delectus, laudantium numquam quis incidunt laborum, at quisquam, magnam quidem eligendi. Excepturi dicta quam aperiam. Velit quis iusto ipsa tempore assumenda eius voluptatem quibusdam accusamus fugiat accusantium et eius sapiente libero dolore architecto, eveniet itaque labore!</span>
</div>
</div>
<footer>
<div class="cards" id="top">
<div class="card " id="c1">
<p>
<span style="font-size: 42px;color: #2c8fad; " class="material-icons ">
location_on
</span>
<h3>Drive to Us</h3>
</p>
<br>
<span>Lorem ipsum ,</span><br>
<span>Lorem, ipsum dolor.</span><br>
<span>Lorem, ipsum.</span>
</div>
<div class="card " id="c2">
<p>
<span style="font-size: 42px; color: #2c8fad; padding:10px" class="material-icons ">perm_phone_msg</span>
<h3>Contact</h3>
</p>
<br>
<span>+91-9999999999</span>
<span>[email protected]</span>
</div>
<div class="card " id="c3">
<span>
<img src="https://www.flaticon.com/svg/static/icons/svg/2065/2065203.svg" alt="" height="35px" width="35px">
</span>
<span><h3>Socialize</h3></span>
<div class="social">
<img id="insta" src="https://www.flaticon.com/svg/static/icons/svg/1384/1384063.svg" alt="" height="35px" width="35px">
<img id="fb" src="https://www.flaticon.com/svg/static/icons/svg/733/733547.svg" alt="" height="35px" width="35px">
<img id="tweet" src="https://www.flaticon.com/svg/static/icons/svg/733/733579.svg" alt="" height="35px" width="35px">
</div>
</div>
<div class=" card " id="c4 ">
<p>
<span style="font-size: 42px; color: #2c8fad; padding:10px " class="material-icons ">perm_phone_msg</span>
<h3>Newsletter</h3>
</p>
<br>
<span>Coming Soon!</span>
</div>
</div>
</footer>
</body>
</html>