Skip to content

Instantly share code, notes, and snippets.

@ThisBenRoberts

ThisBenRoberts/index.html

Last active August 29, 2015 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ThisBenRoberts/88d35b7128724b1ab866 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ThisBenRoberts/88d35b7128724b1ab866 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Website
Raw
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- custom js scripts -->
<script src="js/scripts.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/media_styles.css" rel="stylesheet">
<link href="css/nav_style.css" rel="stylesheet">
<!-- google maps scripts -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL3lHWG_JXwRWNSqLrbz8EJbZkjIRs7XE"></script>
<!-- /Script for Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</head>
<body data-spy="scroll" data-target=".navbar" id="home">
<div class="modal fade bs-example-modal-lg" data-backdrop="static" and data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<iframe id="resume" width="100%" height="100%" src="res/Ben_Roberts_Resume_ex.pdf#zoom=90" ></iframe>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:60px">
<div class="container-fluid">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="projectName">
<a href="#">Ben Roberts</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="background-color:#333333">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</div>
</div> <!-- /nav -->
<!-- Main jumbotron for a primary marketing message -->
<div class="jumbotron" >
<div class="container-fluid anchor" >
<br id="headline">
<br id="headline">
<br id="headline">
<h1>Ben Roberts </h1>
<p><strong>Developer - Analyst - Problem Solver</strong></p>
</div>
</div> <!-- /jumbotron -->
<div class="container-fluid anchor" id="about">
<div class="row" id="aboutrow">
<div class="col-xs-12 col-sm-4 col-md-4" >
<h2>A Creative Problem Solver...</h2>
<p>HTML • CSS • SQL • JavaScript • JQuery • Bootstrap • VBA Macros • SAS Macro Programming • Business Objects • Sharepoint • Data Analysis • Reporting • Report Automation <hr> <span id="lg-txt">Not merely buzz words, these are just some of the tools at my disposal. With my unique set of skills and experience, there is no problem I can't solve and no challenge I can't master.</span> </p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" id="midcol" >
<h2>with Proven Experience...</h2>
<p>Designed and devloped websites • Automated repetitve processes • Completed analysis to reduce risk • Improved customer service and warehouse operations • Trained end users on multiple software platforms <hr> <span id="lg-txt">As a true team player, these are just a few of my notable accomplishments.</span></p>
<!-- <p><a class="btn btn-default" href="Ben_Roberts_Resume_2.docx" role="button" id="aboutbutton">View details &raquo;</a></p> -->
</div>
<div class="col-xs-12 col-sm-4 col-md-4" >
<h2>and Soft Skills, too!</h2>
<p>Worked cross-functionally with, and fostered communication between, multiple departments • Translated business needs in to IT requirements • Effectively presented analysis and suggested responses • Lead team meetings • Managed multiple projects while maintaining priorites and exceeding expectations.<hr><span id="lg-txt"> From VPs and Directors to Managers and hourly emplyees, I've worked daily with all levels of the organization.</span></p>
<!-- <p><a class="btn btn-default" href="Ben_Roberts_Resume_2.docx" role="button" >View details &raquo;</a></p> -->
</div>
</div>
<div class="modal-button col-md-6 col-lg-6">
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Veiw Resume</button>
</div>
</div> <!-- /about container -->
<div class="container-fluid anchor" id="work">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
<img src="img/ScreenShotMetroAveOnline.png" alt="MetroAveOnline" style="max-width:100%;height:auto;" class="wrkimage">
<p>Done for a band out of Memphis, TN I used stellar.js and an altered scrolling speed to create a unique paralax effect, giving the impression that you're looking up and down the street as you scroll. The band asked for "cool colors and a gritty, jazzy, bluesy feel". Though not completely finished, this is one of my favorite side projects. </p>
<p><a class="btn btn-default" href="http://www.metroaveonline.com/" role="button">View the site &raquo;</a></p>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
<img src="img/ScreenShotMadameWoolite.png" alt="MadameWoolite" style="max-width:100%;height:auto;" class="wrkimage">
<p>Showcasing the work of a talented local artist, a simple landing page and gallery were all that was required to display the many unique pieces. Producing works mostly for herself, she is also available for commissioned pieces. She can be reached through the contact form on her website.</p>
<p><a class="btn btn-default" href="http://www.madamewoolite.com/" role="button">View the site &raquo;</a></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 " id="constrc">
<img src="img/buildingconstruction_1.jpg" alt="More To Come" style="max-width:100%;height:auto;" id="constrcimage" class="wrkimage">
<p>Much of my professional work is proprietary but new projects are always under construction. Be sure to check back in soon for a glimpse of everything that I'm working on.</p>
<!-- <p><a class="btn btn-default" href="#" role="button">Nowhere &raquo;</a></p> -->
</div>
</div>
</div> <!-- /work container -->
<div class="container-fluid anchor" id="contact">
<div class="row" id="cntctrow">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" id="cntctitem">
<h2><span class="glyphicon glyphicon-envelope"></span> E-Mail</h2>
<p>BenRobertsMemphis<!-- <span id="blankspace"> </span> -->@gmail.com or 901ideas@gmail.com</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" id="cntctitem">
<h2><span class="glyphicon glyphicon-send"></span> Snail Mail</h2>
<p>Located in East Memphis, you can find me near the corner of <!-- <span id="blankspace3"><br></span> -->Walnut Grove and Yates,<br>about 2 blocks east of I-240.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" >
<h2><span class="glyphicon glyphicon-earphone"></span> The Phone</h2>
<p>You could call or text me as well.<span id="blankspace2"><br></span>901-292-4887</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" >
<h2><span class="glyphicon glyphicon-alert"></span> Smoke Signals</h2>
<p>Currenly Unavailable but please check back soon.</p>
<!-- Code for button, just in case -->
<!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h1 id="cntctheader">When you absolutley, positively have to reach me overnight...<h1>
</div>
<div >
<form class="col-sm-8 col-md-8 col-lg-8">
<div class="form-group">
<label for="name"> Your Name: </label>
<input placeholder="First and Last Name" type="text" class="form-control" required=”required” name="flname" id="name">
</div>
<div class="form-group">
<label for="teln"> Phone Number: </label>
<input placeholder="Phone Number" type=”tel” minlength="10" maxlength="12" class="form-control" name="teln" id="teln" > <!-- pattern="{3}[\-]\d{3}[\-]\d{4}" -->
</div>
<div class="form-group">
<label for="email"> Email Address: </label>
<input placeholder="Email" type="email" class="form-control" required=”required” name="email" id="email">
</div>
<div class="form-group">
<label for="message"> Let me know what you think: </label>
<textarea placeholder="What's on your mind?" style="width:100%; resize:none; color:black" rows="3" class="message-box" required=”required” name="message" id="message"></textarea>
<p id="charCount"></p>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
<div class="col-sm-4 col-md-4 col-lg-4">
<div id="map-canvas" style="height: 300px; width:300px"></div>
</div>
</div>
</div>
</div> <!-- /contact container -->
<div class="container-fluid anchor" id="faq">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- begin first panel -->
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" >
<!-- changed aria-expanded="false" to prevent first panel from opening automatically -->
Why does a developer need an FAQ section?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <!-- removed class in to prevent first panel from opening automatically -->
<div class="panel-body">Many questions are frequently asked of developers: "Where did you learn to code?" or "I have an awesome idea for a website! Can you help me?" or "How do you feel about the Oxford Comma?" While all great questions, other more important and specific questions tend to be answered as part of the interview process. If you have a question that has not been answered here, feel to send me an email, call my cell, or send me a self addressed stamped envelope.<br><br>
</div>
</div>
</div> <!-- /first panel -->
<div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- begin second panel -->
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Where did you learn to code?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">I am largely self-taught but that's not to say that I haven't had much help over the years. I began with BASIC as an adolescent. In high school, I took courses on Pascal, HTML, and C++. A college course on MS Access was my first introduction to VBA and SQL. When I could find spare time, I taught myself php and built a small web app as a prototype for a local distribution company. In my current role, I expanded my knowledge and use of both VBA and SQL, learned SAS macro programming and began using HTML, JavaScript, and Jquery. Courses from Codecademy.com assisted with HTML/CSS, JavaScript, JQuery, and Ruby. Currently I am enrolled in a course through CareerFoundry learning full-stack development.
</div>
</div>
</div> <!-- /second panel -->
<div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- begin third panel -->
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
I have an awesome idea for a website! Can you help me?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">Yes and No. Right now my main focus is on improving my current skill set. I do work on many different projects for friends, family, and clients and would love to help you in any way that I can. Drop me a line let me know what you're thinking.
</div>
</div>
</div> <!-- /third panel -->
<div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- begin fourth panel -->
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
How do you feel about the Oxford Comma?</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">You can have my Oxford comma when you pry it from my cold, dead, and lifeless hands.
</div>
</div>
</div> <!-- /fourth panel -->
</div> <!-- /panel group -->
</div> <!-- /faq container -->
<footer>
&copy; Copyright 2015 Benjamin Roberts | All Rights Reserved
<a href="https://twitter.com/901_ideas" class="twitter-follow-button" data-show-count="false">
Follow @901_ideas</a>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<!-- This script provides for smooth scrolling when you click on the menu items -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Raw
media_styles.css
@media (max-width: 599px) {
.jumbotron{
/*background-image: url("");
background-color: red;*/
background-size: cover;
min-height: 400px;
}
/* .jumbotron h1 {
font-size: 95%;
color: black;
}
.jumbotron p {
font-size: 80%;
}*/
/*#headline {
display: none;
}*/
#aboutbutton{
display: none;
}
#constrcimage{
display: none;
}
p { font-size: 80%}
#lg-txt {
display: none;
}
#work{
padding:25px;
/*height:550px;*/
}
/*#contact {
padding:0px;
}*/
#faq{
/*height: 420px;*/
padding-top: 50px;
}
}
@media (min-width: 600px) and (max-width: 710px) {
.jumbotron{
/*background-image: url("");
background-color: yellow;*/
background-size: cover;
min-height: 450px;
}
p { font-size: 90%}
.nav ul li a {
color:black;
}
#work{
padding:50px;
/*height:650px;*/
}
/* #about {
height: 750px;
}*/
#aboutbutton{
display: none;
}
#constrcimage{
display: none;
}
/*#contact {
padding:0px;
}*/
#blankspace3 {
display: inline;
}
#faq{
/*height: 300px;*/
padding: 25px;
}
#accordion
{position: relative;
top: 50%;
transform: translateY(-50%);}
}
@media (min-width: 710px) and (max-width: 767px) {
.jumbotron{
/*background-image: url("");
background-color: yellow;*/
background-size: cover;
min-height: 470px;
}
p { font-size: 90%}
.nav ul li a {
color:black;
}
#work{
padding:50px;
/*height:650px;*/
}
/* #about {
height: 700px;
}*/
#aboutbutton{
display: none;
}
#constrcimage{
display: none;
}
/*#contact {
padding:0px;
}*/
#blankspace3 {
display: inline;
}
#faq{
/*height: 400px;*/
}
#accordion
{position: relative;
top: 50%;
transform: translateY(-50%);}
}
@media (min-width: 768px) and (max-width: 843px) {
.jumbotron{
/*background-image: url("");
background-color: orange;*/
background-size: cover;
min-height: 500px;
}
#midcol{
padding: 1px 30px;
}
#work{
padding:100px 50px;
}
#cntctitem {
padding-bottom: 45px;
}
#blankspace {
display: inline;
}
#blankspace2 {
display: inline;
}
/*#contact {
padding:0px;
}*/
#faq{
/*height: 300px;*/
}
/*#accordion
{position: relative;
top: 50%;
transform: translateY(-50%);}*/
}
@media (min-width: 844px) and (max-width: 990px) {
.jumbotron{
/*background-image: url("");
background-color: blue;*/
background-size: cover;
}
#midcol{
padding: 1px 30px;
}
#work{
padding:100px 50px;
}
#cntctitem {
padding-bottom: 45px;
}
#blankspace {
display: inline;
}
/* #accordion
{position: relative;
top: 50%;
transform: translateY(-50%);}*/
}
@media (min-width: 991px) and (max-width: 1000px) {
.jumbotron{
/*background-image: url("");
background-color: green;*/
background-size: cover;
}
#midcol{
padding: 1px 30px;
}
#work{
padding:100px 50px;
}
#blankspace {
display: inline;
}
#contact {
padding:0px;
height:350px;
}
#faq{
height: 300px;
}
/*#accordion
{position: relative;
top: 50%;
transform: translateY(-50%);}*/
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*ipad*/
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}}
@media only screen /*ipad 3,4*/
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*ipad 1,2*/
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*ipad mini*/
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*iphone 6*/
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}}
@media only screen /*iphone 6 plus*/
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*iphone 5&5s*/
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
@media only screen /*iphone 2g-4s*/
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */
#about:before{
background-attachment: scroll;
}
#work{
background-attachment: scroll;
}
#contact:before{
background-attachment: scroll;
}
#faq:before{
background-attachment: scroll;
}
}
Raw
nav_style.css
.nav {
float: right;
}
.projectName {
text-transform: uppercase;
font-size: 16px;
padding: 13px;
}
.projectName a {
color: white;
padding: 15px;
}
Raw
scripts.js
var myProjects = [
{ title: "First Project", pic: "./img/ScreenShotMadameWoolite.png" },
{ title: "Second Project", pic: "./img/ScreenShotMetroAveOnline.png" },
{ title: "Third Project", pic: "./img/buildingconstruction_1.jpg" },
{ title: "Fourth Project", pic: "./img/buildingconstruction_1.jpg" }
];
$(document).ready(function(){
//alert("Document is ready!");
$(".wrkimage").mouseenter(function(){
// $(this).css("visibility","hidden");
$(this).css("opacity", "1");
$(this).css("background-color", "white");
}).mouseleave(function(){
// $(this).css("visibility","visible");
$(this).css("opacity", ".5");
$(this).css("background-color", "transparent");
});
//Color the message box of the contact form
$(".message-box").css("background-color", "pink");
$("#button").on("click",function(){
console.log("clicked");
var comment = $(".message-box").val();
console.log(comment)
$("#visible-comment").html(comment);
return false;
});
$(".message-box").on("keyup", function() {
console.log("keyup happened!");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#charCount").html(charCount);
if(charCount > 150) {
// need to turn character count red
$("#charCount").css("color","red");
} else {
// need it to be black
$("#charCount").css("color","white");
};
});
var rows = $(".my-row");
console.log(rows);
for(var i=0; i<rows.length; ++i) {
if (i%2===0) {
$(rows[i]).css("background-color", "pink");
} else {
// $(rows[i]).css("background-color", "blue");
}
};
for(var i=0; i<myProjects.length; ++i) {
// console.log(myProjects[i].pic);
// $("#" + i ).css("background-color", "red" );
$("#" + i ).css("background-image", "url(" +myProjects[i].pic+ ")" );
};
$(".image").mouseenter( function() {
// console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myProjects[this.id].title + "</p>");
}).mouseleave( function() {
$("p.info").html("");
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35.137304,-89.871425,17),
zoom: 9
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
}); // close the doc ready.
Raw
styles.css
.jumbotron{
background-image: url("../img/tabletop.jpeg");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
min-height: 650px;
}
.jumbotron p {
color: white;
text-align: center;
}
.jumbotron h1 {
text-align: center;
color: #B8B8B8;
}
body {
position: relative;
}
.anchor {
padding-top: 100px;
}
#about{
position: relative;
overflow: hidden;
background-color: black;
color: white;
padding:50px;
padding-top: 100px;
content:".";
display:block;
clear:both;
/* background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
/* background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment: fixed;*/
/*background-image: url("../img/metal-gears-powerpoint-backgrounds.jpg");*/
/*Add a background image*/
/*Give the background a fixed position does it not scroll when you scroll*/
/*background-size: cover;*/
/*Have the background cover the entire div section*/
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
/*height: 750px;*/
/*width: 100%;*/
/*height:auto;*/
}
/*#aboutrow{
position: relative;
top: 50%;
transform: translateY(-50%);
}*/
#about:before{
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
z-index: 0;
opacity: .4;
background-image: url("../img/metal-gears-powerpoint-backgrounds.jpg");
/*Add a background image*/
/*Give the background a fixed position does it not scroll when you scroll*/
/*background-size: cover;*/
/*background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;*/
/*background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;*/
background-attachment: fixed;
/* background-attachment: fixed;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.modal-body {
height: 500px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
}
.modal-backdrop {
z-index: -1;
}
#work{
background-image: url("../img/lights-on-concrete-wall-powerpoint-backgrounds_edited2.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding:100px;
padding-top: 100px;
/* height: 650px;*/
}
#work div div {
margin:0px;
}
.wrkimage {
opacity:.5;
}
#work p{
margin-top: 10px;
}
#contact{
position: relative;
overflow: hidden;
background-color: black;
/*background-image: url("../img/podklad-pod-rozhovor.jpg");*/
/*Add a background image*/
/*background-attachment: fixed;*/
/*Give the background a fixed position does it not scroll when you scroll*/
/*background-size: cover;*/
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding:50px;
padding-top: 10%;
/*height: 600px;*/
min-height: 500px;
}
#contact:before{
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
z-index: 0;
opacity: .3;
background-image: url("../img/podklad-pod-rozhovor.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/* background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;*/
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
padding-top: 20%;
}
#contact div div {
margin:0px;
text-align: center;
}
#charCount{
float: right;
}
/*#cntctrow{
height: 400px;
}*/
#cntctitem{
padding-right: 10px;
padding-left: 10px
}
#blankspace{
display: none;
}
#faq{
position: relative;
overflow: visible;
/*background-color: black;*/
/*background-image: url("../img/podklad-pod-rozhovor.jpg");*/
/*Add a background image*/
/*background-attachment: fixed;*/
/*Give the background a fixed position does it not scroll when you scroll*/
/*background-size: cover;*/
/*Have the background cover the entire div section*/
/*color: white;*/
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding:50px;
padding-top: 50px;
/*height: 400px;*/
}
#faq:before{
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
z-index: -1;
/*opacity: .0;*/
background-image: url("../img/woodletters.jpeg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/* background-image: url('http://placekitten.com/1500/1000');
background-repeat: no-repeat;*/
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
footer{
background-color: black;
color: grey;
}
.twitter-follow-button {
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment