Rosen Center Nav

Developer
Jek Bao Choo
Size
3,677 Kb
Views
8,096
  1. Rosen Center Nav Previews
  2. Rosen Center Nav HTML Codes
  3. Rosen Center Nav CSS Codes

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 Previews
IQ Test

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
Rosen Center Nav - Script Codes
Home Page Home
Developer Jek Bao Choo
Username jek
Uploaded January 19, 2023
Rating 3
Size 3,677 Kb
Views 8,096
Do you need developer help for Rosen Center Nav?

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!

Jek Bao Choo (jek) Script Codes
Name
Using ECharts
Working with JavaScript Arrays and Dictionaries
Understanding JS Event Loop
Parallax Scrolling Website
Bootstrap 4 nav-tabs
Working with JS Functions
Using Google Chart
Remembering AngularJS Filter
Try using Bootstrap 4 Modal
Using Bootstrap
Create amazing captions 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!