BenU Interior Page Layout

Developer
Kevin Sherman
Size
6,731 Kb
Views
34,408
  1. BenU Interior Page Layout Previews
  2. BenU Interior Page Layout HTML Codes
  3. BenU Interior Page Layout CSS Codes
  4. BenU Interior Page Layout JS Codes

How do I make an benu interior page layout?

What is a benu interior page layout? How do you make a benu interior page layout? This script and codes were developed by Kevin Sherman on 06 September 2022, Tuesday.

BenU Interior Page Layout Previews
IQ Test

BenU Interior Page Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BenU Interior Page Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://www.ben.edu/style/app.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main-wrapper">	<div class="side-main-nav">	<div class="subsite-logo">	<img src="http://kshermphoto.com/assets/COEHS-logo.svg">	</div>	<div class="subsite-search">	<input type="text" placeholder="search..." />	</div>	<ul class="subsite-navigation">	<li class="has-subitems active"><a href="#">Education</a>	<ul class="second-level">	<li><a href="#">Home</a></li>	<li class="has-subitems active"><a href="#">Programs</a>	<ul class="third-level">	<li><a href="#">Elementary Education</a></li>	<li><a href="#" class="active">Secondary Education</a></li>	<li><a href="#">K-12 Education Programs</a></li>	<li><a href="#">Master of Education</a></li>	<li><a href="#">Master of Arts in Education</a></li>	<li><a href="#">Alternative Licensure</a></li>	<li><a href="#">Advanced Programs</a></li>	</ul>	</li>	<li class="has-subitems"><a href="#">Assessment</a></li>	<li><a href="#">Licensure</a></li>	<li class="has-subitems"><a href="#">Cooperating Teachers and University Supervisors</a></li>	<li class="has-subitems"><a href="#">Current Teacher Education Candidates</a></li>	<li><a href="#">Contact Information</a></li>	</ul>	</li>	<li class="has-subitems"><a href="#">Higher Education (Ed.D.)</a></li>	<li class="has-subitems"><a href="#">Nursing &amp; Health</a></li>	<li class="has-subitems"><a href="#">Nutrition</a></li>	<li class="has-subitems"><a href="#">Public Health</a></li>	<li><a href="#">Alumni &amp; Friends</a></li>	<li><a href="#">Faculty &amp; Staff</a></li>	</ul>	</div>	<div class="main-content">	<div class="hero-space" style="background-image: url('http://kshermphoto.com/assets/header.jpg');">	<div class="hero-content">	<div class="row collapse">	<div class="small-12 columns">	<h2 class="subheader">School of Education</h2>	<h3 class="subheader">Secondary Education Programs</h3>	</div>	</div>	</div>	</div>	<div class="row wrapper">	<div class="small-12 columns">	<div class="admissions-sidebar">	<a href="#" class="button lightgray expand">Apply Online</a>	<a href="#" class="button lightgray expand">Admissions</a>	<a href="#" class="button lightgray expand">Request Information</a>	<h6>Resources</h6>	<ul>	<li>Academic Program Plan</li>	<li>Freshman Checklist</li>	<li>Transfer Checklist</li>	</ul>	<div class="flex-video widescreen cpHideForMenus">	<iframe width="100%" height="100%" src="https://www.youtube.com/embed/WAgt4nhZVKc?vq=720" frameborder="0" allowfullscreen=""></iframe>	</div>	</div>	<div>	<h5>About the Program</h5>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar facilisis quam, nec volutpat lectus faucibus id. Nullam vel sapien felis. Praesent vitae lacinia nisi, ac fringilla dui. Nam nisl arcu, volutpat sit amet blandit ac, iaculis eget nisl. Nam imperdiet enim nunc, sed aliquam lorem condimentum eu. Proin eu pretium erat. Duis auctor dignissim purus eu tincidunt. Sed mollis ligula at justo tincidunt, vitae tempus quam scelerisque. Praesent imperdiet nulla vitae purus vulputate, interdum congue libero faucibus. Nullam aliquet blandit orci vitae tincidunt. Aliquam aliquam ornare odio, at porta ipsum pretium a. Nulla facilisi. Sed faucibus mollis vestibulum. Morbi laoreet auctor eleifend. Duis vitae aliquet leo.</p>	<p>Sed semper elementum odio a pharetra. Phasellus in auctor nisi, at tincidunt ante. Fusce in condimentum augue, eget ornare leo. Vivamus mattis sit amet risus eu ultricies. Nunc imperdiet maximus turpis, in blandit magna gravida nec. Ut velit ipsum, accumsan elementum faucibus id, iaculis vitae ex. Vivamus eget tristique ante. Mauris scelerisque nunc pharetra, hendrerit odio quis, aliquam justo. Aenean sodales lacinia auctor. Sed finibus ipsum et lectus vestibulum, a sodales justo rutrum. Morbi in mauris nunc. Etiam quis hendrerit leo. Vestibulum egestas gravida orci, non venenatis mauris congue quis. Sed facilisis posuere mi at mattis.</p>	<h5>Why Attend Benedictine?</h5>	<p>Nulla facilisi. Cras a enim sit amet sapien aliquam cursus. Ut mollis, quam accumsan volutpat tempor, lorem nibh auctor quam, eget tincidunt urna leo sed mi. Aenean rhoncus tempus purus nec tincidunt. Proin bibendum eleifend massa in iaculis. Nulla posuere, orci nec egestas porttitor, libero magna congue ante, et dignissim mi dui a massa. Morbi dictum posuere volutpat. Phasellus vitae dolor velit. Curabitur vitae magna velit.</p>	<p>Ut ac dolor at nibh finibus blandit. Aenean hendrerit vel lacus at rhoncus. Nam in tellus porta, vestibulum justo eu, malesuada orci. Duis placerat urna a sapien viverra ultricies. Cras rutrum dignissim interdum. Duis euismod dolor tortor, a porta ex fringilla et. Phasellus suscipit sit amet velit at commodo. Donec eu consectetur nulla, ut blandit erat. Nam aliquam vel odio eget accumsan. Aenean velit nunc, porta eu facilisis quis, lobortis eget est. Mauris congue ornare volutpat.</p>	<p>Aliquam sit amet scelerisque diam. Vivamus ut quam ut est sollicitudin volutpat. Aenean a massa vel leo gravida accumsan. Sed non erat quis neque posuere auctor nec sed libero. Nunc dapibus rhoncus turpis tincidunt convallis. Suspendisse dictum augue eros, in vulputate mi egestas tincidunt. In pellentesque neque sed sem placerat auctor. Integer ac aliquam enim. Pellentesque efficitur sodales orci nec bibendum. Aenean elit enim, rutrum vitae rutrum at, hendrerit sed dolor. Proin id vestibulum nunc, sed vulputate neque. Sed nec sapien ut massa finibus venenatis vitae et elit. Vivamus faucibus ut sem nec accumsan. Proin congue volutpat felis. Morbi sed quam ligula. Proin maximus purus quis auctor interdum.</p>	<h5>What Careers are Out there?</h5>	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse non purus orci. Ut arcu nisi, condimentum nec tellus eget, dapibus molestie nisi. Cras laoreet id velit vel sagittis. Phasellus ut pretium velit. Vestibulum tempor enim eu justo imperdiet, aliquet tempor nibh vehicula. Nulla interdum mi in ultricies euismod.</p>	<p>Quisque tincidunt blandit velit, vel faucibus quam maximus nec. Maecenas sapien nisi, rutrum in finibus ut, volutpat sit amet felis. Integer massa turpis, tempus in ultricies ut, tempor quis lacus. Nulla sit amet tristique augue. Nunc erat massa, dapibus vitae accumsan at, tincidunt ac quam. Pellentesque sagittis, dolor vitae feugiat consectetur, ipsum magna aliquam leo, eu hendrerit tellus sapien eget ante. Curabitur ac placerat enim. Donec feugiat maximus consequat. Curabitur eget sapien magna. In feugiat congue lorem, sed fermentum purus eleifend in.</p>	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam efficitur lectus eu ex suscipit malesuada. Phasellus orci felis, laoreet eu ornare egestas, faucibus eget urna. Vestibulum feugiat orci urna, vel cursus libero pellentesque ultrices. Nam euismod non justo non placerat. In fermentum bibendum tempor. Proin gravida euismod dolor nec ornare. Nullam a sem sapien.</p>	<p>Vivamus egestas feugiat elit, eu cursus quam auctor non. Nulla ut urna et tortor placerat faucibus. Maecenas ac risus cursus, ornare turpis nec, varius mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus id sapien ac urna sollicitudin consectetur id nec est. Etiam non hendrerit odio. Pellentesque luctus orci at dapibus molestie. Quisque sagittis nec nisi varius egestas.</p></div>	</div>	</div>	</div>
</div>
<div class="footer-content">	<div class="main-logo"><img src="http://kshermphoto.com/assets/benu-logo.svg"></div>	<ul>	<li>Admissions</li>	<li>Degrees &amp; Programs</li>	<li>Athletics</li>	<li>Alumni &amp; Friends</li>	<li>About &amp; Locations</li>	</ul>
</div> <script src="js/index.js"></script>
</body>
</html>

BenU Interior Page Layout - Script Codes CSS Codes

@charset "UTF-8";
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
.main-wrapper { display: flex; min-height: 100vh;
}
.main-wrapper .side-main-nav { width: 320px; background-color: #555; padding: 1rem;
}
.main-wrapper .side-main-nav .subsite-logo { padding: 1rem;
}
.main-wrapper .side-main-nav .subsite-search input[type="text"] { width: 100%; border: 2px solid #333; margin: 0.2rem 0 1rem 0; font-size: 1.1rem; padding: 0.5rem; font-weight: 200;
}
.main-wrapper .side-main-nav ul.subsite-navigation { list-style: none; font-weight: 200; margin: 0;
}
.main-wrapper .side-main-nav ul.subsite-navigation li { font-size: 1.2rem;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems { position: relative; border: 1px solid #999;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems:after { content: '◀'; position: absolute; right: 10px; top: 6px; color: white;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems.active { background-color: #aaa;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems.active a { color: #222;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems.active:after { content: '▼'; position: absolute; right: 10px; top: 6px; color: white;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems ul.second-level { list-style: none; padding: 1rem; margin: 0;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems ul.second-level > li > a { color: white; display: block; text-decoration: none; padding: 0.2rem;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems ul.second-level > li.active { background-color: #888;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems ul.third-level { list-style: none; padding: 0.75rem; margin: 0;
}
.main-wrapper .side-main-nav ul.subsite-navigation li.has-subitems ul.third-level > li > a { font-size: 0.9rem;
}
.main-wrapper .side-main-nav ul.subsite-navigation li > a { color: white; padding: 0.5rem; text-decoration: none; display: block;
}
.main-wrapper .side-main-nav ul.subsite-navigation a.active { color: white; font-weight: bold; background-color: #666;
}
.main-wrapper .main-content { flex: 1; background-color: lightgray; width: 100%;
}
.main-wrapper .main-content .hero-space { background-position: center center; background-size: cover; background-repeat: none; height: 400px; position: relative;
}
.main-wrapper .main-content .hero-space .hero-content { background-color: rgba(0, 0, 0, 0.5); padding: 1rem; position: absolute; bottom: 0; left: 0; width: 100%;
}
.main-wrapper .main-content .hero-space .hero-content h2.subheader { color: white; font-weight: 100;
}
.main-wrapper .main-content .hero-space .hero-content h3.subheader { color: white;
}
.main-wrapper .main-content .wrapper { padding: 2rem;
}
.main-wrapper .main-content .admissions-sidebar { width: 280px; float: right; clear: both; background-color: white; padding: 1rem; border: 4px solid rgba(0, 0, 0, 0.06); margin: -5rem -2rem 1rem 1rem; z-index: 100;
}
.footer-content { position: fixed; bottom: 0; width: 100%; background-color: rgba(50, 50, 50, 0.95); text-align: center;
}
.footer-content .main-logo { display: inline-block; width: 240px; padding: 10px 0 8px 8px; height: 50px;
}
.footer-content ul { display: inline-block; list-style: none; margin: 0; margin-left: 1rem;
}
.footer-content ul > li { display: inline-block; padding: 0.5rem 1rem; color: white;
}

BenU Interior Page Layout - Script Codes JS Codes

//typekit
(function(d) { var config = { kitId: 'wgw2isw', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document);
BenU Interior Page Layout - Script Codes
BenU Interior Page Layout - Script Codes
Home Page Home
Developer Kevin Sherman
Username ksherman
Uploaded September 06, 2022
Rating 3
Size 6,731 Kb
Views 34,408
Do you need developer help for BenU Interior Page Layout?

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!

Kevin Sherman (ksherman) Script Codes
Name
Mobile floating menu
BenU Bookmarklets
Degree Search with AngularJS
Foundation Buttons Bug
Net Price Calculator - Output
Degree Map
Major Card
Internal Page Layout - Mesa
Inquiry Form Test
Main Campus Homepage Concept
Create amazing art & images 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!