LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Lewis Robinson
    
    
    
    
    
    
    



    
    
    
    

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga officia maxime suscipit harum minus est necessitatibus error, asperiores, id rerum rem vitae, ut explicabo soluta eaque tempore ratione repellendus iure. Voluptas nisi, veritatis harum voluptates odio. Autem distinctio aliquam, dolore quis, commodi quam omnis inventore illum corporis ducimus, optio ipsam mollitia? Impedit, omnis nesciunt quod beatae odit at laudantium perferendis. Nobis necessitatibus similique sit eaque mollitia minima quam debitis a odio, in aperiam magnam? Eveniet est vel quis aliquid nostrum ipsa porro facere excepturi ducimus laudantium, eaque, autem doloremque natus. Ipsum quis, aut fuga omnis vero dolorum beatae! Odit, eveniet, ab. Suscipit, consequatur perferendis placeat voluptate modi quam laudantium ipsam non nobis earum nemo odit minima molestias illo, reprehenderit ut. Ipsum excepturi nostrum ullam incidunt at, laborum eos optio voluptatum minus quibusdam illo fuga necessitatibus est nam totam rerum, vel sequi neque nisi recusandae labore ducimus eaque vero? Quia, ab!


Testimonials

Testimonial 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"

Testimonial 2

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"

Testimonial 3

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"


Contact

Lewis Ridyard © 2015
CSS
* {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
    line-height: 1.5em;
}
#navicon {
    background-color: rgba(255, 255, 255, 0.5);
    color: #2a4d69;
    font-size: 2em;
    display: block;
    position: fixed;
    margin: 15px;
    padding: 5px 15px;
    margin-left: 50px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}
#navicon:hover,
#navicon:active {
    background-color: #2a4d69;
    color: salmon;
}
#nav-toggle {
    background-color: rgba(255, 255, 255, 0.5);
    color: #2a4d69;
    font-size: 2em;
    display: inline-block;
    text-align: left;
    padding: 5px 15px;
    border-radius: 50%;
    text-decoration: none;
}
.nav {
    background-color: #FA8072;
    margin: 0;
    position: fixed;
    display: inline-block;
    height: 100%;
    z-index: 2;
    transform: translateX(-200px);
    transition: all 0.3s ease-in-out;
    z-index: 999;
}
.nav ul {
    margin-top: 0;
    opacity: 0.8;
    display: block;
    background-color: #FA8072;
}
.nav li {
    list-style-type: none;
    display: block;
    text-align: center;
    padding: 15px 0;
}
.nav a {
    text-decoration: none;
    color: white;
    font-size: 1em;
    clear: both;
    letter-spacing: 2px;
    padding: 0 20px 0 20px;
}
.nav li:hover {
    opacity: 1.0;
    color: lightgrey;
    height: inherit;
    background-color: #2a4d69;
    /*#C7665B*/
    
    transition: all 0.3s ease-in-out;
}
#container {
    display: block;
}
.banner {
    background-image: url("http://i.huffpost.com/gen/1438088/images/o-PACIFIC-OCEAN-WARMING-facebook.jpg");
    /*url("Images/landscape.jpg")*/
    height: 100vh;
    background-size: cover;
    border-bottom: grey 1px solid;
    box-shadow: 0 10px 10px lightgrey;
    display: block;
    text-align: center;
    clear: both;
    position: relative
}
#header-text {
    text-align: center;
    width: 60%;
    display: inline-block;
    margin-top: 30vh;
    margin-left: auto;
    margin-right: auto;
    border: 15px solid white;
    padding: 10px;
    font-size: 10vh;
    color: white;
    opacity: 0.8;
    letter-spacing: 7px;
    text-transform: uppercase;
    position: relative;
    text-align: center;
}
hr {
    width: 50%;
    margin: 20px auto;
}
#about {
    min-height: 100vh;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
    color: #2a4d69;
    padding-top: 50px;
}
#about-header {
    padding: 50px;
}
h1 {
    color: #2a4d69;
    text-transform: uppercase;
}
#Capa_1 {
    fill: #2a4d69;
    height: 150px;
    width: 150px;
    margin-bottom: 20px;
}
#profile-pic {
    height: 145px;
    width: 145px;
    border: 10px solid #999999;
    border-radius: 50%;
    background-image: url("http://www.eurogeosurveys.org/wp-content/uploads/2014/02/default_profile_pic.jpg");
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
#testimonials {
    margin: 0 auto;
    min-height: 100vh;
    text-align: center;
}
#test-heading {
    padding: 20px;
}
.quote {
    position: relative;
    max-width: 700px;
    min-height: 100px;
    padding: 20px 60px;
    margin: 50px auto;
    color: #2a4d69;
    text-align: justify;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .15);
    font-style: italic;
}
.quote:hover {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}
.quote h1 {
    color: #2a4d69;
    text-transform: none;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    position: relative;
}
#gallery {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
    color: #2a4d69;
    padding-bottom: 20px;
    min-height: 100vh;
}
#gallery-header {
    padding: 50px;
}
.image {
    width: 80%;
    display: inline-block;
    overflow: hidden;
    border: 10px solid white;
    border-bottom: 40px solid white;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .15);
    -webkit-filter: grayscale(90%);
}
.image:hover {
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    -webkit-filter: grayscale(0);
    -webkit-transition: all 0.5s ease-in-out;
}
#contact {
    /*min-height: 100vh;*/
    
    margin: 100px auto 50px auto;
    width: 100%;
    text-align: center;
    color: #2a4d69;
    padding: 50px 0;
    background-color: #f0f0f0;
    display: block;
    clear: both;
}
#contact-heading {
    padding-bottom: 10px;
}
#contact ul {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
}
#contact li {
    list-style-type: none;
    display: inline-block;
    padding: 20px;
    text-align: left;
}
#map-canvas {
    height: 500px;
    max-width: 56%;
    margin: 0 auto;
    padding: 0px;
    display: block;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}
footer {
    text-align: left;
    /*height: 75px;*/
    
    background-color: #2a4d69;
    color: white;
    padding: 50px 20px;
    /*display: block;*/
    
    clear: both;
}
button {
    float: right;
    background-color: #fff;
    color: #2a4d69;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
}
svg {
    fill: none;
}
a #facebook:hover,
#twitter:hover,
#googleplus:hover,
#instagram:hover {
    fill: #FA8072;
    cursor: pointer;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}
button:hover {
    background-color: #FA8072;
    color: #fff;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, .75);
    transition: all .25s ease-in-out;
}
@media screen and (max-width: 1000px) {
    #about,
    #testimonials,
    #gallery {
        width: 70%;
    }
    #about h1,
    #testimonials h1,
    #gallery h1,
    #contact h1 {
        margin-bottom: 30px;
    }
    .quote {
        display: block;
    }
}
@media screen and (max-width: 800px) {
    #navicon {
        z-index: 1;
    }
    .banner {
        background-image: none;
        height: auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        font-size: 1em;
    }
    #header-text {
        color: #2a4d69;
        opacity: 1;
        border: none;
        font-size: 4em;
        position: relative;
        margin: 0;
    }
    .nav {
        height: 100%;
    }
    .nav li {
        display: block;
        clear: both;
        text-align: center;
        padding: 50px 0;
        border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    }
}
@media (max-device-width: 480px) {
    #about {
        margin: 0 auto;
        width: 90%;
        letter-spacing: .08em;
        word-spacing: .2em;
    }
    #testimonials {
        margin: 0;
        width: 100%;
        letter-spacing: .08em;
        word-spacing: .2em;
    }
    .quote {
        display: block;
        padding: 10px;
        margin: 5 0;
        text-align: center;
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
        background-color: #f0f0f0;
    }
    .banner {
        background-image: none;
        height: auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        font-size: 3vw;
    }
    #git {
        display: none;
    }
    #header-text {
        color: #2a4d69;
        background-color: white;
        opacity: 1;
        border: none;
        position: relative;
        margin: 0;
    }
    .nav {
        height: 100%;
        margin: 0 auto 0 auto;
    }
    #navicon {
        margin: 0;
        padding: 10ptpx;
    }
    .nav li:first-child {
        display: fixed;
        padding: 0;
        float: right;
        border: none;
    }
    #nav-toggle {
        background-color: salmon;
        color: #fff;
    }
    #gallery {
        width: 100%;
    }
    .image {
        width: 90%;
    }
    #map-canvas {
        max-width: 90%;
        height: 50vh;
    }
}
JS
var main = function() {

    //========== START OF NAVBAR ============//
    $('#navicon').click(function() {
        $('.nav').css({
            'transform': 'translateX(0)'
        });
    });

    $('.nav').click(function() {
        $('.nav').css({
            'transform': 'translateX(-200px)'
        });
    });

    $('#container').click(function() {
        $('.nav').css({
            'transform': 'translateX(-200px)'
        });
        _exit();
    });

    function _exit() {
        $('.nav').css({
            'transform': 'translateX(-200px)'
        });
    };
    //========== END OF NAVBAR ============//

    //========== START OF GMAPS ============//
    /*var map;
    function initialize() {
        var mapOptions = {
            zoom: 12,
            scrollwheel: false,
            center: new google.maps.LatLng(-37.813, 144.963)
        };
        
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);*/

    google.maps.event.addDomListener(window, 'load', init);
    var map;

    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(-37.813, 144.963),
            zoom: 11,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
            },
            disableDoubleClickZoom: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: true,
            panControl: true,
            streetViewControl: true,
            draggable: true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: false,
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#444444"
                }]
            }, {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [{
                    "color": "#f2f2f2"
                }]
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "road",
                "elementType": "all",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 45
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{
                    "visibility": "simplified"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [{
                    "visibility": "simplified"
                }, {
                    "color": "#fa8072"
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{
                    "color": "#2a4d60"
                }, {
                    "visibility": "on"
                }]
            }],
        }
        var mapElement = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapElement, mapOptions);
    }

    //========== END OF GMAPS ============//

    //========== START OF TO-TOP ============//
    $('button').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, "slow");
    });
    //========== END OF TO-TOP ============//


};

$(document).ready(main);
Host Instantly Drag and Drop Website Builder

 

Description

Responsive single page template for with styled gmaps integration.
Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID