BEM Flexbox Nav build for a workshop

Developer
Size
3,126 Kb
Views
34,408

How do I make an bem flexbox nav build for a workshop?

What is a bem flexbox nav build for a workshop? How do you make a bem flexbox nav build for a workshop? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

BEM Flexbox Nav build for a workshop Previews

BEM Flexbox Nav build for a workshop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BEM Flexbox Nav build for a workshop</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html { font-size: 16px; height: 100%;
}
body { height: 100%;
}
a { text-decoration: none; color: #000;
}
.container { display: flex; height: 100%; flex-direction: row; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8);
}
.tabs { list-style-type: none; margin: 0; padding: 0;
}
.tabs li { transition: all 150ms;
}
.tabs { display: flex; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%) #fff; /* W3C */ text-transform: uppercase; border-radius: 3px; text-align: center;
}
.site-nav__item { padding: .5rem 1rem; border-right: 1px dashed rgba(0, 0, 0, 0.2); display: flex; flex-direction: row; align-items: center; justify-content: center;
}
.site-nav__item:last-child { border-right: none;
}
.site-nav__item:hover { background-color: rgba(0, 0, 0, 0.1);
}
.site-nav__link { font-weight: bold; font-size: .8rem;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <ul class="tabs site-nav"> <li class="tabs__item site-nav__item"> <a href="#" class="tabs__link site-nav__link">The workshop</a> </li> <li class="tabs__item site-nav__item"> <a href="#" class="tabs__link site-nav__link">2013 Schedule</a> </li> <li class="tabs__item site-nav__item"> <a href="#" class="tabs__link site-nav__link">About CSSWizardry</a> </li> <li class="tabs__item site-nav__item"> <a href="#" class="tabs__link site-nav__link">Contact</a> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

BEM Flexbox Nav build for a workshop - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { font-size: 16px; height: 100%;
}
body { height: 100%;
}
a { text-decoration: none; color: #000;
}
.container { display: flex; height: 100%; flex-direction: row; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8);
}
.tabs { list-style-type: none; margin: 0; padding: 0;
}
.tabs li { transition: all 150ms;
}
.tabs { display: flex; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%) #fff; /* W3C */ text-transform: uppercase; border-radius: 3px; text-align: center;
}
.site-nav__item { padding: .5rem 1rem; border-right: 1px dashed rgba(0, 0, 0, 0.2); display: flex; flex-direction: row; align-items: center; justify-content: center;
}
.site-nav__item:last-child { border-right: none;
}
.site-nav__item:hover { background-color: rgba(0, 0, 0, 0.1);
}
.site-nav__link { font-weight: bold; font-size: .8rem;
}
BEM Flexbox Nav build for a workshop - Script Codes
BEM Flexbox Nav build for a workshop - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 3
Size 3,126 Kb
Views 34,408
Do you need developer help for BEM Flexbox Nav build for a workshop?

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!

Andy McFee (andymcfee) Script Codes
Create amazing blog posts 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!