element hover effect */
p:hover {
transition: tramsform 1s; /* makes transform last 1 second */
transform: scale(1.01); /* makes paragraph(s) increase in size when hovered */
}
/* center class - this applies to all elements with class "center" */
.center {
text-align: center; /* center aligns the text */
}
/* center class hover effect - only affects the quote, github link, and footer */
.center:hover {
transition: transform 2s; /* makes the transform last 2 seconds */
transform: scale(1.01); /* makes elements with class "center" increase by x when hovered over */
}
/* anchor elements */
a {
color: rgba(142, 142, 144, 0.673); /* ensures all links are the specified color*/
cursor: pointer; /* *add* ensures all links change mouse to a pointer when hovered or clicked */
text-decoration: underline; /* *add* ensures all links are underlined */
}
/* quotation elements */
q {
font-style: italic; /* makes element italicized */
}
/* image elements */
img {
filter: grayscale(75%); /* rids pictures of 75% of their color */
border-radius: 8px; /* all images have x % rounded corners */
max-width: 100%; /* ensures images stay within the width of their container */
max-height: 100%; /* ensures images stay within the width of their container (was - sets heigth of ALL images ( was height: 240px;) */
display: block; /* by specifying display:"block" we ensure images are able to be centered */
margin: auto auto auto auto; /*add ** Centers all images */
/*margin-left: auto; /* in combination with "margin-right: auto" this centers all images */
/*margin-right: auto; */
}
/* image element hover effects */
img:hover {
filter: grayscale(5%); /* brings back most of the images color when hovered over*/
/* transition: transform 2s; /* transition lasts x */
/* transform: scale(1.05); /* image is increased by x when hovered over*/
}
/* the @media rule is used in media queries to apply different styles for different media/types of devices */
/* on screens x (576px in this case) and smaller, the images will be X 100px tall and centered vertically in the column */
/* @media screen and (max-width: 576) {
img {
height: 100px;
margin-top: 150px;
}
} */
/* styling for footer */
footer {
padding: 2%; /*this gives the footer padding that is equal to 2% of the width of the element's area */
background-color: white;
}
.linked a {
max-width: 1px;
max-height: 1px;
}
/* ***END OF GENERAL STYLING*** */
/* *****NAVBAR STYLING****** */
.navbar {
overflow: hidden; /* ensures that any content that overflows beyond the boundary of the navbar is not displayed*/
background-color: rgb(207, 197, 179); /* colors the navbar */
position: fixed; /* keeps navbar at the top of the screen as we scroll*/
top: 0; /* ensures no space is displayed above the navbar */
width: 100%; /* makes the navbar span the entire width of the page */
z-index: 1; /* ensures other elements don't display over the navbar - keeps bar on top of other contenet as we scoll*/
-webkit-animation: movenav 2.5s; /* applies the moveNav animation below for Safari 4.0 - 8.0 */
animation: movenav 2.5s; /* applies the moveNav for all other browsers */
}
/* moveNav animation effect for moving navbar in from the left of the screen */
@keyframes movenav {
from {left: -100vw;} /* the navbar is starting off screen to the left*/
to {left: 0vw;} /* moves the navbar into place on the screen */
}
/* navbar links */
.navbar a {
float: left; /* specifies that the text floats on the left of the navbar */
display: block; /* ensures that other text will be displayed on the same line or row, instead of a new line */
color: white; /* text font color for navbar */
padding: .75vw 1vw; /* ** adds padding around text (was 14px 16px) */
text-decoration: none; /* gets rid of the underlines under our text*/
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.0vw; /* **ADDED ** was 20px */
text-align: center; /* centers the text within its container */
position: relative; /* sets the text relative to its normal positioning, allowing us to use teh animation below */
-webkit-animation: movenavtext 2.5s; /* animation for safari 4.0-8.0 */
animation: movenavtext 2.5s; /* applies the animation for all other browsers */
}
/* moveNavText animation effect for moving the navbar text from above the view to the navbar */
@keyframes movenavtext {
from {top: -100vw;} /* this sets the navbar text 100% above the viewport */
to {top: 0vw;} /* this lowers the navbar text onto the navbar */
}
/* screens 576px and smaller will display navbar links eqqually distributed */
/* @media screen and (max-width: 576) {
.navbar a{
width: 25%; /* this makes each link take up 1/4 of the navbar
font-size: 12px;
}
} */
/* navbar hover effects */
.navbar a:hover {
background-color: rgb(205, 190, 162); /* bg color that displays when you hover over link */
color: rgb(93, 93, 93); /* defines font color displayed when navbar "a" elements are hovered over */
font-weight: bold; /* makes the navbar text bold when hovered over */
cursor: pointer; /* added */
transition: 0.5s ease-in; /* Creates a smooth transition for the hover trigger */
}
/* navbar home button */
.navbar a.active { /* this targets the "a" element on the navbar with the "active" class */
background-color: rgb(188, 188, 188);
}
/* ***End of Navbar Styling*** */
/***** Video Styling *****/
#relax_video {
position: fixed; /* fixes the video to the page */
right: 0; /* ensures there is no space between the edge of the video and the edge of page */
bottom: 0; /* ensures no space between bottom of video and bottom of page */
min-width: 100%; /* ensures video displays across full width of screen page */
z-index: -1; /* places video behind the other elements on the page */
}
/* screens smaller than 576 will not display the background video */
@media screen and (max-width: 576px) {
#relax_video {
display: none;
}
}
/* texts over video */
.video_text {
background: rgba(0, 0, 0, 0.25); /* provides a semi-transparent background for the text to sit over */
color: white; /* font color */
width: 100%; /* ensures the video-text container fills the width of the video */
height: 100vh; /* ADDED** Ensures the video text container fills the height of the viewport so that the slideshow is not partially displayed */
/* padding: 200px; /* adds padding around the video text container (also determines how much video will display)so that the background goes slightly beyond the text */
padding-top: 2vh; /* ADDED ** adds padding around the video-text so that the background goes slightly beyond the text */
position: relative; /* sets the text relative to its normal positioning, allowing us to use the animation below */
-webkit-animation: movevideotext 3.75s;
animation: movevideotext 3.75s;
}
/* this animation effect causes the overlay video text to move up from the bottom of the page upon page load */
@keyframes movevideotext {
from{top: -100vw;} /* sets the position of the video text to above the viewport */
to{top: 0vw;} /* moves the video text to normal positioning on the viewport */
}
/* *****end of video styling***** */
/** Slideshow Styling **/
#Slideshow_Background {
background-color: rgba(255,255,255,0.35); /*creates a slightly transparent white background that's placed over the video in the background*/
}
.slide {
display: none; /* prevents images from being displayed, we will use JS to display these */
}
/* SLideshow section / Container */
#Slideshow_Container {
width: 28vw; /* Relative sizing of the container for the slideshow set to 39.5% of the viewport width */
height: auto; /* height of container is auto adjusted based on the content it is displaying */
padding-top: 4%; /*Adds a small padding to the top of the slideshow container */
position: relative; /* Sets the container relative to its normal positioning */
margin: auto; /*This will horiizontally center the container on the page */
}
/* Remove the underline from the previous and Next buttons on the slideshow */
#Slideshow_Container a {
text-decoration: none;
}
/* Images contained within the Slideshow */
.Slideshow_Images {
vertical-align: middle; /* Centers the images vertically within the slideshow container */
height: auto; /* the Height of the images is auto adjusted based on content, ie if images differ in size, they will display as different sizes */
box-shadow: 0px 5px 10px 12px rgba(0, 0, 0, .75); /* Adds a shadow around the slideshow images */
width: 100%; /* The width of the images is auto adjusted based on content */
}
@media screen
and (min-device-width: 1200px) {
.Slideshow_Images {
height: 650px;
}
}
/* Next and PRevious buttons */
.Previous, .Next {
cursor: pointer; /*Changes the mouse to a pointer when the buttons are selected */
position: absolute; /* Makes the next and previous buttons positioned relative to the ss container */
top: 50%; /* Moves the buttons up in the ss container */
width: auto; /* The width of the buttons is auto adjusted based on content */
padding: 2vw; /* Adds padding equal to 2% of the viewport width */
color: darkgray;
font-weight: bold;
font-size: 1.5vw;
border-radius: 0 3px 3px 0; /* Adds a slightly rounded border on the top and bottom right corners */
user-select: none; /* This property makes it so that the user can't highlight the text */
transition: 0.6s ease; /* Specifies the details of the hover transition for these elements */
}
/* Positioning the Next button to the right hand side */
.Next {
right: 0; /* Moves the Next button to the right side of ss container */
border-radius: 3px 0 0 3px; /* Cnanges the broder radius on the next button to the top and bottom left of the button */
}
/* Hover effect on the Slideshow buttons*/
.Previous:hover, .Next:hover {
background-color: rgba(0, 0, 0, 0.5); /* Makes the BG of the arrows a transparent gray color */
color: white; /* Makes the arrows white when hovered over */
}
/* Slideshow Text */
.text {
color: white;
padding: 1vw;
position: absolute; /* Ensures the text is positioned within the image*/
bottom: 0; /* This property sets the text at the bottom of the image */
width: 100%; /* The element covers the full width of the image */
text-align: center; /* The text is center aligned within the image */
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
letter-spacing: .1vw; /* This gives slight spacing between letters*/
font-size: 1.5vw; /* Font size is relative to the viewport width */
background-color: rgba(0, 0, 0, .75); /* Gives a slightly transparent black background */
font-weight: bold;
border-radius: 0px 0px 7px 7px; /* Gives the text bg rounded corners on the bottom right and left corners */
}
/* Styling the Dots under the Slideshow */
.dot {
cursor: pointer; /* The cursor changes to a pointer when hovered over the dots */
height: 1vw; /* The dots are sized relative to the viewport width */
width: 1vw;
margin: .25vw; /* adds additional spacing between the dots */
background-color: white; /* Makes the dots white*/
border-radius: 50%; /* Makes the dots circles by rounding each corner*/
display: inline-block; /* Allows the dots to sit next to each other rather than on a new line */
transition: background-color 0.6s ease; /* When clicked on, the dots transition to a different color when clicked or hovered over(the affect is defined below)*/
z-index: 1; /* Ensures the dots will be displayed above any other elements */
}
/* Hover effect for slideshow dots */
.active, .dot:hover {
background-color: rgb(88, 81, 81); /* Sets the color of the dots when active or hovered over */
}
/* Fading Animation for Slideshow */
.fade {
animation-name: fade; /* Fade animation is defined below */
animation-duration: 1.5s; /* Animation lasts 1.5s or as defined */
-webkit-animation-name: fade; /* Same as above for Safari 4.0-8.0 */
-webkit-animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4;} /* Image starts transparent */
to {opacity: 1;} /* Image ends opaque */
}
@keyframes fade {
from {opacity: .4;} /* Image starts transparent */
to {opacity: 1;} /* Image ends opaque */
}
/** END Slideshow Styling **/
/* ****table styling****** this section covers the styling of the columns and rows within the table */
* {/* the asterix is a universal selector that applies this effect to all elements on the page */
box-sizing: border-box; /* this creates a box with a border within which we will place most of our text */
}
.column_1 {
float: left;
width: 50%; /* ensures column takes up half of the page width */
padding: 1.6%; /*ADD** was 10px** */
/* padding-top: .05%; /* ensures there is space between top of the column and our headings */
height: 450px; /* (was 300 in my previous version) sets height of the column to xx px - may need to be adjusted depending on the text you enter */
background-color: rgb(232, 227, 218); /* sets background color oof the columns with class "column_1" */
}
/* screeens 576px and smaller will display a scroll bar if the text overflows the column height */
/* @media screen and (max-width: 576px) {
coulmn_1 {
overflow: auto;
}
/* } */
.column_2 {
float: left;
width: 50%;
padding: 1.6%; /*ADD** was 10px** */
/* padding-top: 1.9%; */
height: 450px; /* was 300 in my previous version */
background-color: rgb(209, 206, 199);
}
/* .this class is applied to the columns in the final row, overriding the height and padding
to provide more room for the contact form while keeping the rest of the formatting from
column_1 or _2 */
/* not used in this version
.column_tall {
padding-top: 2.5%;
height: 400px;
} */
/* this inserts something after the content of selected elements (in this case the elements
with class "row" */
.row:after {
content: ""; /* by leaving this blank. we are allowing the footer (covered lower down) to be displayed - removing it makes the footer overwrite a column */
display: table; /* the display property specifies the type of display behavior; the table value tells the browser to treat the element as a table */
clear: both; /* clears any other elements from floating on the left or right of an element */
}
/* ****end of table styling*** */
/* CONTACT FORM V2 STYLING */
/* Button used to open the contact form - fixed at the bottom of the page */
.Pop_Up_Button {
position: fixed; /* THe element iss positioned relative to the viewport and stays in the same location no matter what */
bottom: 1.75vw; /* Positions the button slightly up from the bottom of the viewport(vp) */
right: 1.75vw; /* Positions the button slightly right from the side of the viewport(vp)*/
width: 10vw; /* Sets the width relative to the vp width */
height: 3vw;
padding: 10px;
border-radius: 4px;
background-color: rgb(207, 197, 179, 0.75); /* Sets the bg color of the button to white */
color: white; /* Sets the color of the button text */
border: rgb(207, 197, 179); /* This makes a xx border around the button */
cursor: pointer; /* changes the cursor when hovered over to a pointer */
-webkit-animation: movePopup 3s; /* Animation for 5 seconds for Safari 4.0-8.0 */
animation: movePopup 3s; /* Animation set for 5 seconds */
}
/* movePopup animation moves the button from teh right side of the screen to its fixed location on the viewport */
@keyframes movePopup {
from {right: -40vw;}
to {right: 1.75vw;}
}
@-webkit-keyframes movePopup {
from {right: -40vw;}
to {right: 1.75vw;}
}
/* Styling for the contact from */
.form-popup {
z-index: 8; /* ensures the contact form shows above all other elements on the page */
display: none; /* set display to none, will use JS to show the contact form */
position: fixed; /* The form stays in the same location no matter what */
bottom: .5vw; /* Slightly up from the bottom of the VP */
right: .5vw; /* Slightly in from the right side of the VP */
}
/* Form Styling */
.form-container {
max-width: 27vw; /* Relative sizing of the form container - 49% of the viewport(vp) width */
padding: 1vw; /* Adds padding between the form-popup and the form container*/
background-color: rgb(207, 201, 189);
}
/* Input Fields */
.form-container input[type=text] {
width: 100%; /* THe input boxes completely fill the width of the form container */
padding: .93vw; /* Adds padding the the input boxes */
margin: .6vw 0 .6vw 0; /* Adds spacce between the input boxes and labels */
border: none; /* Removes the border from the input boxes */
background: gainsboro; /* Sets the bg color of the input boxes */
font-size: 1vw; /* Relative font sizing based on the width of the vp */
}
/* General Styling for all buttons */
button {
font-family: 'Trebuchet MS', Optima, Arial, sans-serif;
letter-spacing: .3vw; /* Adds slight spacing between letters */
font-size: 1.5vw; /* Relative sixing of text */
font-weight: bold;
padding: 1.5vw; /* Adds padding to button text */
cursor: pointer; /* Changes cursor to pointer over button elements */
width: 100%; /* Sets the width of the buttons to 100% of their containers */
height: auto; /* Allows the height to be resized depending on the content showing */
}
/* Hover effect for the contact and subnmit buttons */
button:hover, .form-container .btn:hover {
color: white; /* Button text color when hovered over */
background-color: gray; /* THe background of the button changes to black when hovered over */
transition-duration: 1s; /* Transition lasts 1 sec */
-webkit-transition-duration: 1s; /* For Safari 4.0-8.0 */
border-color: silver; /* Border color turns silver when the button is hovered over */
}
/* Submit Button */
.form-container .btn {
background-color: white;
color: gray;
border-color: gray;
margin-bottom: 1vw; /* Adds space between the submit button and the close button */
}
/* Close Button */
.form-container .cancel {
background-color: rgb(23, 22, 22);
color: white;
border-color: gray;
}
/* Styling for Close button on hover */
.form-container .cancel:hover {
color: white;
background-color: gray;
transition-duration: 1s;
-webkit-transition-duration: 1s;
border-color: darkgray;
}
/* END CONTACT FORM V2 STYLING */
/* ***** MEDIA QUERY SECTION ************* */
/* Media rules for paragraph font size for different screen sizes */
@media screen and (max-width: 527px) {
p {
font-size: 3.75vw;
}
}
@media screen and (min-width: 528px) and (max-width: 660px) {
p {
font-size: 3.5vw;
}
}
@media screen and (min-width: 661px) and (max-width: 799px) {
p {
font-size: 2.75vw;
}
}
@media screen and (min-width: 800px) and (max-width: 924px) {
p {
font-size: 2.5vw;
}
}
@media screen and (min-width: 925px) and (max-width: 1050px) {
p {
font-size: 2.25vw;
}
}
@media screen and (min-width: 1051px) and (max-width: 1310px) {
p {
font-size: 2vw;
}
}
@media screen and (min-width: 1311px) and (max-width: 1535px) {
p {
font-size: 1.75vw;
}
}
@media screen and (min-width: 1536px) and (max-width: 2269px) {
p {
font-size: 1.5vw;
}
}
@media screen and (min-width: 2270px) {
p {
font-size: 1.35vw;
}
}
/* Media Rule for Navbar links for different screen sizes*/
/* Screens 1080px and smaller will display navbar links equally distributed */
@media screen and (max-width: 1080px) {
.navbar a{
width:20%; /* This sets each navbar link to 1/5th of the navbar */
font-size: 2.5vw;
}
}
/* Media rules to enlarge the font of the white text for smaller screens */
@media screen and (max-width: 1080px) {
.quote{
font-size: 3.5vw;
}
.white_text {
font-size: 4.5vw;
}
}
/* Media Rules to increase the size of the columns for larger screens */
@media screen and (min-width: 1725px) {
.column_1 {
height: 550px;
}
.column_2 {
height: 550px;
}
}
/* Media Rule to remove margin-top from h1 elements for extra large screens (so that the paragraph text fits in the column */
@media screen and (max-width: 1080px) {
h1 {
margin-top: 0;
}
}
/* END MEDIA QUERY SECTION */