I have two versions of a single page site that scroll using JS .animate function. One site will not scroll and the other site does. I can not find the error in my code on the "broken" site.
Any help would be greatly appreciated.
Other "helpful" comments welcome as well.
Thank You in Advance.
Working Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius:6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color:black;
color: hsl(240, 0%, 30%);
}
#productSect {
/*Place Holder*/
background-color: bisque;
}
#servicesSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}
#portfolioSect {
/*Place Holder*/
background-color: bisque;
}
#contactSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}
html, body {
height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="product" href="#productSect">PRODUCT</a>
<a id="services" href="#servicesSect">SERVICES</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container">
<div class="jumbotron">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="productSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="servicesSect"></div>
<div class="subsection" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
Broken Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function(tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius: 6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color: black;
color: hsl(240, 0%, 30%);
}
#aboutSect {
/*Place Holder*/
background-color: bisque;
}
#portfolioSect {
/*Place Holder*/
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frank Promo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/JavaScript.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<!--style="margin:0 5px";-->
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="about" href="#aboutSect">ABOUT</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container-fluid">
<div class="jumbotron navSpace">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="aboutSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
</body>
</html>
Related
I am trying to create a product category container with a slick right & left carousel. However, using the slick js function my images get smaller in sizeenter image description hereenter image description here. I am using Bootstrap for classes (container-fluid, row, col-md-3 etc) everything looks good in shape but once I add the slick function (second slider) my product category images get smaller. I was trying to figure it out what is the issue but could not... any help will be appreciated
/*banner slider*/
$('.slider-one')
.not(".slick-intialized")
.slick({
autoplay: false,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next",
});
/*second slider*/
$('.slider-two')
.not(".slick-intialized")
.slick({
prevArrow: ".site-slider-two .prev",
nextArrow: ".site-slider-two .next",
slidesToShow:5,
slidesToScroll:1,
autoplaySpeed:3000
});
/*root varialbe*/
:root{
--light-gray: #2b3032a1;
--primary-color: #45ccb8;
--border: #2b303218;
--text-color: #ff686b;
--roboto: "Roboto", sans-serif;
--gugi: "Gugi", cursive;
--sofia: "Sofia", cursive;
}
/*Global css classes*/
.primary-color{
color: var(--primary-color);
}
.bg-primary-color{
background-color: var(--primary-color) !important;
}
.text-color{
color: var(--text-color);
}
.font-roboto{
font-family: var(--roboto);
}
.lightblue{
color: lightblue;
}
/*header*/
header{
background-color: var(--primary-color);
font-family: var(--roboto);
}
header .site-title{
font-family: var(--gugi);
}
.container .dropdown-toggle,
.container .dropdown-item{
font-size: 0.7em;
}
.header-links a{
font-size: 0.9em;
text-decoration: none;
color: white;
}
/*Slider one */
.site-slider{
position: relative;
}
.position-top{
position: absolute;
top: 50%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next{
background-color: var(--primary-color);
padding: 1rem 1.5rem;
border-radius: 10rem;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next{
opacity: 1;
}
.right-0{
right: 0;
}
/*slide dotd*/
.slick-dots li{
color: white;
}
.slick-dots li.slick-active{
transition: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
background-color: white;
border-radius: 100%;
}
/*slider two*/
.site-slider-two{
position: relative;
height: 30%;
}
.site-slider-two .product{
height: 25rem;
position: relative;
overflow: hidden;
}
.site-slider-two .product img{
width: 90%;
margin: auto;
}
.site-btn.btn-span{
padding: 0.8rem 1.9rem;
border-radius: 4rem;
border: 1px solid var(--primary-color);
background-color: white;
color: var(--light-gray);
}
.slider-two .slick-track .product:hover span{
background-color: var(--primary-color);
}
/*slider wrapper test*/
.post-slider{
border: 1px black solid;
position: relative;
}
.post-slider .post-wrapper{
width: 84%;
height: 350px;
margin: 0 auto;
border: 1px red dotted;
}
.post-slider .post-wrapper .post{
width: 300px;
height: 350px;
display: inline-block;
}
.post-slider .slider-title{
text-align: center;
margin: 30px auto;
}
.post-slider .post img{
text-align: center;
margin: 0 10px;
width: 480px;
height: 340px;
}
.post-slider .prev{
position: absolute;
top: 50%;
}
.post-slider .next{
position: absolute;
top: 50%;
}
.right-0{
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<!--Bootstrap CND-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Font Awesome CND-->
<script src="https://kit.fontawesome.com/36eac67c14.js" crossorigin="anonymous"></script>
<!--slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!--animate css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<!--Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Gugi&family=Lato&family=Roboto&family=Sofia&display=swap"
rel="stylesheet">
<!--Custom Stylesheet-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12">
<div class="btn-group">
<button class="btn border border-dark dropdown-toggle my-md-4 my-2 " data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
USD
</button>
<div class="dropdown-menu">
ERU-Euro
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center">
<h2 class="my-md-3 site-title text-white">Online Shopping</h2>
</div>
<div class="col-md-4 col-12 text-right">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
<!--/header-->
<main>
<!--banner slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="./assets/item-1.jpg" class="img-fluid" alt="Banner-1" />
</div>
<div>
<img src="./assets/item-2.jpg" class="img-fluid" alt="Banner-2" />
</div>
<div>
<img src="./assets/item-3.jpg" class="img-fluid" alt="Banner-3" />
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
<!--banner slider-->
<!--Second slider-->
<div class="container-fluid">
<div class="site-slider-two px-md-4">
<div class="row slider-two text-center">
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-1.jpg" class="img-fluid" alt="product 1">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-2.jpg" class="img-fluid" alt="product 2">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 3">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-4.jpg" class="img-fluid" alt="product 4">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-5.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
<div class="col-md-2 product pt-md-5 pt4">
<img src="./assets/id-9-cat-3.jpg" class="img-fluid" alt="product 5">
<span class="border site-btn btn-span">SOFA & CHAIRS</span>
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left fa-2x text-secondary"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right fa-2x text-secondary"></i></span>
</div>
</div>
</div>
<!--Second slider-->
</main>
<footer></footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!--slick slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!--custom js-->
<script src="./js/main.js"></script>
</body>
</html>
you got col-md-2 (bootstrap CSS) class on your .slider-two > .product items. which gives the columns a low width setting and conflicts with the behaviour of the slick slider.
when removed it shall work better.
thats messed up. if possible clean up there.
I did a swiper slideshow that swipes images automatically and it is working very well. but now I would like to make all the images with the information written below it to go down after doing the slideshow and appear in the form of a table. Below is my source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/swiper.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<script type ="text/javascript" src="../js/swiper.min.js"></script>
<style type="text/css">
body
{
background: black;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
background: white;
}
.swiper-slide .imgBx{
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-slide .imgBx img{
width: 100%;
}
.swiper-slide .details{
box-sizing: border-box;
font-size: 20px;
padding: 20px;
}
.swiper-slide .imgBx h3{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .imgBx h3 span{
font-size: 16px;
color: red;
}
</style>
</head>
<body style="background: grey ;">
<div class="row" >
<div class="col-md-3 input-group input-group-sm" style="margin-left: 70%; margin-top: 10px;">
<input type="number" name="numb" class=" form-control col-sm" placeholder=" Mentors" >
<button type="submit" class="btn btn-dark acc_active">Ment</button>
</div>
</div>
<div class="row" style="margin-left: 350px; margin-top: 250px;" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-12 container d-flex">
<div class="box-1">
<div class="ping">
</div>
</div>
<div>
<a href="table.php>"> <button id="btn-go" style="width: 100px; margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
Shuffle
</button></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="box-1">
<div class="ping">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 60,
stretch: 15,
depth: 190,
modifier: 3,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
<?php
include "header.php";
?>
<?php
include "footer.php"
?>
I'm wanting to make a fixed row inside a container and it's giving me some problems where it's overlapping the divs below.
Before the fixed row:
After a fixed row:
What would be the proper way to handle this? I've tried messing with child classes and setting the container as relative and no luck at all.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<style>
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.col-xs-3, .col-xs-4, .col-xs-12 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-xs-3 {
word-break: break-word;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
/* Slick Carousel */
#media (max-width: 450px) {
.slick-next {
right: 0px!important;
}
}
.slick-next {
right: 15px;
}
.slick-prev:before {
color: #5E6A71;
}
.slick-next:before {
color: #5E6A71;
}
.no-arrows > .slick-next,
.no-arrows > .slick-prev {
display: none!important;
}
/* ----- */
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
ul {
padding-left: 0px;
}
/* ----- */
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-xs-9 text-white text-left py-2">
<h4 class="text-uppercase font-weight-bold">Performance Benchmark</h4>
<p>Our goal is to develop a set of expectations that are consistent across the
agency and reflect growth as a priority. Some expectations, such as
negotiating, listening and interpersonal communication are not included
but are considered baseline skills to perform your role.
The Performance Benchmark consists of four main areas:
Client, Talent, Business Development & Growth, and Finance & Operations.
Each area is outlined at the Junior, Mid and Senior Levels.
</p>
</div>
<div class="col-xs-3 text-center" style="margin: auto;">
<img class="img-responsive" src="" />
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-9">
<section class="regular slider">
<div class="col-xs-4">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-xs-4">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-xs-4">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 bg-fhdark">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
</div>
<div class="row bb">
<div class="col-xs-3">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Develops understanding of clients' business and goals</li>
<li>Beings to understand agency's solutions for clients and how they drive business results</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Understands clients' business needs and contributes to building strong client relationships</li>
<li>Develops programs and solutions that effectively meet business needs and priorities</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Anticipates clients' business and communications needs</li>
<li>Is responsive, results-oriented and growth-focused</li>
<li>Counsels clients on capabilities, products and services that will deliver greatest value to their business</li>
<li>Is conversant in full range of communications practices and disciplines</li>
<li>Is able to have tough client conversations</li>
<li>Inspires clients' confidence in agency and account team</li>
</ul>
</div>
</section>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.slider',
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
</script>
</body>
Im interested in starting a small service where users can sign into a dashboard, customize, and then export a age verification pop up for their site. I've downloaded a base file to work off of:
/*!
* Simple Age Verification (https://github.com/Herudea/age-verification))
*/
var modal_content,
modal_screen;
// Start Working ASAP.
$(document).ready(function() {
av_legality_check();
});
av_legality_check = function() {
if ($.cookie('is_legal') == "yes") {
// legal!
// Do nothing?
} else {
av_showmodal();
// Make sure the prompt stays in the middle.
$(window).on('resize', av_positionPrompt);
}
};
av_showmodal = function() {
modal_screen = $('<div id="modal_screen"></div>');
modal_content = $('<div id="modal_content" style="display:none"></div>');
var modal_content_wrapper = $('<div id="modal_content_wrapper" class="content_wrapper"></div>');
var modal_regret_wrapper = $('<div id="modal_regret_wrapper" class="content_wrapper" style="display:none;"></div>');
// Question Content
var content_heading = $('<h2>Are you 21 or older?</h2>');
var content_buttons = $('<nav><ul><li>Yes</li><li>No</li></nav');
var content_text = $('<p>You must verify that you are 21 years of age or older to enter this site.</p>');
// Regret Content
var regret_heading = $('<h2>We\'re Sorry!</h2>');
var regret_buttons = $('<nav><small>I hit the wrong button!</small> <ul><li>I\'m old enough!</li></ul></nav');
var regret_text = $('<p>You must be 21 years of age or older to enter this site.</p>');
modal_content_wrapper.append(content_heading, content_buttons, content_text);
modal_regret_wrapper.append(regret_heading, regret_buttons, regret_text);
modal_content.append(modal_content_wrapper, modal_regret_wrapper);
// Append the prompt to the end of the document
$('body').append(modal_screen, modal_content);
// Center the box
av_positionPrompt();
modal_content.find('a.av_btn').on('click', av_setCookie);
};
av_setCookie = function(e) {
e.preventDefault();
var is_legal = $(e.currentTarget).attr('rel');
$.cookie('is_legal', is_legal, {
expires: 30,
path: '/'
});
if (is_legal == "yes") {
av_closeModal();
$(window).off('resize');
} else {
av_showRegret();
}
};
av_closeModal = function() {
modal_content.fadeOut();
modal_screen.fadeOut();
};
av_showRegret = function() {
modal_screen.addClass('nope');
modal_content.find('#modal_content_wrapper').hide();
modal_content.find('#modal_regret_wrapper').show();
};
av_positionPrompt = function() {
var top = ($(window).outerHeight() - $('#modal_content').outerHeight()) / 2;
var left = ($(window).outerWidth() - $('#modal_content').outerWidth()) / 2;
modal_content.css({
'top': top,
'left': left
});
if (modal_content.is(':hidden') && ($.cookie('is_legal') != "yes")) {
modal_content.fadeIn('slow')
}
};
/*!
* Age verification CSS to go with the JS that can be found at (https://github.com/Herudea/age-verification)
*/
#modal_screen {
position: fixed;
top:0;
left: 0;
height: 100%;
width: 100%;
z-index: 1100;
background-color: rgba(0,0,0,.8);
}
#modal_screen.nope {
background-color: #1e0924;
}
#modal_content {
position: fixed;
z-index: 1101;
margin: 0 auto;
background-color:#fff;
border:4px solid #444;
border-radius: 100%;
font-size: 12px;
width:290px;
height: 290px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
background-position: center 2em;
background-repeat: no-repeat;
background-size: 90px auto;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjY2IiB5PSI0NSIgZmlsbD0iIzMzMzMzMyIgd2lkdGg9IjUiIGhlaWdodD0iOCIvPg0KPHJlY3QgeD0iMzkiIHk9IjQ1IiBmaWxsPSIjMzMzMzMzIiB3aWR0aD0iNSIgaGVpZ2h0PSI4Ii8+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMTAwLDEyYzAtNi42LTUuNC0xMi0xMi0xMkgxMkM1LjQsMCwwLDUuNCwwLDEydjc2YzAsNi42LDUuNCwxMiwxMiwxMmg3NmM2LjYsMCwxMi01LjQsMTItMTJWMTJ6IE0zMiw1NGgtOQ0KCVY0NGgzdjloNlY1NHogTTQ3LDUzaC0ydjFoLTd2LTFoLTJ2LThoMnYtMWg3djFoMlY1M3ogTTYwLDQ1aC03djhoNHYtM2gtMXYtMmg0djVoLTF2MWgtOHYtMWgtMXYtOGgxdi0xaDlWNDV6IE03NCw1M2gtMnYxaC03di0xDQoJaC0ydi04aDJ2LTFoN3YxaDJWNTN6Ii8+DQo8L3N2Zz4NCg==);
}
#modal_content .content_wrapper {
padding-top: 8em;
margin:3em auto 0;
text-align: center;
}
#modal_content h2 {
margin: 0 0 0 0;
font:normal 15px/1.3em 'Gill Sans W01 Medium', Helvetica,arial,sans-serif;
}
#modal_content p {
max-width: 75%;
margin: 1.2em auto 0;
font:11px/1.5em "proxima-nova", Helvetica,arial,sans-serif;
}
#modal_content nav {font-size: 16px; display:table; width: 282px;}
#modal_content nav ul {display:table-row; width: 100%; margin:0; padding:0;}
#modal_content nav li {display: table-cell; text-align: right; width: auto;}
#modal_content nav:after {
content: "";
display: block;
clear: both;
}
#modal_content nav small {
display: block;
text-align: center;
color: #888;
margin: 1em 0 0;
}
#modal_content nav a.av_btn {
display:block;
text-align:center;
width: 65px;
border-radius: 23px;
margin:1em auto 0;
text-decoration: none;
padding:1em;
color: #fff;
font:normal .7em/1em 'AmericanTypwrterITCW01- 731031';
text-transform: none;
letter-spacing: 0;
}
#modal_content nav .av_go {
background-color: #7fbf4d;
}
#modal_content nav .av_no {
background-color: #938d95;
}
#modal_content nav .av_btn:hover {
background-color: #1e0924;
}
#modal_content #modal_regret_wrapper nav a.av_btn {
margin-top:0;
width:130px;
font-size: 0.8em;
}
#media (min-width: 688px) {
#modal_content {
top: 10em;
top: 30vh;
left: 30vw;
width: 90%;
max-width: 500px;
height:500px;
padding:3em;
border-radius: 100%;
background-position: center 3em;
background-size: 160px auto;
font-size: 16px;
}
#modal_content .content_wrapper {
padding-top: 150px;
margin:3em auto 0;
text-align: center;
}
#modal_content h2 {
margin: 0 0 0 0;
font-size: 1.875em;
}
#modal_content p {
font-size: 1em;
line-height: 1.9em;
}
#modal_content nav {width: 396px;}
#modal_content nav a.av_btn {
padding:1em 2.5em;
margin:1.6em auto 0;
font-size: 1em;
}
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Age Verification Demo</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/round-about.css" rel="stylesheet">
<!-- Age Verification CSS -->
<link href="css/age-verification.css" rel="stylesheet">
<!-- HTML5 Shim for HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Introduction Row -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">About Us
<small>It's Nice to Meet You!</small>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
<!-- Team Members Row -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Our Team</h2>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h3>John Smith
<small>Job Title</small>
</h3>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/age-verification.js"></script>
</body>
</html>
How can I make it where users can change these attributes in a dashboard and then export that finished code as an embed code?
(note: I understand my question isn't very specific for one main problem)
You can use <textarea> element for visitor to upload, paste, or set their code at the element using JavaScript.
Create a data URI of the original or edited content, use <a> element with download attribute or window.open() to offer user file for download.
textarea {
width:200px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea data-type="text/html" data-file-name="document.html" class="html"><!DOCTYPE html><html><head><script>console.log("abc")</script></head><body>HTML</body></html></textarea><button>save</button><br>
<textarea data-type="text/css" data-file-name="document.css" class="css">body {color:blue}</textarea><button>save</button><br>
<textarea data-type="text/javascript" data-file-name="document.js" class="javascript">console.log(123)</textarea><button>save</button><br>
<script>
$("button").on("click", function() {
var content = $(this).prev("textarea");
var dataURI = `data:${content.data().type},${content.val()}`;
var a = $("<a>", {
download: content.data().fileName,
href: dataURI,
on: {click: function() {this.remove()}}
}).appendTo(document.body)[0];
a.click()
})
</script>
I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!