-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (92 loc) · 5.43 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
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rentals</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/responsiveness.css">
</head>
<body>
<header class="row">
<nav class="navbar navbar-default position-fixed">
<div class="container-fluid ml-md-4 nav-mobile nav-header-fl">
<div class="navbar-header">
<i class="material-icons">location_on</i>
<h1><a href="./index.html">rentozi</a></h1>
</div>
<div class="mr-md-4 left-menu">
<a href="result-page.html"><i class="material-icons">search</i><span class="d-none d-md-block">Apartments</span></a>
<a href="#" class="ml-4 ml-md-3"><i class="material-icons">perm_identity</i><span class="d-none d-md-block">ABOUT</span></a>
<a href="#" class="ml-4 ml-md-3"><i class="material-icons rotate">wifi</i><span class="d-none d-md-block">BLOG</span></a>
<a href="#" class="ml-4 ml-md-3"><i class="material-icons">menu</i><span class="d-none d-md-block">MORE</span></a>
</div>
</div>
</nav>
</header>
<main class="pt-5">
<div class="background-image">
<section id="main-section" class="mx-auto main-section">
<h3 class="h3-rento">RENTOZI..., Through us we can get you your dream house</h3>
<form action="/" class="mx-auto pt-3 pt-md-5 pb-2 form">
<div class="form-div ml-0 ml-md-5 pb-3 mx-auto">
<label class="label" for="search">SEARCH BY KEY WORD</label>
<div class="flex-column flex-md-row search-div">
<input type="search" class="border-0 mx-auto mx-md-0" id="search" name="search">
<a href="./result-page.html" class="btn btn-primary rounded-0 border-0 mt-3 mt-md-0 search-btn mx-md-0">SEARCH</a>
</div>
</div>
</form>
<div class="out-side-btn mx-auto mt-5 pb-md-4 pb-lg-0">
<button class="btn border-0 mx-auto w-100" id="out-side-btn">HOW IT WORKS</button>
</div>
</section>
</div>
<section id="ways" class="row">
<h2 class="col-12 text-center mt-5 mb-5 lower-h2">Rentozi works in 4 different ways</h2>
<article class="col-lg-6 index-article">
<i class="my-icon material-icons mb-4">image_search</i>
<h2 class="mb-4">1-SEARCH</h2>
<p class="w-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum</p>
</article>
<article class="col-lg-6 index-article">
<i class="my-icon material-icons mb-4">terrain</i>
<h2 class="mb-4">2-LOCATE</h2>
<p class="w-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum</p>
</article>
<article class="col-lg-6 mt-3 pt-4 index-article">
<i class="my-icon material-icons mb-4">turned_in</i>
<h2 class="mb-4">3-APPLY</h2>
<p class="w-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum</p>
</article>
<article class="col-lg-6 mt-3 pt-4 index-article">
<i class="my-icon material-icons mb-4">beach_access</i>
<h2 class="mb-4">4-RELAX</h2>
<p class="w-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum</p>
</article>
</section>
</main>
</body>
</html>