Website: Style the Navigation

06. Style the Navigation

Make sure the overlay and the navigation look great!

Mentor Seraphina

Seraphina leans against the table and gives you a wink.
“And don’t forget the overlay needs two backgrounds. One repeating for the structure – and on the right, an image of our Flame Keeper, Lyara.”

She taps her finger on your notebook.
“The background of the links should be set in semi-transparent white. That way, Lyara stays visible even on small devices and doesn’t get lost in the design.
And please style the icon properly too, so the first part is complete.”

Your Task

Two images – one spell:

img/background.jpg – the eternal tapestry of pattern, free to repeat
img/heroes/lyara.jpg – Lyara, the heroine, standing proud on the right, no copies allowed (no-repeat)
Combine both using background-blend-mode: multiply and toss out the dark background color from the cauldron.
If you’ve forgotten the spell, consult this magical source onW3Schools.

Max width: 400px – no spreading into chaos! Automatically centered – as if balancing itself.
Background: translucent white #ffffff9c
Use the existing classes for generous padding and soft corners.

Use the primary magical color from your root formula.
Font family: –accent-font
Font size: –font-size-title
transition: 0.3s
On hover: use the –secondary variable for that radiant reaction.

So allies instantly recognize the path.

Remove outdated spells (fixed font size, fixed color)
Add:

Remove outdated spells (fixed font size, fixed color)
padding: 5px 10px
background-color: var(–primary)
border-radius: var(–border-small)
transition: 0.3s
On hover:
Change background-color to var(–secondary) – as smooth as a well-cast incantation.

The close button uses the color from –primary and smoothly transitions to –secondary when hovered. Magical, isn’t it?

Use the descendant selector from .open-btn to style the Material Design icon (i):

Font size: –font-size-large
Color: –light
So that all may see this is a gateway to hidden knowledge.

Solve the task here in the console [–> Open in a new tab]

CSS

/* The veil of the background */
.overlay {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   background: url(img/heroes/lyara.jpg) right bottom no-repeat, url(img/background.jpg) repeat;
   overflow-x: hidden;
   transition: width 0.5s ease;
   background-blend-mode: multiply;
}

/* The container for the links */
.overlay-content {
   position: relative;
   top: 50%;
   max-width: 400px;
   margin: auto;
   text-align: center;
   transform: translateY(-50%);
   background-color: #ffffff9c;
   padding: var(--spacing-large);
   border-radius: var(--border-large);
}

/* The links */
.overlay-content a {
   padding: 15px;
   text-decoration: none;
   font-size: var(--font-size-title);
   color: var(--primary);
   display: block;
   transition: 0.3s;
   font-family: var(--accent-font)
}

/* The magical color change on hover */
.overlay-content a:hover {
   color: var(--secondary);
}

/* Close button */
.closebtn {
   position: absolute;
   top: 20px;
   right: 45px;
   font-size: 60px;
   color: var(--primary);
   text-decoration: none;
}

.closebtn:hover {
   color: var(--secondary);
}

/* The button to open */
.open-btn {
   padding: 5px 10px;
   background-color: var(--primary);
   border-radius: var(--border-small);
   border: none;
   cursor: pointer;
   transition: 0.3s;
}

/* When hovering over the button */
.open-btn:hover {
   background-color: var(--secondary);
}

/* Use the descendant selector of open-btn for the Material-Design icon (i) */
.open-btn i {
   font-size: var(--font-size-large);
   color: var(--light);
}