2025-04-07 20:48:24 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Discover< / title >
< 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=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" >
< / head >
< body >
< div class = "navbar" >
< div class = "logo-container" >
< i class = "fas fa-sun logo-icon" > < / i >
2025-04-08 03:54:30 +00:00
< span class = "logo-text" > jLink< / span >
2025-04-07 20:48:24 +00:00
< / div >
< div class = "search-container" >
< i class = "fas fa-search search-icon" > < / i >
< input type = "text" placeholder = "Search" class = "search-input" >
< / div >
< div class = "nav-items" >
< div class = "nav-item active" >
< a href = "discover.html" class = "nav-link" >
< i class = "fas fa-compass" > < / i >
< span > Discover< / span >
< div class = "blank" > < / div >
< / a >
< / div >
< div class = "nav-item" >
< a href = "jobs.html" class = "nav-link" >
< i class = "fas fa-briefcase" > < / i >
< span > Jobs< / span >
< div class = "blank" > < / div >
< / a >
< / div >
< div class = "nav-item" >
< a href = "proposals.html" class = "nav-link" >
< i class = "fas fa-file-alt" > < / i >
< span > Proposals< / span >
< div class = "blank" > < / div >
< / a >
< / div >
< div class = "nav-item" >
< a href = "invoices.html" class = "nav-link" >
< i class = "fas fa-dollar-sign" > < / i >
< span > Invoices< / span >
< div class = "blank" > < / div >
< / a >
< / div >
< div class = "nav-item" >
< a href = "learn.html" class = "nav-link" >
< i class = "fas fa-graduation-cap" > < / i >
< span > Learn< / span >
< div class = "blank" > < / div >
< / a >
< / div >
< / div >
< div class = "bottom-nav" >
< div class = "nav-item" >
< a href = "wallet.html" class = "nav-link" >
< i class = "fas fa-wallet" > < / i >
< span > Wallet< / span >
< span class = "badge" > $8,210.45< / span >
< / a >
< / div >
< div class = "nav-item" >
< a href = "inbox.html" class = "nav-link" >
< i class = "fas fa-inbox" > < / i >
< span > Inbox< / span >
< span class = "badge" > 7< / span >
< / a >
< / div >
< div class = "nav-item user-item" >
< a href = "profile.html" class = "nav-link" >
< div class = "user-avatar" >
< img src = "https://images.unsplash.com/photo-1639039186034-27f98b6e5a2f" alt = "Profile" >
< / div >
< span > Emily< / span >
< i class = "fas fa-cog settings-icon right" > < / i >
< / a >
< / div >
< / div >
< / div >
< div class = "content" >
< div class = "discover-header" >
< h1 > Discover Opportunities< / h1 >
< p > Find the best jobs matching your skills and interests< / p >
< / div >
< div class = "discover-filters" >
< div class = "filter-group" >
< h3 > Skills< / h3 >
< div class = "filter-options" >
< div class = "filter-option" >
< input type = "checkbox" id = "skill1" >
< label for = "skill1" > Product Management< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "skill2" >
< label for = "skill2" > UX Design< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "skill3" >
< label for = "skill3" > Web Development< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "skill4" >
< label for = "skill4" > Data Science< / label >
< / div >
< / div >
< / div >
< div class = "filter-group" >
< h3 > Experience Level< / h3 >
< div class = "filter-options" >
< div class = "filter-option" >
< input type = "checkbox" id = "exp1" >
< label for = "exp1" > Entry Level< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "exp2" >
< label for = "exp2" > Mid Level< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "exp3" >
< label for = "exp3" > Senior< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "exp4" >
< label for = "exp4" > Executive< / label >
< / div >
< / div >
< / div >
< div class = "filter-group" >
< h3 > Job Type< / h3 >
< div class = "filter-options" >
< div class = "filter-option" >
< input type = "checkbox" id = "type1" >
< label for = "type1" > Full-time< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "type2" >
< label for = "type2" > Part-time< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "type3" >
< label for = "type3" > Contract< / label >
< / div >
< div class = "filter-option" >
< input type = "checkbox" id = "type4" >
< label for = "type4" > Freelance< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "job-listings" >
< div class = "job-card" >
< div class = "job-header" >
< div class = "company-logo" >
< img src = "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt = "Company Logo" >
< / div >
< div class = "job-title-container" >
< h2 > Senior Product Manager< / h2 >
< p class = "company-name" > TechCorp Inc.< / p >
< / div >
< div class = "job-tags" >
< span class = "job-tag" > Remote< / span >
< span class = "job-tag" > Full-time< / span >
< / div >
< / div >
< div class = "job-details" >
< p > We're looking for a Senior Product Manager to lead our core product team. You'll be responsible for defining product strategy, roadmap, and working closely with engineering teams.< / p >
< div class = "job-skills" >
< span class = "skill-tag" > Product Strategy< / span >
< span class = "skill-tag" > Roadmapping< / span >
< span class = "skill-tag" > Agile< / span >
< span class = "skill-tag" > User Research< / span >
< / div >
< div class = "job-footer" >
< div class = "job-salary" > $120k - $150k< / div >
< button class = "apply-btn" > Apply Now< / button >
< / div >
< / div >
< / div >
< div class = "job-card" >
< div class = "job-header" >
< div class = "company-logo" >
< img src = "https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80" alt = "Company Logo" >
< / div >
< div class = "job-title-container" >
< h2 > UX/UI Designer< / h2 >
< p class = "company-name" > DesignHub< / p >
< / div >
< div class = "job-tags" >
< span class = "job-tag" > Hybrid< / span >
< span class = "job-tag" > Contract< / span >
< / div >
< / div >
< div class = "job-details" >
< p > Join our creative team as a UX/UI Designer to create beautiful, intuitive interfaces for our clients. You'll collaborate with product managers and developers to deliver exceptional user experiences.< / p >
< div class = "job-skills" >
< span class = "skill-tag" > Figma< / span >
< span class = "skill-tag" > User Testing< / span >
< span class = "skill-tag" > Wireframing< / span >
< span class = "skill-tag" > Prototyping< / span >
< / div >
< div class = "job-footer" >
< div class = "job-salary" > $90k - $110k< / div >
< button class = "apply-btn" > Apply Now< / button >
< / div >
< / div >
< / div >
< div class = "job-card" >
< div class = "job-header" >
< div class = "company-logo" >
< img src = "https://images.unsplash.com/photo-1516876437184-593fda40c7ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt = "Company Logo" >
< / div >
< div class = "job-title-container" >
< h2 > Full Stack Developer< / h2 >
< p class = "company-name" > WebSolutions< / p >
< / div >
< div class = "job-tags" >
< span class = "job-tag" > Remote< / span >
< span class = "job-tag" > Full-time< / span >
< / div >
< / div >
< div class = "job-details" >
< p > We're seeking a talented Full Stack Developer to join our engineering team. You'll be working on building and maintaining web applications using modern technologies.< / p >
< div class = "job-skills" >
< span class = "skill-tag" > React< / span >
< span class = "skill-tag" > Node.js< / span >
< span class = "skill-tag" > PostgreSQL< / span >
< span class = "skill-tag" > AWS< / span >
< / div >
< div class = "job-footer" >
< div class = "job-salary" > $100k - $130k< / div >
< button class = "apply-btn" > Apply Now< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< style >
* {
box-sizing: border-box;
font-family: "Urbanist", sans-serif;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
width: 100vw;
height: 100vh;
padding: 20px;
display: flex;
gap: 20px;
}
.navbar {
width: 300px;
height: 100%;
background-color: #EBF2F2;
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content {
width: 100%;
height: 100%;
background-color: white;
border-radius: 20px;
padding: 30px;
overflow-y: auto;
}
/* Logo styling */
.logo-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.logo-icon {
font-size: 24px;
margin-right: 10px;
color: #333;
}
.logo-text {
font-size: 22px;
font-weight: bold;
color: #333;
}
/* Search bar styling */
.search-container {
position: relative;
margin-bottom: 25px;
}
.search-input {
width: 100%;
padding: 12px 15px 12px 40px;
border: none;
border-radius: 20px;
background-color: white;
font-size: 14px;
}
.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #888;
}
/* Navigation items */
.nav-items {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: auto;
}
.nav-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
color: #333;
font-weight: 500;
position: relative;
border-radius: 10px;
margin: 2px 0;
transition: background-color 0.3s ease;
}
.nav-item i {
width: 25px;
font-size: 16px;
position: relative;
z-index: 2;
}
.nav-item i.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
}
.nav-item span {
font-size: 16px;
position: relative;
z-index: 2;
}
.nav-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: inherit;
text-decoration: none;
}
.nav-item.active {
background-color: white;
}
/* Bottom navigation */
.bottom-nav {
margin-top: auto;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Badge styling */
.badge {
color: #333;
border-radius: 10px;
font-size: 12px;
margin-left: auto;
position: relative;
z-index: 2;
}
/* User item styling */
.user-item {
margin-top: 5px;
}
.user-avatar {
width: 19px;
height: 19px;
background-color: #FF6B6B;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
margin-right: 10px;
position: relative;
z-index: 2;
}
.user-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.blank {
margin-left: auto;
}
/* Discover page specific styles */
.discover-header {
margin-bottom: 30px;
}
.discover-header h1 {
font-size: 32px;
margin-bottom: 5px;
color: #333;
}
.discover-header p {
font-size: 16px;
color: #666;
margin-top: 0;
}
.discover-filters {
display: flex;
gap: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.filter-group {
flex: 1;
}
.filter-group h3 {
font-size: 16px;
margin-bottom: 15px;
color: #555;
}
.filter-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-option {
display: flex;
align-items: center;
gap: 8px;
}
.filter-option label {
font-size: 14px;
color: #444;
}
/* Job listings */
.job-listings {
display: flex;
flex-direction: column;
gap: 20px;
}
.job-card {
border: 1px solid #eee;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.job-header {
display: flex;
align-items: center;
padding: 20px;
background-color: #f9f9f9;
border-bottom: 1px solid #eee;
}
.company-logo {
width: 50px;
height: 50px;
border-radius: 10px;
overflow: hidden;
margin-right: 15px;
}
.company-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.job-title-container {
flex: 1;
}
.job-title-container h2 {
font-size: 18px;
margin: 0 0 5px 0;
color: #333;
}
.company-name {
font-size: 14px;
color: #666;
margin: 0;
}
.job-tags {
display: flex;
gap: 10px;
}
.job-tag {
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 15px;
font-size: 12px;
color: #555;
}
.job-details {
padding: 20px;
}
.job-details p {
font-size: 14px;
line-height: 1.5;
color: #555;
margin-top: 0;
margin-bottom: 15px;
}
.job-skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.skill-tag {
background-color: #f5f5f5;
padding: 6px 12px;
border-radius: 15px;
font-size: 13px;
color: #444;
}
.job-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
.job-salary {
font-size: 16px;
font-weight: 600;
color: #333;
}
.apply-btn {
background-color: #222;
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
< / style >
< / html >
