How to make anchor links in Fixed header with height 200px? - javascript

I have a fixed header with height 200px.
How to make anchor links in Fixed header.
Now the menu is not work good.
You can see my code below:
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
/* Mobile Layout: 480px and below. */
body {
background-color: #EEEEEE;
font-family: "Open Sans", Helvetica, "Heiti TC", "Microsoft JhengHei", "Microsoft Yahei", "PMingLiU", sans-serif;
font-size: 100%;
margin-top: 0px;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
padding-left: 1.1375%;
padding-right: 1.1375%;
clear: none;
float: none;
width: auto;
}
#header {
margin-top: 0;
margin-right: auto;
margin-left: auto;
display: block;
width: 100%;
height: 200px;
max-width: 1000px;
position: fixed;
background-color: #FF6600;
}
/* header - navigation */
#subnav {
height: 100%;
margin-right: auto;
width: 100%;
background-color: #1BBC9B;
font-size: 120%;
}
#navmenu ul {
padding: 0;
margin-top: 4px;
margin-right: auto;
margin-left: 0%;
margin-bottom: 0;
width: 650px;
}
#navmenu li {
display: inline;
float: left;
}
#navmenu a {
color: #294C52;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#navmenu li a {
border-right: 1px solid #294C52;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#navmenu li:last-child a {
border-right: 1px solid #576979;
/* no border on last list item */
}
#navmenu li:first-child a {
background-color: #294C52;
color: #FFFFFF;
}
#navmenu a:hover,
nav a:active {
background-color: #1BBC9B;
color: #FFFFFF;
}
#content {
width: 100%;
max-width: 1000px;
height: 100%;
margin-top: 1px;
}
#section1 {
background-color: #294C52;
width: 100%;
display: block;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 198px;
}
#section2 {
background-color: #EEEEEE;
}
#section3 {
background-color: #EEEEEE;
}
#section4 {
background-color: #EEEEEE;
margin-left: 0;
width: 100%;
float: left;
}
#content-about-org-left {
width: 48.1012%;
background-color: #FFFFFF;
float: left;
clear: none;
}
#content-about-org-centre {
width: 48.1012%;
margin-left: 1.2658%;
clear: none;
background-color: #FFFFFF;
float: right;
}
#content-about-org-right {
background-color: #FFFFFF;
}
#section5 {
background-color: #EEEEEE;
}
/* content - typography */
.content-list {
list-style-type: none;
color: #294C52;
text-indent: -25px;
font-size: 100%;
line-height: 173%;
}
.content-list-bold {
font-weight: bolder;
font-size: 110%;
color: #294C52;
}
.content-title {
background-color: #903233;
color: #FFFFFF;
padding-top: 3px;
}
.content-p-white {
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.content-p-black {
color: #294C52;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
font-size: 100%;
}
.content-p-black-b {
color: #294C52;
font-weight: bolder;
padding-left: 10px;
font-size: 110%;
}
<div class="gridContainer clearfix">
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li>成立背景
</li>
<li>協會使命
</li>
<li>營運模式
</li>
<li>協會組織
</li>
<li>活動及刊物
</li>
</ul>
</nav>
</header>
<!--end of header-->
<!--start of content-->
<div class="fluid" id="content">
<div id="section1" class="fluid ">
<p class="content-p-white">《2013年香港殘疾人士貧窮情況報告》顯示介乎18至64歲適齡工作的殘疾人士的貧窮率為22.4%，遠較相同年齡群的整體貧窮率10.5%為高。再者，按經濟活動身分劃分，近18萬名的殘疾適齡工作人士當中，只有39.1%有從事經濟活動，遠低於整體人口中同年齡層的72.8%。</p>
<p class="content-p-white">於2013年3月初，一群熱心人士包括郭鍵勳博士、謝俊謙教授及伍杏修先生等有意建立一個各方協作平台，改善殘疾人士的就業困難。</p>
<p class="content-p-white">資訊科技易達協會有限公司 Accessible IT Development Association Limited (AIDA) 於2014年11月正式註冊成立。</p>
<!--<div id="secttion1-bg"></div>-->
</div>
<!--end of section1-->
<div id="section2" class="fluid">
<article>
<h2 class="content-title"> 協會使命</h2>
<p class="content-p-black">資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。</p>
</article>
</div>
<!--end of section2-->
<div id="section3" class="fluid">
<article>
<h2 class="content-title"> 營運模式</h2>
<figure>
<img src="images/2-about-us_03.jpg" alt="營運模式示意圖" class="alignRight" title="營運模式示意圖" />
</figure>
<p class="content-p-black">全面利用現代通訊科技的便利，解決殘疾人士面對指定工作地點的限制，讓他們可選擇在家居或院舍工作，同時得到必要的護理。AIDA選擇網頁開發作為起步點，由「無障礙學堂」(Barrier-Free School) 及業界專業義工負責培訓學員，讓他們掌握指定技術。</p>
<p class="content-p-black">AIDA會承接工作項目，將項目分拆，然後將組件分配給技術程度不同的學員，並會密切督導整個項目的進行。AIDA已經與本地多間知名網頁開發公司結為合作伙伴，致力確保AIDA的所有服務均符合市場要求。AIDA會以殘疾友善機構的工作項目作為開始，當累積一定成功往績後，會推廣至主流市場。</p>
</article>
</div>
<!--end of section3-->
<div id="section4" class="fluid">
<article>
<h2 class="content-title"> 協會組織</h2>
<div id="content-about-org-left" class="fluid">
<ul class="content-list">
<li class="content-list-bold">名譽贊助人</li>
<li>謝俊謙教授</li>
<li class="content-list-bold">主席</li>
<li>郭鍵勳博士</li>
<li class="content-list-bold">副主席</li>
<li>劉海軍先生</li>
<li class="content-list-bold">義務秘書</li>
<li>伍杏修先生</li>
<li class="content-list-bold">義務司庫</li>
<li>郭皓君女士</li>
<li class="content-list-bold">核數師</li>
<li></li>
<li class="content-list-bold">義務法律顧問</li>
<li>林子絪女士</li>
<li class="content-list-bold">義務總幹事</li>
<li>蘇炳坤先生</li>
<li class="content-list-bold">諮詢委員及指導</li>
<li></li>
</ul>
</div>
<div id="content-about-org-centre" class="fluid">
<ul class="content-list">
<li class="content-list-bold">董事</li>
<li>張健輝先生</li>
<li>郭鍵勳博士</li>
<li>郭皓君女士</li>
<li>劉海軍先生</li>
<li>羅偉祥先生</li>
<li>伍杏修先生</li>
<li>吳家榮博士</li>
<li>蘇炳坤先生</li>
<li>謝俊謙教授</li>
<li>黃婉冰女士</li>
<li>游寶榮先生</li>
</ul>
</div>
<div id="content-about-org-right" class="fluid">
<ul class="content-list">
<li class="content-list-bold">工作團隊</li>
<li>王乃東 王迪清 江啟暉 利詠然 李俊輝</li>
<li>李豪飛 冼永健 何浚彥 施嶸傑 翁文菁</li>
<li>茹文祥 郭寧 章世恒 曾志豪 曾鈴茵</li>
<li>黃新陽 蔡冀逵 鄭建慧 盧兆豐</li>
</ul>
<p>
<img src="images/2-about-us_06.jpg" alt="工作團隊成員相片" title="工作團隊成員相片" />
</p>
</div>
</article>
</div>
<!--end of section4-->
<div id="section5" class="fluid">
<article>
<h2 class="content-title"> 活動及刊物</h2>
<ul class="content-list">
<li class="content-list-bold">新春團拜</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午4:00- 5:30</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">第一次周年大會</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午3:30- 4:00</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
</article>
</div>
<!--end of section5-->
</div>
<!--end of content-->
</div>
<!--end of gridContainer-->
http://codepen.io/anon/pen/xGgbKN


Add this to the places you want to send the links (wher the anchors are). For ex:
<div id="section2" class="fluid" name="section2">
Then change your links:
成立背景
And add this script to your page footer:
var menuContainer = $('header').height();
function scrollToAnchor(anchorName){
var aTag = $("div[name='"+ anchorName +"']");
$('html,body').animate({scrollTop: aTag.offset().top - menuContainer },'slow');
}
Finally here's a Fiddle: http://jsfiddle.net/x2skzp1p/
Cheers

Related

h1 element in div behaving differently with other divs

So I have looked everywhere on stack overflow and counldn't find someone with a similar issue. I have two classes in the main body with a few different images in the divs. I am planning on switching through them with a slideshow using Jquery. The problem is that the h1 element which is "Boba Fusion" is inline in the first class but is on top of eachother in the second class so that boba is on one line and fusion is on another line. I have linked my HTML and CSS.
What is causing the H1 to behave differently?
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap');
* {
margin: 0px;
padding: 0px;
font-family: 'Montserrat', sans-serif;
}
/* CSS stylings for nav */
a {
text-decoration: none;
color: inherit;
}
.container {
display: flex;
width: 100%;
}
nav ul {
margin-top: 0px;
background-color: #4B4B4B;
margin-left: 0px;
clip-path: polygon(1% 0, 100% 2%, 1000% 10000%);
}
nav ul li {
display: inline-block;
list-style: none;
padding-left: 100px;
font-size: 15px;
color: white;
margin-top: 0px;
padding-bottom: 33px;
flex: 2 0 0;
}
nav ul li:first-child {
padding-left: 90px;
margin-left: 0px;
}
nav ul li:nth-child(6) {
padding-top: 20px;
padding-right: 30px;
margin-right: 0;
}
#bobaimg {
padding-left: 25px;
padding-top: 10px;
margin: 0;
display: block;
flex: 1 0 0;
}
/* CSS styling for main content*/
.main-page {
display: none;
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
.main-page-2 {
/* display: none; */
margin-top: 0px;
text-align: center;
min-height: calc(100vh - 40px);
background-size: 1300px 700px;
color: white
}
#specials-head {
padding-top: 50px;
}
.fusion-head {
padding-top: 120px;
float: left;
position: absolute;
padding-left: 30px;
transform: scale(1.2);
}
#fusion-title {
float: left;
position: absolute;
padding-left: 110px;
transform: scale(1.4);
}
#about-img {
transform: scale(0.8);
margin-top: 40px;
float: left;
}
#why-choose {
transform: scale(12);
margin-top: 200px;
position: absolute;
float: left;
padding: 0;
margin-left: 200px;
left: 0;
width: 120%;
}
#quality {
transform: scale(0.8);
margin-left: 470px;
margin-top: 250px;
}
#flavour-btn {
margin-bottom: 70px;
margin-top: 280px;
margin-left: 800px;
color: gray;
background-color: white;
border: none;
transform: scale(1.7);
padding: 10px;
font-size: 10px;
font-weight: lighter;
/* display: none; */
}
#flavour-btn:hover {
cursor: pointer;
transform: scale(1.8);
}
#slideshow {
padding-top: 100px;
padding-bottom: 50px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: white;
border-radius: 10%;
display: inline-block;
transition: background-color 0.6s ease;
transform: scale(1.2);
}
.active,
.dot:hover {
background-color: #717171;
}
/* CSS styling for footer*/
.footer {
margin-top: 10px;
margin-bottom: 0px;
}
.footer1-ul li {
display: inline-block;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
margin-bottom: 0;
padding-top: 0px;
color: gray;
}
.footer1-ul {
padding-top: 0px;
padding-bottom: 0;
float: left;
}
.footer2-ul {
float: right;
margin: 0;
padding: 0;
}
.footer2-ul li {
display: inline-block;
margin-left: 0px;
list-style: none;
padding-right: 10px;
transform: scale(0.65);
padding-bottom: 0px;
color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>Boba Fusion</title>
</head>
<body class='main'>
<!-- top nav bar and logo -->
<div class="container">
<div id="bobaimg">
<img src="/images/Boba Fusion logo (1).svg" alt="picture of bubble tea" width="150px">
</div>
<div id="nav">
<nav class='main-nav'>
<ul class="nav-ul">
<li>
Home +
</li>
<li>
Menu +
</li>
<li>
Specials +
</li>
<li>
About Us +
</li>
<li>
Win Prizes +
</li>
<li>
<img src="/images/cart-shopping-solid.svg" width="30px">
</li>
</ul>
</nav>
</div>
</div>
<!-- Main content -->
<div class="main-page" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
<img src="/images/textbox-about.png" id="about-img">
</div>
<div>
<button type="button" id="flavour-btn">Our Flavours</button>
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<div class="main-page-2" style="background-image: url(/images/aboutUs-back.png);">
<div id="specials-head">
<img src="/images/aboutus.png">
</div>
<div class="fusion-head">
<h1 id="fusion-title">
Boba Fusion
</h1>
</div>
<div class="fusion-head">
<img src="/images/why choose.png" id="why-choose">
</div>
<div>
<img src="/images/quality.png" id="quality">
</div>
<div style="text-align:center" id="slideshow">
<span class="dot" onclick="currentSlide1()"></span>
<span class="dot" onclick="currentSlide2()"></span>
</div>
</div>
<!-- footer -->
<footer class="footer">
<ul class="footer1-ul">
<li>
<img src="/images/location-dot-solid.svg" alt="location icon" width="15px"> 123 Name Street, Toronto, ON, M6E 1T9
</li>
<li>
<img src="/images/phone-solid.svg" alt="phone icon" width="15px"> (+1) 416 456 789
</li>
<li>
<img src="/images/envelope-solid.svg" alt="email icon" width="15px"> boba#fusion.com
</li>
</ul>
<ul class="footer2-ul">
<li>
<img src="/images/facebook-brands.svg" alt="location icon" width="15px">
</li>
<li>
<img src="/images/twitter-brands.svg" alt="phone icon" width="15px">
</li>
<li>
<img src="/images/youtube-brands.svg" alt="email icon" width="15px">
</li>
<li>
<img src="/images/linkedin-brands.svg" alt="email icon" width="15px">
</li>
</ul>
</footer>
<script src="about.js"></script>
</body>
</html>

You are using "transform: scale(1.2);" for the class ".fusion-head"
so it scales your h1 once (because the h1 is inside it).
Then you are using "transform: scale(1.4);" for id "#fusion-title"
so it scales it twice.

One suggestion on your issue. Since you want the h1 element keeps the same style in both div. You can try to have a default CSS style in your file.
h1 {
...
}

Elements not displaying correctly across bigger screens

I've created a landing page that has a lot of alignment issues on bigger screens, despite having a lot of {margin: auto;} functions. Not sure what is wrong.
Additional issues:
1) small white space to the left of the showcase banner
2) white space at the bottom of the page, below footer
3) yellow line in the middle should be in line with title (Featured Speaker)
4) Yellow button CTA not wrapping nicely
Any help with anything listed would be much appreciated.
Thanks!
1)
<!-- Showcase Section-->
<div id="showcase">
<header>
<nav class="cf">
<ul class="cf">
<li class="hide-on-small">
<a href="https://www.centro.net/">
<img src="https://www2.centro.net/l/75412/2019-01-
15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars">
</a>
</li>
</ul>
<a href="#" id='openup'>Centro Webinars</a>
</nav>
</header>
/* Showcase */
#showcase {
margin: 0;
padding: 0;
padding-bottom: 20px;
background: url('https://www2.centro.net/l/75412/2019-01-
15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
width: 100%;
position: relative;
overflow-y: hidden;
}
#showcase .container {
margin-top: 13vh;
margin-left: 0vw;
margin-right: 43vw;
}
#showcase h1 {
margin-left: 7vw;
font-size: 1.5rem;
margin-bottom: -0.1em;
color: #1fadde;
}
#showcase h3 {
margin-left: 7vw;
font-size: 0.9rem;
margin-bottom: -1.3em;
color: #3a3d40;
}
#showcase h2 {
margin-left: 7vw;
font-size: 1.2rem;
margin-bottom: -0.5em;
color: #1fadde;
}
#showcase p {
margin-left: 7vw;
font-size: 14px;
margin-bottom: -0.5em;
color: #3a3d40;
width: 70%;
}
2)
/* Footer */
footer .footersection {
background: #333;
padding: 1rem;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
#footer img {
margin-top: 0.5vh;
height: 20px;
width: 20px;
display: inline;
margin-left: auto;
margin-right: 10px;
}
#footer .smicons {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<!-- Footer Section -->
<footer>
<section id="footer" class="footersection">
<div class="container">
<div class="smicons">
<a href="https://www.facebook.com/centro.llc">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook">
</a>
<a href="https://twitter.com/centro">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
</a>
<a href="https://www.linkedin.com/company/centro">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn">
</a>
<a href="https://www.youtube.com/user/centrollc">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube">
</a>
</div>
</div>
</footer>
3)
<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
<div class="container">
<div class="featspeak">
<h3 pardot-region="speakerORspeakers" pardot-region-
type="simple">Featured Speaker
</h3>
</div>
<div>
<hr>
</div>
<img src="https://www2.centro.net/l/75412/2019-01-
15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
<h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER
NAME]
</h4>
<h5 pardot-region="speaker title" pardot-region-type="simple">Speaker
Title
</h5>
<p class="lead" pardot-region="speaker bio1" pardot-region-
type="simple">Speaker Bio 1</p>
<p class="lead" pardot-region="speaker bio2" pardot-region-
type="simple">Speaker Bio 2</p>
</div>
/* Feature Speaker Section */
.featuredspeakerssection {
padding: 1rem 0;
}
#featuredspeakers .container {
margin: 0;
margin-top: 1vh;
margin-left: 0vw;
}
#featuredspeakers h3 {
font-size: 1.5rem;
color: #1fadde;
text-align: left;
margin-left: 7vw;
margin-top: 7vh;
}
#featuredspeakers hr {
display: inline-block;
margin: -50px 50px 75px 20px;
overflow: hidden;
border-style: inset;
border-width: 0.5px;
border-color: #ffbf3d;
width: 80%;
margin-left: 24vw;
margin-right: auto;
margin-bottom: 3vh;
position: relative;
}
4)
/* Buttons */
.button {
background-color: #FFBF3D;
border: none;
color: #3a3d40;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: block;
width: 8%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: -2vh;
border-radius: 5px;
}
<!-- Banner Section -->
<section id="banner" class="bannersection">
<div class="container">
<h3 pardot-region="banner title" pardot-region-type="simple">Catch Up
With Your Industry</h3>
<p class="lead" pardot-region="banner blurb" pardot-region-
type="simple">Level up and review our most popular past webinars.</p>
</div>
<div pardot-region="banner CTA" pardot-region-type="simple"
href="https://www.centro.net/webinar" class="button">Take Me There
</div>
</section>

1) Your showcase banner image is white on the left, so is displaying correctly.
2) You have issues with the opening and closing of section and div tags
3) Just played around with your margins. The current solution will always give varied results on different sized screens because of the fixed size of the speaker's photo. I would look at finding a different solution for the positioning of your yellow hr
4) Changed this div to an anchor because you need it to act like a button.
/* Showcase */
#showcase {
margin: 0;
padding: 0;
padding-bottom: 20px;
background: url('https://www2.centro.net/l/75412/2019-01-15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
width: 100%;
position: relative;
overflow-y: hidden;
}
#showcase .container {
margin-top: 13vh;
margin-left: 0vw;
margin-right: 43vw;
}
#showcase h1 {
margin-left: 7vw;
font-size: 1.5rem;
margin-bottom: -0.1em;
color: #1fadde;
}
#showcase h3 {
margin-left: 7vw;
font-size: 0.9rem;
margin-bottom: -1.3em;
color: #3a3d40;
}
#showcase h2 {
margin-left: 7vw;
font-size: 1.2rem;
margin-bottom: -0.5em;
color: #1fadde;
}
#showcase p {
margin-left: 7vw;
font-size: 14px;
margin-bottom: -0.5em;
color: #3a3d40;
width: 70%;
}
/* Footer */
footer .footersection {
background: #333;
padding: 1rem;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
#footer img {
margin-top: 0.5vh;
height: 20px;
width: 20px;
display: inline;
margin-left: auto;
margin-right: 10px;
}
#footer .smicons {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Feature Speaker Section */
.featuredspeakerssection {
padding: 1rem 0;
}
#featuredspeakers .container {
margin: 0;
margin-top: 1vh;
margin-left: 0vw;
}
#featuredspeakers h3 {
font-size: 1.5rem;
color: #1fadde;
text-align: left;
margin-left: 7vw;
margin-top: 7vh;
}
#featuredspeakers hr {
display: inline-block;
overflow: hidden;
border-style: inset;
border-width: 0.5px;
border-color: #ffbf3d;
margin-left: 40%;
width: 60%;
position: relative;
top: -40px;
}
/* Buttons */
.button {
background-color: #FFBF3D;
border: none;
color: #3a3d40;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: block;
width: 8%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: -2vh;
border-radius: 5px;
}
1)
<!-- Showcase Section-->
<div id="showcase">
<header>
<nav class="cf">
<ul class="cf">
<li class="hide-on-small">
<img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars">
</li>
</ul>
Centro Webinars
</nav>
</header>
</div>
2)
<!-- Footer Section -->
<footer>
<section id="footer" class="footersection">
<div class="container">
<div class="smicons">
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook">
<a href="https://twitter.com/centro"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
</a>
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn">
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube">
</div>
</div>
</section>
</footer>
3)
<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
<div class="container">
<div class="featspeak">
<h3 pardot-region="speakerORspeakers" pardot-region-type="simple">Featured Speaker </h3>
</div>
</div>
<hr>
<div>
<img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
<h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER NAME] </h4>
<h5 pardot-region="speaker title" pardot-region-type="simple">Speaker Title </h5>
<p class="lead" pardot-region="speaker bio1" pardot-region-type="simple">
Speaker Bio 1
</p>
<p class="lead" pardot-region="speaker bio2" pardot-region-type="simple">
Speaker Bio 2
</p>
</div>
</section>
4)
<!-- Banner Section -->
<section id="banner" class="bannersection">
<div class="container">
<h3 pardot-region="banner title" pardot-region-type="simple">Catch Up With Your Industry</h3>
<p class="lead" pardot-region="banner blurb" pardot-region-type="simple">
Level up and review our most popular past webinars.
</p>
</div>
<a pardot-region="banner CTA" pardot-region-type="simple" href="https://www.centro.net/webinar" target="_blank" class="button">
Take Me There
</a>
</section>

Nav Bar Scrolling Too Far on my page

My objective is to have a single-page website. My current issue is with the nav bar at the top of the page. When I click on one of the links in my nav list, it takes me down the page, but it keeps overshooting.
For example, if I click on my second nav li it takes me down the page, but ends up beneath the text in that div. It's the same with the third and fourth pages: the page scrolls down just barely beyond where I want it to end up, i.e., perfectly in line with the start of the title of each page.
HTML:
<body>
<div id="home"> <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->
<div id="wrapper">
<header>
<h1>Pretend Restaurant</h1>
<nav class="nav">
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
<div id="snow"></div>
</header>
<main>
<div id="page1">
<h2 class="category">Welcome to Snow Bar</h2>
<p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>
</div>
<div id="page2">
<a id="menu" class="smooth"></a>
<h2>Menu</h2>
<h4>Recipes</h4>
<p>list of recipes</p>
</div>
<div id="page3">
<a id="aboutus" class="smooth"></a>
<h2>ABOUT US INFO GOES HERE</h2>
</div>
<div id="page4">
<a id="contact" class="smooth"></a>
<h2>Contact and Location</h2>
<p>Contact info goes here</p>
</div>
<div id="page5">
<a id="social" class="smooth"></a>
<h2>Social media information here</h2>
</div>
</div>
</body>
</main>
CSS
*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
opacity: 0.86;
min-height: 900px;
}
h1 { font-family: Georgia, Times, serif;
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 4em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main { margin-left: 100px;
padding-bottom: 100px;
}
.header{ background-color: #000066;
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
li {
display: inline-block;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
position: sticky;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
nav ul {
list-style: none;
width: 100%;
text-align: center;
display:inline-block;
}
nav a{text-decoration: none;
width: 100%}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
.category {
font-weight: bold;
background-color: #FFFFFF;
color: darkcyan;
text-align: center;
font-size: 50px;
padding-right: 50px;
padding-left:0;
}
#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

That's exactly how HTML navigation works. You should use javascript to scroll to the right position. The formula will be like: parent.scrollTop = destination.offsetTop - nav.style.height)
$('.nav a').click(function(e) {
e.preventDefault();
var $scrooll_to_id = $(this.getAttribute('href'));
$('html').stop(true).animate({
scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
});
});
Here a fiddle: https://jsfiddle.net/sjquno0r/1/

Header Button's text/font-weight changing unintentionally

I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>

I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.

extend images across slide active slide

I am creating a website for a school project and we were asked to choose a company to design a mock promotional website for. I chose CVS but you could choose anyone. I managed to use a template which I had done completing some codecamdemy classes but the tutorials didn't appear to be helpful in regards to changing the length of the images. What I want to do is to extend the images called "nyse", "mentor" and "mountain" across the length of the whole slide container, but so far, when I change it, the image doesn't seem to do anything. Can anyone tell me where it is going wrong or where to put my code to extend the images? I have tried numerous divs but no luck so far. My code is presented below.
HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="img/cvs.png">
</a>
<div class="headerNi">
<div class="container">
<a href="#" class="logo-icon">
<p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
</a>
<div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br>
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Curriculum</li>
<li>Staff Profiles</li>
<li>Careers</li>
<li>Register</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Graduate Scheme</li>
<li>What we look for</li>
<li>Links</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slider">
<div id="nyse-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>CVS is now hiring</h1>
<p>We will soon have a nice new building.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/nyse.jpg" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
Accountability
<p>Take responsibility for your actions.</p>
</div>
</div>
</div>
</div>
<div id="mountain-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Collaboration</h1>
<p>At CVS, it's important to work together with your mentor!</p>
</div>
<div class="slide-img col-xs-7">
<img src="img/mountain.png">
</div>
</div>
</div>
</div>
<div id="pharm-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Tenacity</h1>
<p>Be determined.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/pharm.jpg" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.container {
width: 960px;
color: gray;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nsce.jpg');
}
#pharm-slide-feature{
background-image: url('pharm.jpg');
}
#mountain-slide-feature{
background-image: url('mountain.jpg');
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://devonsstudio.com/businesspeople.png');
height: 550px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://devonsstudio.com/businesspeople.png');
height: 550px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
JAVASCRIPT
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);

Heres a DEMO FIDDLE (You only need to add your images URLS to the CSS)
The first thing you need to do is to add e.preventDefault(); to your click evennts like this:
$('.arrow-next').click(function(e) {
e.preventDefault();
//..more code
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
//..more code
});
Then you need to give each slide a unique ID and give it a background for the image, just like you have a background for the .slide-feature like this:
HTML:
<div id="nyce-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mountain-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mentor-slide" class="slide">
<!-- ...code.. -->
</div>
CSS:
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nyce.jpg');
}
#mentor-slide{
background-image: url('mentor.jpg');
}
#mountain-slide{
background-image: url('mountain.jpg');
}
Heres the final edit:
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="img/cvs.png">
</a>
<div class="headerNi">
<div class="container">
<a href="#" class="logo-icon">
<p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
</a>
<div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br>
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Curriculum</li>
<li>Staff Profiles</li>
<li>Careers</li>
<li>Register</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Graduate Scheme</li>
<li>What we look for</li>
<li>Links</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="slider">
<div id="nyce-slide" class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>CVS is now hiring</h1>
<p>We will soon have a nice new building.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
</div>
</div>
</div>
<div id="accountability-slide" class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
Accountability
<p>Take responsibility for your actions.</p>
</div>
</div>
</div>
</div>
<div id="mountain-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Collaboration</h1>
<p>At CVS, it's important to work together with your mentor!</p>
</div>
</div>
</div>
</div>
<div id="mentor-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Tenacity</h1>
<p>Be determined.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
</script>
</body>

Categories