Header
To make a floating navigation panel we have to separate it from the header, leaving there only the company information.
To do so and having a responsive site, the following classes are used:
| Class | Styles | Description |
|---|---|---|
.header-info |
Header content | It's a flexbox container for all the header contents, allowing to center h1, div.logo, p, and other related elements. |
.gold |
Element color | Sets the Color: to #ddb885. |
.nav-container |
Navigation panel container | It's a class applied to the <div> that contains the floating navigation panel. |
.borders-a |
All borders | Aplies a border radius of 20px to an element. |
.shadow |
Shadow | Applies a shadow to the element with an offset of -10px, 10px. |
.calibri |
Source Sans 3 typeface | Applies this font-family to the elements. |
.a-nav |
Navigation anchors | Styles the anchors for the navigation panel, seting base and :hover characteristics. |
Cool text right?
Main
| Class | Styles | Description |
|---|---|---|
.container |
Main <div> |
It's the class for the main <div> of a section. All the content of each section can be centered and aligned thanks to him. |
.half |
Half a <div>? |
If you're thinking in splitting the content in two columns, this is your class! Don't lose time, buy it now for only $9.99!! |
.content-box |
More <div>s |
This one is another flex container, but it's width is a little reduced and is not a flexbox. Weird, right? |
.title |
Content tytle | Presets the <div> to be a cyan title, setting the dimensions, background and font-family. |
.content |
Content | A preset flexbox to write the content with a defined background and width. |
.borders-t |
Top borders | Sets a radius of 20px for the top borders of an element. |
.borders-b |
Bottom borders | Sets a radius of 20px for the bottom borders of an element. |
.fit |
Fit content | Sets the min-width to fit-content. |
.brd |
Span left border | Sets a gray right dashed semitransparent border. |
.on-top |
Flexbox align | Aligns items and content at the start of the flexbox. |
With the classes .container, .half, .title, .content-box I can pretty much do everything, separating everything in containers to make this floating sections without much effort.
Each one has it's own characteristics that allows me to make each floating panel responsive. Almost all, are flexboxes.
Fonts:
Times New Roman - Logo:
¡The quick brown fox jumps over the lazy dog!¿?1234567890
¡The quick brown fox jumps over the lazy dog!¿?1234567890
¡The quick brown fox jumps over the lazy dog!¿?1234567890
Source Sans 3 - Main content:
¡The quick brown fox jumps over the lazy dog!¿?1234567890
¡The quick brown fox jumps over the lazy dog!¿?1234567890
¡The quick brown fox jumps over the lazy dog!¿?1234567890
Cool text
You want the code for the cool text?
OKok.. Here it is:
HTML:
<div class="half">
<div class="content-box borders-a shadow calibri">
<div class="video-text borders-a">
<h2>Cool text right?</h2>
<video autoplay loop muted>
<source src="./neon_circles.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
CSS:
.video-text{
position: relative;
text-align: center;
overflow: hidden;
}
.video-text h2{
margin: auto;
padding: 15% 0;
font-size: 5vw;
text-transform: uppercase;
color: white;
background-color: black;
mix-blend-mode: multiply;
}
.video-text video{
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
Sadly.. It only works with a black background..
Some colors
Navigation background: eerie black
#18181a
body background: jet-black
linear gradient: 160deg, #272b2c, #14191c
Title background: cyan-sky
linear gradient: to right, darkcyan, 80%, #71daf7