Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header Changes #32

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Header Changes #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
<title>Hello Jobs!</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
--><title>Hello Jobs!</title>
<link rel="stylesheet" href="styles.css">
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand All @@ -25,13 +26,15 @@

<div class="header-limiter">

<h1><a href="#">Hello <span>Jobs</span></a></h1>
<h1 style="font-size: 50px;"><a href="#">Hello <span>Jobs</span></a></h1>

<nav>
<a href="#">Home</a>
<a href="#" class="selected">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
<nav id="header_content">
<a href="#" id="home" style="color:black"> Home </a>
<a href="#" id="blog" style="color:black"> Blog </a>
<a href="#" id="about" style="color:black"> About </a>
<a href="#" id="contact" style="color:black"> Contact </a>
<a href="#explore_jobs" id="explore_icon" style="color:black"> Explore </a>
<button id="login"> Login </button>
</nav>

</div>
Expand All @@ -45,9 +48,9 @@ <h1><a href="#">Hello <span>Jobs</span></a></h1>
<div class="later-img"><img src="./resources/limg.png" alt="job" class="limg"></div>
<div class="left-back"><img src="./resources/Ellipse 1.png" class="left-back-img"></div>
<div class="banner-tag"><h3 class="banner-tag-h">Get Your<br>Dream Job</h3></div>
<div class="banner-msg"><p class="banner-msg-p">Explore some really exciting jobs for yourself</p></div>
<div class="banner-msg" ><p class="banner-msg-p">Explore some really exciting jobs for yourself</p></div>
<div class="search-box">
<form action="Post">
<form action="Post" id="explore_jobs">
<input type="text" id="search-box" placeholder="Enter Job Type">
<input type="button" id="search" value="Search">
</form>
Expand Down
73 changes: 71 additions & 2 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.header-fixed {
background-color: #292c2f;
background-color:rgba(185, 173, 252, 0.5);
box-shadow: 0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
Expand All @@ -11,6 +11,61 @@
transition: top 0.3s;
}


a+a {
margin-left: 10px;
}
#explore_icon + button{
margin-left: 10px;
}
#login{
font-size:18px;
background-color: #5383d3;
color:azure;
border-radius: 15px;
padding:0.3vw 0.5vw 0.3vw 0.5vw;
}
/*---hover effects----*/
#login:hover{
background-color:blueviolet;
transition: 0.4s ease-in-out;
cursor: pointer;
}

.header-fixed .header-limiter #header_content:hover{
color: black;
text-decoration: none;
transition: 0.2s ease-in-out;

border-radius: 10px;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
}
#home:hover{
text-decoration:underline plum 4px;
font-weight: bolder;
transition: 0.4s ease-in-out;
}
#blog:hover{
text-decoration:underline plum 4px;
font-weight: bolder;
transition: 0.4s ease-in-out;
}
#about:hover{
text-decoration:underline plum 4px;
font-weight: bolder;
transition: 0.4s ease-in-out;
}
#contact:hover{
text-decoration:underline plum 4px;
font-weight: bolder;
transition: 0.4s ease-in-out;
}
#explore_icon:hover{
text-decoration:underline plum 4px;
font-weight: bolder;
transition: 0.4s ease-in-out;
}
/*---hover effects end---*/
.header-fixed .header-limiter {
max-width: 1200px;
text-align: center;
Expand Down Expand Up @@ -87,11 +142,25 @@ body.fixed .header-fixed .header-limiter nav {
line-height: 28px;
font-size: 13px;
}
@media screen and(max-device-width:800px){
.header-fixed{
width:116%;
}
.header-fixed .header-limiter nav a {
display: inline-block;
padding: 0 5px;
text-decoration: none;
color: #ffffff;
opacity: 0.9;
font-size: 20px;
}
}


@media all and (max-width: 700px) {
.header-fixed {
padding: 20px 0;
height: 75px;
height: 7rem;
}

.header-fixed .header-limiter h1 {
Expand Down