Skip to content

Instantly share code, notes, and snippets.

@acaporrini

acaporrini/index.html

Last active August 29, 2015 14:20
Show Gist options
  • Save acaporrini/9009e83ed07eac7a0617 to your computer and use it in GitHub Desktop.
Save acaporrini/9009e83ed07eac7a0617 to your computer and use it in GitHub Desktop.
Download ZIP
singlepage
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<!-- <link href="css/home_styles.css" rel="stylesheet"> -->
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="js/scripts.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArBS8qBeGIFWN7nDgI5FMS1QYfrjs2PFA"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.3&appId=372101122983101";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- NAVBAR -->
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button id="toggle" 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>
<div class="navbar-collapse collapse">
<a class="navbar-brand" href="#top"><span class="glyphicon glyphicon-home"></span></a>
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#work">Work
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#inwhite">In White B&B</a></li>
<li><a href="#insight">Insight Interiors</a></li>
</ul>
</li>
<li><a href="#faq">Learn More</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</div>
</div>
</nav>
<!-- CAROUSEL -->
<div class="container-fluid" id="top">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel/1.jpg" alt="">
<div class="carousel-caption">
<h1>Alessandro Caporrini, Webmaster</h1>
<p><strong>Junior Web developer:</strong> I'm able to build a Web presence from the ground up: from concept, navigation, layout to back-end programming. I'm a fast learner, hard worker and team player who is proficient in modern web languages.</p>
<a class="btn btn-default" href="#about" data-toggle="tooltip" data-placement="bottom" title="Go to About section">Learn more...</a>
</div>
</div>
<div class="item">
<img src="img/carousel/2.jpg" alt="...">
<div class="carousel-caption">
<h1>Check out the work section to see some of my previous projects</h1>
<a class="btn btn-default" href="#work" data-toggle="tooltip" data-placement="bottom" title="Go to the Work section">Learn more...</a>
</div>
</div>
<div class="item">
<img src="img/carousel/3.jpg" alt="...">
<div class="carousel-caption">
<h1>Wanna know more? Check out the FAQ</h1>
<a class="btn btn-default" href="#faq" data-toggle="tooltip" data-placement="bottom" title="Go to the FAQ section">Learn more...</a>
</div>
</div>
<div class="item">
<img src="img/carousel/4.jpg" alt="...">
<div class="carousel-caption">
<h1>Contact me</h1>
<a class="btn btn-default" href="#contacts" data-toggle="tooltip" data-placement="bottom" title="Go to contacts">Learn more...</a>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- ALT -->
<div id="alt" class="container-fluid">
<div class="container">
<h1>Alessandro Caporrini</h1>
<h2>Web Master</h2>
<p><strong>Junior Web developer</strong> I'm able to build a Web presence from the ground up: from concept, navigation, layout to back-end programming. I'm a fast learner, hard worker and team player who is proficient in modern web languages.</p>
<a href="#about"><span class="fa fa-arrow-circle-o-down"></span></a>
</div>
</div>
<div id="about" class="container-fluid anchor">
<div class="container">
<div class="row">
<div id="intro">
<div class="col-xs-12">
<img src="img/me.jpg" alt="my picture" class="img-responsive img-circle">
</div>
<div class="col-xs-12">
<h2>Full Stack Web Developer, system administrator, tech enthusiast.</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">
<h3>More about me</h3>
<p>
Junior Web developer able to build a Web presence from the ground up: from concept, navigation, layout to back-end programming.
Fast learner, hard worker and team player who is proficient in modern web languages.
Strong background in Java development and object oriented programming, Linux administration and LAMP environment.
</p>
</div>
<div id="skills" class="col-xs-12 col-md-4">
<h3>My Skills</h3>
<ul id="skill_list">
<li>Java</li>
<li>Linux</li>
<li>Javascript</li>
<li>HTML5</li>
<li>CSS</li>
</ul>
</div>
</div>
<div class="videoWrapper">
<iframe width="560" height="349" src="https://www.youtube.com/embed/Pwrwf_8H25Y?rel=0&amp;amp;theme=light&amp;amp;iv_load_policy=3&amp;amp;showinfo=0&amp;amp;hd=1&amp;amp;autohide=1&amp;amp;color=white&amp;amp;autoplay=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- WORK -->
<div id="work" class="container-fluid anchor">
<div class="container">
<h1>Work</h1>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<div class="image" id="0"></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<div class="image" id="1"></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<div class="image" id="2"></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<div class="image" id="3"></div>
</div>
</div>
<!-- <div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 workDiv">
<img class="img-responsive" src="img/pug.jpg">
</div>
</div> -->
<div class="row" id="inwhite">
<div class="col-xs-12 col-md-4">
<a href="http://inwhite-bnb.it" target="_blank">
<h1>In White B&B</h1>
2015
<p> Wordpress based </p>
</a>
</div>
<div class="col-xs-12 col-md-8">
<img class="img-responsive" src="img/inwhite.png">
</div>
</div>
<div class="row" id="insight">
<div class="col-xs-12 col-md-4">
<a href="http://insight-interiors.com" target="_blank">
<h1>Insight Interiors</h1>
2014
<p> Joomla based</p>
</a>
</div>
<div class="col-xs-12 col-md-8">
<img class="img-responsive" src="img/insight.png">
</div>
</div>
</div>
</div>
<!-- FAQ-->
<div id="faq" class="container-fluid anchor">
<div class="container">
<div class="row">
<h1 class="learn-more">Learn more...</h1>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">View Resume</button>
</div>
</div>
<div class="row">
<!-- Small modal -->
<div class="modal fade bs-example-modal-sm" 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">My Resume</h4>
</div>
<div class="modal-body">
<iframe id="modalframe" src="public/Caporrini-en.pdf#zoom=100"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="table">
<h2>Products overview</h2>
<table>
<tr class="my-row">
<th>Services</th>
<th>Responsive website</th>
<th>Interactive website</th>
</tr>
<tr class="my-row">
<td>Responsive?</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr class="my-row">
<td>Interactive?</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr class="my-row">
<td>Design?</td>
<td>Template</td>
<td>Original</td>
</tr>
<tr class="my-row">
<td>Content Development?</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr class="my-row">
<td>Maintenance</td>
<td>No</td>
<td>Yes</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> Why did you decide to become a Web Developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
After working many years as a Linux system administrator I fell in love with coding. I love to code, it makes me feel good, I can do that for hours!
I love to find solution to everyday problems through coding and create modern web services that people can use to improve their lives. It makes me feel like I'm creating something that has a real value.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span>
What kind of job are you looking for?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
I wanna face new challenges, feel that my job is important and that what I'm doing can have an impact. I wanna learn how to bring innovation and be part of the tomorrow's revolution.
I'm moving to Berlin and my biggest goal is to find an apprenticeship/intern/junior position as web developer in this amazing city.
I'm looking for chances to grove professionaly and personally working side by side with brilliant pro.
I'm a fast learner, hard worker,thech enthusiast, good team player that can also works idividually.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span>
Ok, but what are your programming skills?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
I've accomplished a vocational diploma in software development mainly focussed on Java,VB.net,C/C++.
I'm a Oracle certified associate Java developer.
I'm already prolificent in HTML,CSS,Javascript,Jquery and I am now expanding my knowledge about Ruby on Rails and Node.js stacks.
</div>
</div>
</div>
</div>
<div class="mail ">Still have questions? <a href="mailto:a.caporrini@gmail.com"> Write me an email</a></div>
</div>
</div>
<div id="contacts" class="container-fluid anchor">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<h1>Contact</h1>
<div class="link">
<a href="mailto:a.caporrini@gmail.com"><span class="fa fa-envelope-o"></span> a.caporrini@gmail.com</a>
</div>
<div class="link">
<a href="tel:+39060000"><span class="fa fa-phone-square"></span> +39060000</a>
</div>
<div class="link">
<a href="skype:alessandro.caporrini"><span class="fa fa-skype"></span> alessandro.caporrini</a>
</div>
<h1>Follow</h1>
<div class="link">
<a href="https://github.com/acaporrini" target="_blank"><span class="fa fa-github-square"></span>https://github.com/acaporrini</a>
</div>
<div class="link">
<a href="https://it.linkedin.com/in/alessandrocaporrini" targer="_blank"><span class="fa fa-linkedin-square"></span>http://linkedin.com/in/alessandrocaporrini
</a>
</div>
<div class="link">
<a href="https://twitter.com/acaporrini" target="_blank"><span class="fa fa-twitter-square"></span>https://twitter.com/acaporrini</a>
</div>
</div>
<div class="col-xs-12 col-md-8">
<h1>Say hello</h1>
<form>
<div class="form-group" >
<label for="name" class="sr-only ">Your Name</label>
<input type=”text” id="name" placeholder="*Your name" required="required" maxlength="50" class="inline-input">
<label for="phone" class="sr-only">Your Phone Number</label>
<input type="tel" class="inline-input" id="phone" placeholder="Your Phone Number" maxlength="50" >
</div>
<div class="form-group" >
</div>
<div class="form-group">
<label for="email" class="sr-only">Your Email</label>
<input type="email" id="email" placeholder="*Your Email" required="required" maxlength="50" class="form-control">
</div>
<div class="form-group">
<textarea id="comment-box" style="resize:none" cols="40" rows="5" class="form-control" placeholder="*Your message" maxlength="500"></textarea>
</div>
<p id="char-count">
</p>
<button id="submit" type="submit" class="btn btn-primary">Send</button>
</form>
<p id="visible-comment">
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4">
<h1>Address</h1>
<p>
Schöneberg</br>
10783 Berlin</br>
Germany</br>
</p>
</div>
<div class="<col-xs-12 col-md-8">
<div id="map-canvas">
</div>
<!--
<iframe width="100%" height="400px" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?key=AIzaSyArBS8qBeGIFWN7nDgI5FMS1QYfrjs2PFA&q=Bülowstraße+95,+10783+Berlin,+Germany">
</iframe>
-->
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<div class="copyright">
&copy; 2015 Alessandro Caporrini | All rights reserved
</div>
<div id="twitter" class="socialbuttons">
<a href="https://twitter.com/acaporrini" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @acaporrini</a>
</div>
<div class="socialbuttons fb-like" data-href="http://car-park-attendant-emma-63154.bitballoon.com/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script src="js/jquery.media.js" type="text/javascript"></script>
<!-- <script src="js/myjs.js" type="text/javascript"></script> -->
<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>
<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;
});
$('.navbar-brand').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
scripts.js
$(document).ready(function(){
$("#comment-box").css("background-color","#8B92A2");
$("#comment-box").css("color","white");
$("#submit").on("click",function(event){
event.preventDefault();
console.log("Clicked");
var comment = $("#comment-box").val();
$('#visible-comment').html(
"Message sent, you wrote: "+comment.toUpperCase()
);
$('#name,#email,#phone,#comment-box').val("");
return false;
})
$("#comment-box").on("keyup",function(){
var charCount = $("#comment-box").val().length;
console.log(charCount);
$("#char-count").html((500-charCount)+" characters left");
if (charCount>100){
$("#char-count").css("color","red");
}
else{
$("#char-count").css("color","black");
}
});
$("#phone").on("change",function(){
var number = $(this).val();
var current;
for (var i=0;i<number.length;++i){
current = number.charAt(i);
if (!(current >= "0") || !(current <="9")){
number = number.slice(0,i)+number.slice(i+1,number.length);
--i;
}
}
$(this).val(number);
});
var rows = $(".my-row");
console.log(rows);
for (var i=0;i<rows.length;++i){
if(i%2===0){
$(rows[i]).css("background-color","#34495e");
$(rows[i]).css("color","white");
}
}
for (var i=0;i<myWorks.length;++i){
// console.log($("#"+i));
// console.log(myWorks[i].pic);
$("#"+i).css("background-image","url('"+myWorks[i].pic+"')");
}
$(".image").mouseenter(function(){
//console.log(this);
$(this).html("<p class='info'><span class='proj-title'><a href='"+myWorks[this.id].link+"'>Title: "+ myWorks[this.id].title+"</a></span></p>");
$(this).css("background-image","url('"+myWorks[this.id].altPic+"')");
});
$(".image").mouseleave(function(){
//console.log(this);
//console.log(myWorks[this.id].title);
$("p.info").html("");
$(this).css("background-image","url('"+myWorks[this.id].pic+"')");
});
$(".dropdown").mouseenter(function(){
//console.log("enter");
$(this).addClass("open");
});
$(".dropdown").mouseleave(function(){
//console.log("leave");
$(this).removeClass("open");
});
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(52.49935,13.35656,17),
zoom: 15,
mapTypeControl: false,
scaleControl: false,
panControl: false,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
}
};
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(18);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
});
var myWorks = [
{
title:"In White Bed & Breakfast",
pic:"img/inwhite-squared.png",
altPic:"img/inwhite-squared-hover.png",
link:"#inwhite"
},
{
title:"Insight Interiors",
pic:"img/insight-squared.png",
altPic:"img/insight-squared-hover.png",
link:"#insight"
},
{
title:"Third Project",
pic:"img/work-in-progress.jpg",
altPic:"img/work-in-progress.jpg",
link:"#"
},
{
title:"Fourth Project",
pic:"img/work-in-progress.jpg",
altPic:"img/work-in-progress.jpg",
link:"#"
}
];
Raw
styles.css
/* GENERAL */
body {
background-color: #fffeea ;
position: relative;
color: #34495e;
font-family: 'Quicksand', sans-serif;
}
#alt {
display: none;
}
.anchor {
padding-top: 20px;
color: #34495e;
border-width: 20px 0px 0px 0px;
border-color: #34495e;
border-style: solid;
}
.container{
padding: 30px 30px 50px 30px;
margin-top: 100px;
margin-bottom: 100px;
background: rgba(255, 255, 255, .7);
}
#inwhite , #insight {
padding-top: 70px;
}
/*NAVBAR*/
.navbar {
background-color: rgba(52,73,94,.8);
padding: 5px 15px 5px;
z-index: 1;
}
.navbar ul {
float: right;
}
.navbar a{
color: white;
transition: color 600ms;
-webkit-transition: color 600ms;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: bold;
}
.navbar ul li a {
font-size: 1.2em;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover{
background-color: rgba(52,73,94,.9);
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover{
background-color: rgba(52,73,94,.9);
}
/*
.navbar-inverse .navbar-nav > .open > a:focus{
background-color: rgba(52,73,94,1);
}
.navbar-inverse .navbar-nav > .active > a:hover{
background-color: rgba(52,73,94,1);
}
*/
#toggle:hover,#toggle:active,#toggle:focus {
background-color: rgba(52,73,94,1);
}
.glyphicon-home {
font-size: 1.6em;
}
/*CAROUSEL*/
.container-fluid{
padding: 0;
}
.carousel-caption {
top: 40px;
}
.carousel-caption h1 {
font-size: 3em;
}
.carousel-caption p {
font-size:2em;
}
.carousel-example-generic .container {
margin-top: 150px;
margin-bottom: 150px;
padding: 30px;
}
.carousel-example-generic .container h1{
margin-bottom: 20px;
}
.btn-default {
background-color: transparent;
color: white;
}
/* ABOUT */
#about{
background-image: url("../img/carousel/1.jpg");
background-attachment: fixed;
background-size: cover;
padding-bottom: 20px;
}
#skills h3 {
text-align: center;
text-transform: uppercase;
}
#skills {
background-color: #34495e;
color: #FFF;
}
#intro {
text-align: center;
}
#intro img {
margin: 20px auto;
}
#intro h2 {
margin: 40px;
font-size: 2em;
font-weight: bold;
}
#intro p {
font-size: 2em;
font-weight: 100;
-webkit-margin-before: 0;
}
/*VIDEO*/
.video {
border-width:20px 0px 0px 0px;
border-color: #34495e;
border-style: solid;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*WORK*/
#work{
background-image: url("../img/carousel/2.jpg");
background-attachment: fixed;
background-size: cover;
}
.workDiv {
margin-bottom: 30px;
}
.row {
margin-bottom: 30px;
}
.image {
box-sizing:border-box;
background-repeat: no-repeat;
background-size: cover;
border:2px solid #34495e;
width:200px;
height:200px;
margin:5px;
display:inline-block;
position:relative;
}
.info {
display:inline-block;
color:white;
/*font-family:Futura;*/
text-transform:uppercase;
font-size: 1.1em;
font-weight:900;
letter-spacing:0.5em;
line-height:1.6;
position:absolute;
top:10%;
left:10%;
}
.proj-title {
font-weight:1000;
}
.proj-title a{
color:white;
}
/*FAQ*/
#table{
width: 100%; margin: 10 auto;
}
#table h2{
text-align: center;
}
th,td {
padding:5px 10px;
}
.learn-more{
margin: 30px;
float: left;
text-align: left;
}
.modal-button {
margin-top: 10px;
float: right;
padding: 15px;
}
.modal-body {
width: 100%;
height: 500px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
}
#faq{
background-image: url("../img/carousel/3.jpg");
background-attachment: fixed;
background-size: cover;
padding-bottom: 20px;
}
.panel-default {
background-color: transparent;
border: none;
box-shadow: none;
}
.panel-default a{
color: #34495e;
text-decoration: none;
size: 1.5em;
}
.panel-default >.panel-heading {
background-color: transparent;
}
.panel-group .panel-heading+.panel-collapse>.panel-body {
border: none;
box-shadow: none;
}
.panel-collapse>.panel-body {
margin-left: 40px;
font-style: italic;
}
.glyphicon-plus{
margin-right: 10px;
font-size: 0.8em;
}
/*CONTACTS*/
#contacts{
background-image: url("../img/carousel/4.jpg");
background-attachment: fixed;
background-size: cover;
height: 1080px;
}
.mail{
text-align: center;
display: block;
font-size: 2em;
margin: 20px;
}
.link {
font-size: 1em;
}
.link span {
margin-right: 20px;
}
.link a {
text-decoration: none;
margin-left: 10px;
color: #34495e;
}
a:hover {
color: #00D7D7;
text-decoration: none;
}
.form-control{
width: 95%;
}
#visible-comment{
margin-top:20px;
}
#contacts img {
width: 95%;
height: auto;
}
.btn-primary{
background-color: #34495e;
}
.inline-input{
width: 47%;
margin: 0 auto;
}
#map-canvas{
width: 100%;
height: 400px;
}
#contacts p{
margin-left: 10px;
font-size: 1.3em;
}
/*FOOTER*/
footer {
background-color: rgba(52,73,94,.8);
padding: 20px;
color: white;
}
.copyright {
margin:10px;
float: left;
}
.socialbuttons {
margin: 10px;
float: right;
display: inline-block;
}
/*RESPONSIVE*/
@media (max-width: 767px){
/* Adjust dropdown menu */
.navbar ul {
clear: both;
float: left;
}
/* Hide carousel and most graphic */
#contacts,#faq,#about,#work{
background-image: none;
height: auto;
}
#carousel-example-generic{
display: none;
}
.videoWrapper {
display: none;
}
/*Show alternative hero header */
#alt {
display: block;
background-image: url("../img/mobilebg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-color: none;
height: 900px;
}
#alt > .container {
background: none;
text-align: center; }
#alt {
color: white; }
#alt a{
font-size: 5em;
color: white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment