Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- /* body styling code */
- margin: 0;
- background-color: #FCFCFC;
- background-image: '';
- background-repeat: no-repeat;
- background-position: 0px 85px;
- background-attachment: '';
- background-size: cover;
- font-family: "operetta 8", serif;
- font-weight: 300;
- font-style: normal;
- }
- .container {
- /* class for logo and text/links in navigation bar */
- width: 90%;
- margin: 0 auto;
- }
- .headerLogo {
- /* class for logo in navigation bar */
- /* floating logo to the left */
- /* full canvas photo is 2057px wide & 643px in height */
- float: left;
- padding: 10px 0;
- /* gives a little space on top and bottom of the logo */
- width: 164.56px;
- /* 8% of the full size (2057px) */
- height: 51.44px;
- /* 8% of the full size (643px) */
- }
- header {
- background: #E9E9E9;
- opacity: 1;
- }
- header::after {
- /* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
- content: '';
- display: table;
- clear: both;
- }
- nav {
- /* floating list (menu) items to the right */
- float: right;
- }
- nav ul {
- margin: 0;
- /* takes space off top and bottom header background */
- padding: 0;
- /* takes space off the sides */
- list-style: none;
- /* removes bullet point styling */
- }
- nav li {
- display: inline-block;
- /* places list horizontal, not vertical */
- margin-left: 30px;
- /* specifies the spacd between the list items */
- padding-top: 25px;
- /* not required - used for the hover effect for this particular nav bar */
- position: relative;
- /* allows the nav a::before to keep the hover line relative to the text length */
- }
- nav ul li a {
- color: #7F7887;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 17px;
- }
- nav ul li a:hover {
- color: #3f003c;
- }
- nav ul li a::before {
- content: '';
- display: block;
- height: 2px;
- width: 100%;
- background-color: #3f003c;
- position: absolute;
- /* absolute width 100% shoots this to 100% of the screen size (they run together) */
- top: 0;
- width: 0%;
- -webkit-transition: all ease-in-out 250ms;
- transition: all ease-in-out 250ms;
- /* slows down the way the hover bar appears */
- }
- nav ul li a:hover::before {
- width: 100%;
- }
- a {
- text-decoration: none;
- }
- .burger {
- display: none;
- cursor: pointer;
- display: static;
- z-index: 200;
- }
- .burger div {
- width: 25px;
- height: 3px;
- background-color: #3f003c;
- margin: 5px;
- -webkit-transition: all 0.5s ease;
- transition: all 0.5s ease;
- /* adds transition to Burger turning into an X */
- }
- .mainLogo {
- /* class for logo/image on index page */
- width: 75%;
- height: 60%;
- opacity: 0.9;
- }
- .mainLogoDiv {
- /* class for the div containing the logo/image on index page */
- text-align: center;
- }
- .section {
- max-width: 1920px;
- margin: 0 auto;
- padding: 1% 2%;
- }
- .grid {
- margin: 20px 0 0 0;
- padding: 0;
- list-style: none;
- display: block;
- text-align: center;
- width: 100%;
- }
- .grid:after {
- clear: both;
- }
- .grid:after, .grid:before {
- content: '';
- display: table;
- }
- .grid li {
- width: 200px;
- height: 200px;
- display: inline-block;
- margin: 20px;
- }
- .box {
- width: 100%;
- height: 100%;
- position: relative;
- cursor: pointer;
- border-radius: 5px;
- -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3 ease-in-out;
- -webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
- transition: 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
- transition: 0.3s ease-in-out, transform 0.3s ease-in-out;
- transition: 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
- }
- .box:hover {
- -webkit-transform: scale(1.05);
- transform: scale(1.05);
- }
- .p-cov1 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/mj-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/mj-cover.jpg);
- }
- .p-cov2 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/lp-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/lp-cover.jpg);
- }
- .p-cov3 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/pp-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/pp-cover.jpg);
- }
- .p-cov4 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/la-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/la-cover.jpg);
- }
- .p-cov5 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/an-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/an-cover.jpg);
- }
- .p-cov6 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/photography/covers/se-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/photography/covers/se-cover.jpg);
- }
- .g-cov1 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/graphic/covers/dc-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/graphic/covers/dc-cover.jpg);
- }
- .g-cov2 {
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(65, 41, 63, 0.75)), to(rgba(65, 41, 63, 0.75))), url(photos/graphic/covers/ww-cover.jpg);
- background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)), url(photos/graphic/covers/ww-cover.jpg);
- }
- .info {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- .info h3 {
- font-family: "Operetta 8", serif;
- font-weight: 400;
- color: #e0e0e0;
- text-shadow: 1px 1px black;
- font-size: 20px;
- margin: 0 auto;
- padding: 85px 0px 0 0px;
- text-align: center;
- text-transform: uppercase;
- width: 100%;
- }
- .photoGrid {
- display: -ms-grid;
- display: grid;
- -ms-grid-columns: (minMax(250px, 1fr))[auto-fit];
- grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
- grid-gap: 5px 5px;
- width: 90%;
- margin: auto;
- }
- .photoColumn {
- display: block;
- }
- .contact {
- margin: 0 auto;
- }
- .contact-me {
- text-align: center;
- }
- .contact-me img {
- width: 60%;
- max-width: 450px;
- padding: 10px 0 20px 0;
- }
- form {
- text-align: left;
- font-size: 13.5px;
- padding: 0px 20px 20px 20px;
- /* gives space on all text contained within border */
- margin: 0 auto;
- line-height: 30px;
- height: 80%;
- width: 70%;
- max-width: 500px;
- overflow: auto;
- text-transform: uppercase;
- color: #3f003c;
- }
- input[type=submit] {
- background-color: #3f003c;
- color: #E9E9E9;
- border-radius: 5px;
- height: 35px;
- width: 100px;
- font-size: 15px;
- text-transform: uppercase;
- }
- /* the below syntax removes the blue border in the input boxes when selected */
- input:focus, textarea:focus, select:focus {
- outline-offset: 0px !important;
- outline: none !important;
- }
- /* the two syntaxes below change the color of highlighted text */
- ::-moz-selection {
- background: #E9E9E9;
- /* WebKit/Blink Browsers */
- }
- ::selection {
- background: #E9E9E9;
- /* WebKit/Blink Browsers */
- }
- ::-moz-selection {
- background: #E9E9E9;
- /* Gecko Browsers */
- }
- /* the below set of syntaxes removes the background color when autofill is used */
- input:-webkit-autofill,
- input:-webkit-autofill:hover,
- input:-webkit-autofill:focus,
- input:-webkit-autofill:active {
- -webkit-transition: background-color 5000s ease-in-out 0s;
- transition: background-color 5000s ease-in-out 0s;
- -webkit-box-shadow: 0 0 0px 1000px #fff inset;
- }
- #name {
- height: 30px;
- width: 100%;
- }
- #email {
- height: 30px;
- width: 100%;
- }
- #extra {
- height: 60px;
- width: 100%;
- }
- footer {
- color: #7F7887;
- text-align: center;
- text-decoration: none;
- }
- .fbIcon {
- /* class for the facebook icon in the footer */
- padding: 0 2px 8px 0;
- width: 25px;
- height: 25px;
- opacity: .7;
- }
- .instaIcon {
- /* class for the instagram icon in the footer */
- padding: 0 0 8px 0;
- width: 25px;
- height: 25px;
- opacity: 0.7;
- }
- @media screen and (max-width: 952px) {
- html, body {
- overflow-x: hidden;
- width: 100%;
- position: absolute;
- }
- nav li {
- margin-left: 0px;
- }
- .nav-links {
- position: absolute;
- right: 0px;
- height: 100%;
- top: 70px;
- background-color: #E9E9E9;
- opacity: .95;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- width: 35%;
- -webkit-transform: translateX(100%);
- transform: translateX(100%);
- -webkit-transition: -webkit-transform 0.5s ease-in;
- transition: -webkit-transform 0.5s ease-in;
- transition: transform 0.5s ease-in;
- transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
- z-index: 100;
- }
- .nav-links li {
- opacity: 0;
- padding: 45px 0px 0px 0px;
- }
- .nav-links li a {
- color: #7F7887;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 14px;
- }
- .nav-links li a:hover {
- color: #3f003c;
- }
- nav ul li a::before {
- display: none;
- }
- .burger {
- display: block;
- padding: 20px;
- z-index: 150;
- position: static;
- }
- }
- .nav-active {
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- @-webkit-keyframes navLinkFade {
- from {
- opacity: 0;
- -webkit-transform: translateX(50px);
- transform: translateX(50px);
- }
- to {
- opacity: 1;
- -webkit-transform: translateX(0px);
- transform: translateX(0px);
- }
- }
- @keyframes navLinkFade {
- from {
- opacity: 0;
- -webkit-transform: translateX(50px);
- transform: translateX(50px);
- }
- to {
- opacity: 1;
- -webkit-transform: translateX(0px);
- transform: translateX(0px);
- }
- }
- /* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
- /* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
- .toggle .line1 {
- -webkit-transform: rotate(-45deg) translate(-5px, 6px);
- transform: rotate(-45deg) translate(-5px, 6px);
- }
- /* this takes the middle hamburger line and turns it to 0 opacity */
- .toggle .line2 {
- opacity: 0;
- }
- /* this takes the bottom hamnburger line and turns it 45 degrees to form the second part of the X */
- .toggle .line3 {
- -webkit-transform: rotate(45deg) translate(-5px, -6px);
- transform: rotate(45deg) translate(-5px, -6px);
- }
- /*# sourceMappingURL=style.css.map */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement