Rosen Center Nav
How do I make an rosen center nav?
CSS Nav TabForked from Pedro Orellana's Pen Rosen Center Nav .. What is a rosen center nav? How do you make a rosen center nav? This script and codes were developed by Jek Bao Choo on 19 January 2023, Thursday.
Rosen Center Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rosen Center Nav </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="uptext" class="animated fadeInDown"><font color="#e7342b">NEW</font> Spring 2014 Series!</div>
<br>
<br>
<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked"> <label for="tab-1" class="tab-label-1 color1">NEW! CC: Biology</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2 color1"> <label for="tab-2" class="tab-label-2 color2">CC: Periodic Table</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"> <label for="tab-3" class="tab-label-3 color3">Digital Literacy</label> <!-- <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"> <label for="tab-4" class="tab-label-4 color4">New Series</label>--> <div class="clear-shadow"></div> <div class="content"> <div class="content-1"> <img src="http://stage.rosenpub.com/library/images/CC_Biology_Banner_520x350.jpg"> <h1><font color="#e7342b">NEW!</font> Core Concepts: Biology</h1> <p>Core Concepts: Biology, the second database in Rosen's Core Concepts suite, encourages middle and high school students to think like scientists! Supporting STEM learning and the Next Generation Science Standards, this rich resource covers the study of life from adaptation to zooplankton, and includes such topics as animal systems, cell biology, ecology, genetics, microbes, plant structures, and more.</p> <h3><a mce_thref="" mce_href="">Learn more</a> and <a mce_thref="" mce_href="">sign up</a> for a <b>free trial!</b> </h3> </div> <div class="content-2"> <img src="http://stage.rosenpub.com/library/images/CC_PT_Banner_525x350.jpg"> <h1>Core Concepts: Periodic Table</h1> <p>Support STEM learning and the Next Generation Science Standards with this fully interactive database on the 118 elements. The engaging, intuitive user interface invites hands-on learning and makes complex scientific concepts easy to understand. Interactive activities help students explore the science behind the periodic table, reinforcing skills and core ideas.</p> <h3><a mce_thref="" mce_href="">Learn more</a> and <a mce_thref="" mce_href="">sign up</a> for a <b>free trial!</b> </h3> </div> <div class="content-3"> <img src="http://stage.rosenpub.com/library/images/DigitlaLiteracy_Banner_525x350.jpg"> <h1>Digital Literacy</h1> <p>Help your 21st-century learners become savvy digital citizens by empowering them with the knowledge and skill set to safely and effectively navigate the digital world. Interactive activities provide a step-by-step walkthrough preparing students to use the digital tools at their fingertips. Find out why School Library Journal calls Digital Literacy "the Ellis Island for today's middle and high school students and their teachers!"</p> <h3><a mce_thref="" mce_href="">Learn more</a> and <a mce_thref="" mce_href="">sign up</a> for a <b>free trial!</b> </h3> </div> <div class="content-4"> <h1><font color="#e7342b">NEW!</font> Spring 2014 Titles</h1> <p>Coming Soon!</p> <h3><a mce_thref="" mce_href="">Learn more</a> and <a mce_thref="" mce_href="">sign up</a> for a <b>free trial!</b> </h3> </div> </div>
</section>
</body>
</html>
Rosen Center Nav - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:700italic,400italic);
#uptext { background: #e6f0f7; width: 520px; height: 42px; margin-top: 0px; padding-top: 20px; color: #0066a4; font-family: 'Droid Serif', serif,; font-size: 28px; font-weight: 700; text-align: center; font-style: italic;
border-radius: 7px 7px 0 0;
}
.animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
.animated.hinge { -webkit-animation-duration: 3s; animation-duration: 3s;
}
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
} a, a:visited { color: #0066a4; text-decoration: none; } a:hover, a:active { color: #888; } h1, h2, h3 { font-family: 'Roboto',Arial,sans-serif; } h1 { font-size: 28px; font-weight: 700; color: #000; } h2 { font-size: 18px; font-weight: 400; } h3 { font-size: 15px; font-weight: 400; }
.tabs { position: relative; margin: 2px auto; width: 520px;
}
.tabs input { position: absolute; z-index: 1000; width: 130px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer;
}
.tabs input#tab-2{ left: 130px;
}
.tabs input#tab-3{ left: 260px;
}
.tabs input#tab-4{ left: 390px;
}
.color1 { background: #66af21 ; color: #fff;
}
.color2 { background: #1fa6c9 ; color: #fff;
}
.color3 { background: #134167 ; color: #fff;
}
.color4 { background: #ea6916 ; color: #fff;
}
.tabs label { font-size: 12px; line-height: 40px; height: 40px; position: relative; padding: 0px; float: left; display: block; width: 130px; border-radius: 7px 7px 0 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-transform: normal; text-align: center;
}
.tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block;
}
.tabs input:hover + label { background: #e6f0f7; color: #0066a4;
}
.tabs label:first-of-type { z-index: 4; box-shadow: 1px 0 1px rgba(0,0,0,0.1);
}
.tab-label-2 { z-index: 3;
}
.tab-label-3 { z-index: 2;
}
.tab-label-4 { z-index: 1;
}
.tabs input:checked + label { z-index: 6;
}
.clear-shadow { clear: both;
}
.content { background: #fff; position: relative; width: 100%; height: 600px; z-index: 5;}
.content div { position: absolute; top: 0; left: 0; padding: 10px 0px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s;
}
![Rosen Center Nav - Script Codes](http://shots.codepen.io/jek/pen/GpWJEV-512.jpg)
Developer | Jek Bao Choo |
Username | jek |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 3,677 Kb |
Views | 8,096 |
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!
Name | Size |
Playing with Typeahead.js | 2,109 Kb |
Understanding JS Event Loop | 2,268 Kb |
Using Bootstrap | 3,518 Kb |
Imagining our data import steps | 3,095 Kb |
Working with JavaScript Arrays and Dictionaries | 2,775 Kb |
Using ECharts | 2,888 Kb |
Remembering AngularJS Filter | 2,367 Kb |
Playing with w3schools Modals | 2,644 Kb |
Understanding Dropzone.js | 2,925 Kb |
Playing with Bootstrap Column Ordering | 1,564 Kb |
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!
Name | Username | Size |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
404 Page | Saransh | 2,666 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!