Navigation

Developer
Derick Ruiz
Size
4,311 Kb
Views
10,120
  1. Navigation Previews
  2. Navigation HTML Codes
  3. Navigation CSS Codes

How do I make an navigation?

What is a navigation? How do you make a navigation? This script and codes were developed by Derick Ruiz on 27 December 2022, Tuesday.

Navigation Previews
IQ Test

Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="FlexGrid"> <div class="FlexGrid-cell FlexGrid-cell--fullMinusNav"> <div class="Emotions"> <div class="Emotion BackgroundColor BackgroundColor--oxford"><span class="Fz(10vh)">

Navigation - Script Codes CSS Codes

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body,
p { margin: 0; padding: 0;
}
.Emotions { display: -ms-grid; display: grid; -ms-grid-columns: (50vw)[2]; grid-template-columns: repeat(2, 50vw); -ms-grid-rows: (calc(25vh - 11px))[4]; grid-template-rows: repeat(4, calc(25vh - 11px)); position: relative;
}
@-webkit-keyframes bounce { 0% { top: 50%; } 50% { top: 40%; } 100% { top: 50%; }
}
@keyframes bounce { 0% { top: 50%; } 50% { top: 40%; } 100% { top: 50%; }
}
.BackgroundColor--oxford { background-color: #090446;
}
.BackgroundColor--pastel { background-color: #786F52;
}
.BackgroundColor--rajah { background-color: #FEB95F;
}
.BackgroundColor--tractor { background-color: #F71735;
}
.BackgroundColor--pictoral { background-color: #C2095A;
}
.BackgroundColor--spanish { background-color: #E01A4F;
}
.BackgroundColor--smoky { background-color: #0C090D;
}
.BackgroundColor--caribeen { background-color: #03CEA4;
}
.BackgroundColor--white { background-color: white;
}
.Emotion { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative;
}
.Pstart\(default\) { padding-left: 1rem;
}
.Pend\(default\) { padding-right: 1rem;
}
.Ptop\(default\) { padding-top: 1rem;
}
.Pbottom\(default\) { padding-bottom: 1rem;
}
.C\(white\) { color: white;
}
.Ff\(default\) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.Fz\(u1\) { font-size: 1.618rem;
}
.Fz\(10vh\) { font-size: 10vh;
}
.Lh\(14\) { line-height: 1.4;
}
.Fw\(bold\) { font-weight: 700;
}
.Fs\(italic\) { font-style: italic;
}
.Td\(u\) { text-decoration: underline;
}
.F\(left\) { float: left;
}
.W\(200vw\) { width: 200vw;
}
.W\(100vw\) { width: 100vw;
}
.Ox\(hidden\) { overflow-x: hidden;
}
.Oy\(hidden\) { overflow-y: hidden;
}
.Br\(default\) { border-right: 1px solid #252525;
}
.Bt\(default\) { border-top: 1px solid #252525;
}
.Clearfix:before,
.Clearfix:after { content: ""; display: table;
}
.Clearfix:after { clear: both;
}
.Screen { min-height: 100vh;
}
.Tracked--empty { background-color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.Tracked--emptyEmoji { font-size: 4.23580103125rem;
}
.FlexGrid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.FlexGrid.FlexGrid--full { width: 100%;
}
.FlexGrid.FlexGrid--fullHeight { height: 100%;
}
.FlexGrid.FlexGrid--guttersOneDown { margin-left: -0.618rem;
}
.FlexGrid.FlexGrid--guttersOneDown > .FlexGrid-cell { padding-left: 0.618rem;
}
.FlexGrid-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.FlexGrid-cell.FlexGrid-cell--flex { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.FlexGrid-cell.FlexGrid-cell--fullMinusNav { height: calc(100vh - 44px);
}
.FlexGrid-cell.FlexGrid-cell--nav { height: 44px;
}
.FlexGrid-cell.FlexGrid-cell--alignCenter { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.FlexGrid-cell.FlexGrid-cell--alignSelfCenter { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
Navigation - Script Codes
Navigation - Script Codes
Home Page Home
Developer Derick Ruiz
Username derickruiz
Uploaded December 27, 2022
Rating 3
Size 4,311 Kb
Views 10,120
Do you need developer help for Navigation?

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!

Derick Ruiz (derickruiz) Script Codes
Name
Rrremark.com notification
Hungry Carousel
Patterns Screen
Sign up form - DailyUI 001
Dating App
Credit card form - Daily UI 002
Why CSS Architecture Matters Example 2
Rrremark.com Overlay Highlighter
Why CSS Architecture Matters Example 3
Create amazing sales emails 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!