-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
143 lines (123 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is where your description goes">
<meta name="keywords" content="one, two, three">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle Tech Jobs</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="public/css/style.css">
<!-- Fonts and Icons -->
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/8745b435ef.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="navy shadow">
<img src="public/images/logo-lockup.png"
alt="logo for Triangle Tech Jobs, a yellow triangle with three buildings inside">
<nav>
<a>Jobs</a>
<a href="/companies.html">Companies</a>
<a class="yellowButton">Sign In</a>
</nav>
</header>
<main>
<section id="featureOne">
<!-- <img src="images/word-mark.png" alt="Triangle Tech Jobs"> -->
<h1 class="headingFont">Triangle Tech Jobs</h1>
<h2 class="headingFont">Career Services for Tech Professionals in the Triangle.</h2>
<form class="shadow">
<input type="text" name="jobTitle" value="Search Job Title">
<button type="button" name="jobTitleSearch"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
<fieldset>
<legend class="bold">Filter:</legend>
<section class="filterOption">
<input type="checkbox" id="remote" name="remote">
<label for="remote">Remote</label>
</section>
<section class="filterOption">
<input type="checkbox" id="flexible" name="flexible">
<label for="flexible">Flexible</label>
</section>
<section class="filterOption">
<input type="checkbox" id="fullTime" name="fullTime">
<label for="fullTime">Full Time</label>
</section>
<section class="filterOption">
<input type="checkbox" id="contract" name="contract">
<label for="contract">Contract</label>
</section>
<section class="filterOption">
<input type="checkbox" id="benefits" name="benefits">
<label for="benefits">Benefits</label>
</section>
</fieldset>
</section>
<section id="featureTwo" class="gray">
<h2 class="headingFont">New Jobs</h2>
<section class="jobBoxHolder">
<section class="jobBox">
<h3 class="jobTitle">Job Title</h3>
<section class="jobDetails">
<h5 class="companyName">Company Name</h5>
<h5 class="location">Location</h5>
<h5 class="salaryRange">Salary Range</h5>
</section>
<p class="jobDescription">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>
</section>
<section class="jobBox">
<h3 class="jobTitle">Job Title</h3>
<section class="jobDetails">
<h5 class="companyName">Company Name</h5>
<h5 class="location">Location</h5>
<h5 class="salaryRange">Salary Range</h5>
</section>
<p class="jobDescription">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>
</section>
</section>
</section>
<section id="featureThree">
<h2 class="headingFont">Companies We Work With</h2>
<section class="companyLogoHolder">
<img src="" class="companyLogos" alt="company logo number one">
<img src="" class="companyLogos" alt="company logo number two">
<img src="" class="companyLogos" alt="company logo number three">
</section>
</section>
</main>
<footer class="navy">
<img src="public/images/logo-lockup.png"
alt="logo for Triangle Tech Jobs, a yellow triangle with three buildings inside">
<section class="footerColumn">
<h5>Triangle Tech Jobs</h5>
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</section>
<section class="footerColumn">
<h5>Follow Us</h5>
<ul>
<li><a href="">Twitter</a></li>
<li><a href="">Github</a></li>
</ul>
</section>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>