-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (148 loc) · 5.62 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
<!DOCTYPE html>
<html>
<head>
<title>AstraHR</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="d-flex d-flex-justify-space">
<div class="header_part_1 d-flex d-flex-items-center">
<picture class="d-flex d-flex-justify-left">
<img src="images/logo.jpg" alt="AstraLogo">
</picture>
<span class="header_title">astraHR</span>
</div>
<div class="main_nav">
<ul class="d-flex d-flex-items-center">
<li class="the_menu"><a href="#">Home</a></li>
<li class="the_menu"><a href="#">Product</a></li>
<li class="the_menu"><a href="#">Pricing</a></li>
<li class="the_menu"><a href="#">About</a></li>
<li class="the_menu"><a href="#">Contact</a></li>
<li class="the_menu"><a href="" class="button_4">LOG IN</a></li>
</ul>
</div>
<div id="open_menu">
<img src="images/menu.png">
</div>
</div>
</div>
</header>
<section class="first-section pt_120 pb_120">
<div class="container">
<div class="d-flex d-flex-items-center">
<div class="w-50 split-left pr-30">
<div class="centered">
<h1 class="first-section_title">Easy to use HR & Payroll Software</h1>
<p class="first-section_paragraph">From employee holidays to sick leaves, payroll management and other automations</p>
<a href="" class="button_1">Start Now!</a>
</div>
</div>
<div class="w-50 split-right">
<picture class="d-flex d-flex-justify-center">
<img src="images/img1.png" alt="TrueFalse">
</picture>
</div>
</div>
</div>
</section>
<section class="second-section pb_120">
<div class="container">
<div class="">
<h1 class="second-section_title">Improve your business efficiency</h1>
<p class="second-section_paragraph">With AstraHR you can finally focus on tasks that matter instead of <br/>
losing time and effort on processes that you could automate.</p>
</div>
<div class="d-flex d-flex-items-center">
<div class="second-section_box mr_05">
<picture class="d-flex d-flex-justify-center">
<img src="images/searching.png" alt="search">
</picture>
<h3 class="header_parts">Administration</h3>
<p class="paragraph_parts">Easy to use for managing <br/> employees, payrolls, reports, <br/> documents, vacations, insurance</p>
</div>
<div class="second-section_box mr_05">
<picture class="d-flex d-flex-justify-center">
<img src="images/coin.png" alt="coins">
</picture>
<h3 class="header_parts">Payroll Management</h3>
<p class="paragraph_parts">Run Payroll by the end of the <br/> month in simple steps and <br/> complete transparency. </p>
</div>
<div class="second-section_box">
<picture class="d-flex d-flex-justify-center">
<img src="images/time.png" alt="deadline">
</picture>
<h3 class="header_parts">Leave Management</h3>
<p class="paragraph_parts">Approve vacation requests <br/> by employees, see a general <br/> overview of available holidays.</p>
</div>
</div>
</div>
</section>
<section class="third_section pt_120 pb_120">
<div class="container">
<div class="third_div">
<h1 class="third-section_title">We are here to help</h1>
<p class="paragraph_parts_3">AstraHR has been created from a business owner <br/ >to solve real business problems. </p>
<div class="button-2">
<a href="" class="button_2">Start Now!</a>
</div>
</div>
</div>
</section>
<footer class="fourth-section pb_80 pt_80">
<div class="container">
<div class="d-flex d-flex-justify-space">
<div class="parts">
<!--<li class="the_menu"><a href="#">Home</a></li>-->
<ul>
<li class="para_headers">Home</li>
<li class="inner_elements"><a href="#">About Us</a></li>
<li class="inner_elements"><a href="#">Pricing</a></li>
</ul>
</div>
<div class="parts">
<ul>
<li class="para_headers">Features</li>
<li class="inner_elements"><a href="#">All Features</a></li>
<li class="inner_elements"><a href="#">Holidays</a></li>
<li class="inner_elements"><a href="#">Sick Leave</a></li>
<li class="inner_elements"><a href="#">Payrolls</a></li>
<li class="inner_elements"><a href="#">Documents</a></li>
<li class="inner_elements"><a href="#">Projects</a></li>
</ul>
</div>
<div class="parts">
<ul>
<li class="para_headers">Members</li>
<li class="inner_elements"><a href="#">Login</a></li>
<li class="inner_elements"><a href="#">Download</a></li>
<li class="inner_elements"><a href="#">Blog</a></li>
<li class="inner_elements"><a href="#">Support</a></li>
<li class="inner_elements"><a href="#">FAQ</a></li>
</ul>
</div>
<div class="parts">
<ul>
<li class="para_headers">Company</li>
<li class="inner_elements"><a href="#">About</a></li>
<li class="inner_elements"><a href="#">Terms</a></li>
<li class="inner_elements"><a href="#">Privacy</a></li>
<li class="inner_elements"><a href="#">Partnerships</a></li>
</ul>
</div>
<div class="last_header_edit">
<h2 class="last_header">AstraHR serves small <br/> and mid sized businesses</h2><br/>
<form action="" class="email_form">
<input type="email" placeholder="Enter your email here:">
<a href="" class="button_3">Submit</a>
</form>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>