Header - search v3

Developer
Josh Vogt
Size
4,093 Kb
Views
18,216
  1. Header - search v3 Previews
  2. Header - search v3 HTML Codes
  3. Header - search v3 CSS Codes

How do I make an header - search v3?

Version 3 of the new search header. This one is closest to the current version with the search fields always visible below the header.. What is a header - search v3? How do you make a header - search v3? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.

Header - search v3 Previews
IQ Test

Header - search v3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Header - search v3</title> <link rel='stylesheet prefetch' href='https://www.workopolis.com/assets/account/myworkopolis/styles/standard.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header-fullwidth"> <div class="header-container"> <nav> <a><img src="http://placehold.it/40"></a> <a>Nav item One</a> <a>Nav item Two</a> <a>Nav item Three</a> <a>Nav item Four</a> </nav> </div>
</div>
<div class="header-fullwidth search-fullwidth"> <div class="global-search"> <form> <p> <input type="text" class="keyword search-field-trigger" placeholder="Job Title, Keywords" tabindex="1" /> </p> <p> <input type="text" class="location search-field-trigger" placeholder="Location" tabindex="2"/> </p> <button class="submit-search btn4 search-field-trigger" tabindex="3">Find Jobs</button> </form> </div>
</div>
<main> <h1>WORKOPOLIS</h1> <section class="worko-box"> <h3 class="worko-heading">Box of Content</h3> <p> Whilom ther was dwellynge at oxenford
A riche gnof, that gestes heeld to bord,
And of his craft he was a carpenter.
With hym ther was dwellynge a poure scoler,Hadde lerned art, but al his fantasye Was turned for to lerne astrologye, And koude a certeyn of conclusiouns,
To demen by interrogaciouns,
If that men asked hym in certein houres
Whan that men sholde have droghte or elles shoures,
Or if men asked hym what sholde bifalle </p> </section> <section class="content-box"> <h2>Awesome Headline</h2> <p> Of every thyng; I may nat rekene hem alle. This clerk was cleped hende nicholas.Of deerne love he koude and of solas; And therto he was sleigh and ful privee, And lyk a mayden meke for to see. A chambre hadde he in that hostelrye
Allone, withouten any compaignye,
Ful fetisly ydight with herbes swoote;
And he hymself as sweete as is the roote
Of lycorys, or any cetewale.
His almageste, and bookes grete and smale,
His astrelabie, longynge for his art,
His augrym stones layen faire apart,
On shelves couched at his beddes heed;
His presse ycovered with a faldyng reed;
And al above ther lay a gay sautrie,
On which he made a-nyghtes melodie
So swetely that all the chambre rong;
And angelus ad virginem he song;And after that he song the kynges noote.Ful often blessed was his myrie throte. </p> </section> <div class="images worko-box"> <h3 class="worko-heading">LOOK AT THESE PICS!</h3> <img src="http://lorempixel.com/400/400/" /> <img src="http://lorempixel.com/400/400/nature" /> <img src="http://lorempixel.com/400/400/sports" /> </div> <section class="content-box"> <h2>Awesome Headline</h2> <p> Of every thyng; I may nat rekene hem alle. This clerk was cleped hende nicholas.Of deerne love he koude and of solas; And therto he was sleigh and ful privee, And lyk a mayden meke for to see. A chambre hadde he in that hostelrye
Allone, withouten any compaignye,
Ful fetisly ydight with herbes swoote;
And he hymself as sweete as is the roote
Of lycorys, or any cetewale.
His almageste, and bookes grete and smale,
His astrelabie, longynge for his art,
His augrym stones layen faire apart,
On shelves couched at his beddes heed;
His presse ycovered with a faldyng reed;
And al above ther lay a gay sautrie,
On which he made a-nyghtes melodie
So swetely that all the chambre rong;
And angelus ad virginem he song;And after that he song the kynges noote.Ful often blessed was his myrie throte. </p> </section>
</main>
</body>
</html>

Header - search v3 - Script Codes CSS Codes

body { background: #eee;
}
body:before { background: none;
}
.header-fullwidth { height: 60px; width: 100%; position: fixed; background: #69be28; z-index: 1000;
}
.header-fullwidth.search-fullwidth { top: 60px; background: #bed600;
}
.header-fullwidth .header-container { width: 960px; margin: 0 auto; height: inherit; position: relative;
}
.header-fullwidth nav { width: 600px; height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; float: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.header-fullwidth nav a { color: white; text-decoration: none; padding: 20px 10px; font-size: 16px; font-family: 'BryantRegular';
}
.header-fullwidth nav a:hover { background: #BED600;
}
.header-fullwidth .global-search { width: 960px; margin: 0 auto; background: #BED600; height: 60px; overflow: hidden; -webkit-transition: all .4s ease .1s; transition: all .4s ease .1s;
}
.header-fullwidth .global-search form { display: block; float: left;
}
.header-fullwidth .global-search p { width: 350px; display: inline-block; margin-right: 20px; -webkit-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
}
.header-fullwidth .global-search p:nth-of-type(2) { -webkit-transform: scaleX(1); transform: scaleX(1);
}
.header-fullwidth .global-search p input { padding: 0 10px;
}
.header-fullwidth .global-search .submit-search { border-radius: 4px; font-size: 16px; -webkit-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s; margin-top: 10px;
}
main { padding: 140px 20px 20px 20px; width: 960px; margin: 0 auto;
}
main .worko-box { width: 30%; background: #fff;
}
main .content-box { width: 60%; float: left; margin-left: 20px;
}
main .images { display: -webkit-box; display: -ms-flexbox; display: flex; width: 960px;
}
main .images img { margin: 10px; -webkit-filter: grayscale(1) blur(3px); filter: grayscale(1) blur(3px); -webkit-transition: all .3s linear; transition: all .3s linear;
}
main .images img:hover { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0);
}
Header - search v3 - Script Codes
Header - search v3 - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded November 18, 2022
Rating 3
Size 4,093 Kb
Views 18,216
Do you need developer help for Header - search v3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Vogt (josh_vogt) Script Codes
Name
Toggle - grouped
Toggle - just a dropdown
Header - search v1
CSS modals and sheets animations
Workopolis SVG Logo - Animated
A Pen by Josh Vogt
Dismissing and Adding items with CSS transforms
Making links into checkboxes
Animating Flexbox Properties
Items sliding out of list
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!