/*** Universal Properties (applies to all pages) ***/ body { /* Set dimensions to full height and width */ width: 100%; height: 100%; background: black; } html { /* Set dimensions to full height and width */ width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { /* Set heading styles */ margin: 0 0 35px; text-transform: uppercase; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } p { /* Set text styles */ font-family: 'Droid Serif', Helvetica, Arial,sans-serif; margin: 0 0 25px; font-size: 18px; line-height: 1.5; } /****** Navigation bar ******/ .navbar { /* Set navbar dimensions and text styles */ margin-bottom: 0; font-size: 12px; padding: 10px; font-family: 'Montserrat', Helvetica, Arial, sans-serif; } .navbar-nav li a:hover { /* Set transition effects on navbar links */ color: gray; /* Multiple browser support for transitions */ -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; } .navbar-inverse { /* Changes colour of the navigation bar */ border: 0; background: black; } .navbar-brand { /* Change navbar branding style */ font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 13px; } @media (min-width: 768px) { /* When screen size width is larger than 768px, display the navbar brand heading to appropriate size*/ .navbar-brand { font-size: 25px; } } .navbar-inverse .navbar-nav li a { /* Changes the text of the navigation links */ color: white; font-size: 16px; } .navbar-inverse .navbar-nav li a:hover { /* Change color of text on hover */ color: #d9d9d9; } .navbar-inverse .navbar-nav .dropdown-menu li a:hover { /* Sets colour of background when hovered over the dropdown menu links */ background: white; color: black; } .dropdown-menu { background: black; border-radius: 0; border-bottom: transparent; } /*** Home ***/ .intro { /* Home page image dimensions */ display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: white; background: url('../images/original/homeimage.jpg') no-repeat bottom center scroll; /* Displays image only one, centred and bottom of the table and scrolls together with the rest of the page */ background-color: black; /* Make image cover the whole width of the browser window. Support for different browsers */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .work-banner { /* Home page title banner styles and dimensions */ display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: white; background: url('../images/original/work-banner-v2.jpg') no-repeat bottom center scroll; background-color: black; /* Make image cover the whole width of the browser window. Support for different browsers */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .intro .intro-body { display: table-cell; /* Creates a cell within the table set in .intro, showing text in the centre of the image */ vertical-align: middle; /* Display text center of table-cell */ } .intro .intro-body .brand-heading { /* Change size of the large heading on the home page */ font-size: 40px; } .intro .intro-body .intro-text { /* Change size of the subtext under the large heading on the home page */ font-size: 18px; } @media (min-width: 768px) { /* When screen size width is larger than 768px, display the text larger than usual */ .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 100px; } .intro .intro-body .intro-text { font-size: 26px; } } /*** About ***/ #about { /* Set dimensions of about section */ background-color: black; padding: 150px 0 150px 0px; color: white; } /*** Photography ***/ #portfolio { /* Set dimensions */ padding: 25px 0px 50px 0px; } .portfolio-item { /* Spacing between portfolio images */ padding: 10px; } @media (min-width: 992px){ /* Keeps .col of images inline, clears random missing spacing that may occur */ .col-md-4:nth-of-type(3n+1){ clear: both; } } .handler { /* An adjustable div that adjusts to the number of images displayed */ padding-top: 25px; } .controls { /* Display the buttons in the middle of the container with spacing */ text-align: center; margin: 10px 0 10px 0px; } .portfolio-item:hover { /* Set look of images when cursor is hovering over */ -webkit-transition: all 0.2s ease-in-out; /* Chrome, Safari browser support */ -moz-transition: all 0.2s ease-in-out; /* Mozilla Firefox browser support */ -o-transition: all 0.2s ease-in-out; /* Opera browser support */ opacity: 0.7; } /*** Contact ***/ #contact { /* Set background div dimensions, text and background style */ background: black; color: white; padding: 80px 0px 80px 0px; } @media (min-width: 768px){ /* Change padding spacing from navbar and bottom div when larger than tablet size */ #contact { padding: 275px 0px 275px 0px; } } .btn { /* General button animations and look */ text-transform: uppercase; /* Make all text in buttons uppercase */ font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Add transition effects when the mouse is hovering over the button and off (slow start and end) */ -webkit-transition: all 0.2s ease-in-out; /* Chrome, Safari browser support */ -moz-transition: all 0.2s ease-in-out; /* Mozilla Firefox browser support */ -o-transition: all 0.2s ease-in-out; /* Opera browser support */ border-radius: 0; /* No rounded corners around border */ margin: 5px 0px 5px 0px; /* Add spacing from top and bottom */ } .btn-default { /* Set initial look of button */ border: 1px solid #48d9ab; color: #48d9ab; background-color: transparent; } .btn-default:hover { /* Set look of button when cursor is hovering over */ border: 1px solid #48d9ab; background-color: #48d9ab; color: black; } /*** Footer ****/ .bg-4 { /* Set footer dimenions and styles */ background: white; margin: 0 auto; height: auto; padding: 50px 0px 50px 0px; } .footer-links a { /* Set initial colour of footer icons */ color: gray; } .footer-links li { /* Set footer icons in line and center */ text-align: center; font-size: 50px; list-style-type: none; display: inline-block; } .footer-links a:hover { /* Set look of icons when cursor is hovering over */ -webkit-transition: all 0.2s ease-in-out; /* Chrome, Safari browser support */ -moz-transition: all 0.2s ease-in-out; /* Mozilla Firefox browser support */ -o-transition: all 0.2s ease-in-out; /* Opera browser support */ color: #d9d9d9; }