-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
155 lines (148 loc) · 5.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
<script
src="https://kit.fontawesome.com/fb89be9943.js"
crossorigin="anonymous"
></script>
</head>
<body class="relative container mx-auto">
<!-- Header -->
<header class="container flex justify-between mb-20 px-4 py-2 pt-4">
<!-- Logo -->
<a href="#">
<img class="w-10 hover:opacity-90" src="img/logo.png" alt="logo" />
</a>
<!-- Header Menu -->
<nav class="flex items-center text-slate-700 text-xs font-medium">
<a class="mr-6 hover:text-slate-600 sm:hidden" href="#about"
>About Us</a
>
<ul class="hidden sm:flex">
<li>
<a class="mr-6 hover:text-slate-600" href="#about">About Us</a>
</li>
<li>
<a class="mr-6 hover:text-slate-600" href="#">Services</a>
</li>
<li>
<a class="mr-6 hover:text-slate-600" href="#">Products</a>
</li>
</ul>
<a
href="#contact"
class="rounded-full border border-slate-700 px-4 py-2 hover:bg-slate-700 hover:text-white transition-all duration-200 ease-in-out"
>
Contact Us
<i
class="fa-solid fa-angles-right animation-move-right relative top-03px"
></i>
</a>
</nav>
</header>
<!-- Main -->
<main>
<!-- Hero -->
<section
class="hero px-4 mb-20 container flex-col justify-between items-center sm:flex sm:flex-row xl:justify-center"
>
<h1 class="font-bold text-5xl text-slate-800 max-w-sm mb-10 lg:mr-48">
World-class consulting firm <span class="text-blue-600">.</span>
</h1>
<div>
<p class="max-w-xs mb-10 text-s text-slate-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quae,
adipisci ea consectetur deleniti velit necessitatibus voluptatem
ducimus neque eveniet.
</p>
<a class="font-bold text-s text-blue-600" href="#">See Services</a>
</div>
</section>
<!-- Dark Section 1 -->
<section class="container justify-between bg-black md:flex">
<div
class="flex justify-center items-center flex-col text-center py-20 px-20 w-full md:w-1/2"
>
<img
class="w-24 mb-3 hover:opacity-90"
src="img/logo.png"
alt="logo"
/>
<h3 class="text-slate-200 font-bold text-2xl max-w-xs">
A new, groundbreaking consulting system
</h3>
</div>
<div class="w-full md:w-1/2 image"></div>
</section>
<!-- Divider -->
<div class="container h-16 bg-slate-200"></div>
<!-- About Us Section -->
<section
id="about"
class="px-4 mt-40 mb-20 container w-full flex justify-center items-center"
>
<div>
<h5 class="font-bold text-s text-blue-600 mb-3">About Us</h5>
<p class="font-bold text-3xl text-slate-800 max-w-4xl">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit cumque
animi commodi odio cum nostrum facilis,
<span class="text-slate-500">
voluptates hic consectetur exercitationem doloremque adipisci
</span>
</p>
</div>
</section>
<!-- Call To Action -->
<section
id="contact"
class="bg-blue-600 px-4 py-20 mb-10 w-full justify-center sm:flex sm:justify-between xl:px-48"
>
<form class="mb-10 max-w-sm mr-20 w-full sm:w-1/2">
<input
class="py-2 bg-blue-600 text-blue-100 placeholder-blue-200 text-xs border-b border-blue-200 outline-none mb-6 w-full"
type="text"
placeholder="Name"
/>
<input
class="py-2 bg-blue-600 text-blue-100 placeholder-blue-200 text-xs border-b border-blue-200 outline-none mb-6 w-full"
type="email"
placeholder="Email"
/>
<input
class="py-2 bg-blue-600 text-blue-100 placeholder-blue-200 text-xs border-b border-blue-200 outline-none mb-6 w-full"
type="text"
placeholder="Message"
/>
<button
class="px-4 py-3 bg-blue-50 text-slate-700 text-xs rounded-full border-none shadow-md shadow-blue-700 hover:bg-white transition-all duration-200 ease-in-out"
>
Send Message
<i
class="fa-solid fa-angles-right animation-move-right relative top-03px"
></i>
</button>
</form>
<div>
<h2 class="mb-4 text-blue-50 font-semibold text-3xl max-w-xs">
We are always ready to hear you 24/7
</h2>
<p class="text-blue-200 text-xs max-w-xs leading-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repellendus, fugiat nulla!
</p>
</div>
</section>
</main>
<footer class="px-4 py-7 text-slate-600 text-xs text-center">
<hr class="opacity-40 pb-7" />
<p>© <span id="footerDate"></span> All Rights Reserved</p>
</footer>
<script>
document.getElementById('footerDate').innerHTML = new Date().getFullYear()
</script>
</body>
</html>