-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (158 loc) · 5.34 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
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link
rel="icon"
type="image/png"
href="https://bytegrad.com/course-assets/js/2/favicon.png"
/>
<!-- Google-font css cdn -->
<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=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Font-Awesome css cdn -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<!-- Custom css links -->
<link rel="stylesheet" href="./src/StyleSheet/main.css" />
<!-- Custom js link -->
<script src="./index.js" type="module"></script>
<title>rmtDev | Step into the world of remote work</title>
</head>
<body class="body">
<!-- Fade Animation -->
<div class="fadeIntro">
<img
src="https://bytegrad.com/course-assets/js/2/pattern.svg"
alt="fadeIntro-pattern"
class="fadeIntro__pattern"
/>
<img
src="https://bytegrad.com/course-assets/js/2/logo.svg"
alt="fadeIntro-logo"
class="fadeIntro__logo fade-in"
/>
</div>
<!-- App Background -->
<div class="background">
<img
src="https://bytegrad.com/course-assets/js/2/pattern.svg"
alt="Background pattern"
class="background__pattern"
/>
</div>
<!-- Header -->
<header class="header">
<div class="header__top">
<a href="./index.html" class="logo">
<img
src="https://bytegrad.com/course-assets/js/2/logo.svg"
alt="Logo"
class="logo__img"
/>
</a>
<button class="bookmarks-btn">
Bookmarks <i class="fa-solid fa-caret-down bookmarks-btn__icon"></i>
</button>
<ul class="job-list job-list--bookmarks"></ul>
</div>
</header>
<!-- Main -->
<main class="main">
<!-- Intro Animation -->
<section class="intro">
<h1 class="first-heading">
Find your <span class="u-bold">remote developer</span> job
</h1>
<form action="#" class="search">
<button type="submit" class="search__submit-btn">
<i class="fa-solid fa-magnifying-glass search__icon"></i>
</button>
<input
class="search__input"
spellcheck="false"
type="text"
required
placeholder="Find remote developer jobs..."
/>
</form>
</section>
<!-- App Container -->
<div class="container">
<!-- Job List -->
<section class="search-results">
<div class="spinner spinner--search spinner--hidden"></div>
<div class="search-results__top">
<p class="count">
<span class="count__number u-bold">0</span> results
</p>
<section class="sorting">
<i class="fa-solid fa-arrow-down-short-wide sorting__icon"></i>
<button class="sorting__button sorting__button--salary">
Salary
</button>
<button class="sorting__button sorting__button--recent">
Recent
</button>
</section>
</div>
<ul class="job-list job-list--search"></ul>
<section class="pagination">
<button
class="pagination__button pagination__button--back pagination__button--hidden"
>
<i class="fa-solid fa-arrow-left pagination__icon"></i>
Page
<span class="pagination__number pagination__number--back">1</span>
</button>
<button class="pagination__button pagination__button--next">
Page
<span class="pagination__number pagination__number--next">2</span>
<i class="fa-solid fa-arrow-right pagination__icon"></i>
</button>
</section>
</section>
<!-- Job Detail -->
<section class="job-details">
<div class="spinner spinner--job-details"></div>
<div class="job-details__content">
<div class="job-details__start-view">
<p class="job-details__start-text job-details__start-text--big">
What are you looking for?
</p>
<p class="job-details__start-text">
Start by searching for any technology your ideal job is working
with
</p>
</div>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="footer" style="display: none;">
<p class="jobs-available">
<span class="u-bold">10957</span> total jobs available
</p>
</footer>
<!-- Error box -->
<section class="error">
<i class="fa-solid fa-circle-exclamation error__icon"></i>
<div class="error__right">
<p class="error__title">Something went wrong</p>
<p class="error__text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</section>
</body>
</html>