html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
body {
width: auto;
height: auto;
/* font-size: 18px; */
font-family: "Noto Sans";
}
#red-text {
color: #ff5a6e;
}
#title-text-separator {
width: 5%;
margin-top: 1%;
border: solid 1px #ff5a6e;
}
.responsive-menu-link {
color: black;
}
.tel, .email {
position: relative;
top: -20px;
}
/* ----- General Header CSS ------ */
#header {
position: fixed;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
/* Normal Header */
.active-header {
background-color: white;
color: black;
}
.menu-link {
color: white;
}
.active-menu-links {
color: black;
}
#normal-header {
position: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
#header-img {
width: 250px;
margin-left: 15%;
}
#nav-bar {
}
#nav-bar ul {
list-style: none;
display: flex;
flex-flow: row;
}
#nav-bar li {
padding: 10px;
margin: 12px;
}
#nav-bar ul, a {
text-decoration: none;
}
/* Responsive Header */
#responsive-header {
display: none;
}
#image-button-black {
display: none;
border: none;
}
#image-button-black:hover {
cursor: pointer;
}
#image-button-black:focus {
outline: 0;
}
/* ----- Hero Header CSS -----
Tags included:
1. hero-header - main container of the Hero
2. hero-content - the container of the title and description within the hero Section
3. hero-title - the title within the hero section
4. hero-text - the text within the hero section
5. hero-button - the button within the hero section
*/
#hero-header {
/* width: 100vw; */
height: 100vh;
box-shadow: 3px 3px 2px #bebebe;
/* hero-header flexbox */
display: flex;
justify-content: center;
align-items: center;
/* Texy style */
text-align: center;
color: white;
/* Background image */
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../img/header-img.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#hero-title {
font-size: 3.5em;
}
#hero-text {
font-size: 1.3em;
margin-top: 2%;
}
#hero-button {
border: solid 2px white;
background-color: inherit;
color: white;
margin-top: 6%;
width: 25%;
height: 55px;
font-size: 15px;
border-radius: 10px;
}
#hero-button:hover {
cursor: pointer;
}
/* ----- Main Content CSS -----
Tags included:
1. parcours - the main container wrapping the "features" elements
2. features-description - container wrapping the title and the description
3. features-title - the main title of the Features
4. features-separator - the line that separates the title from the Description
5. features-text - the main describing the features and services
6. service-features - container wrapping all 4 services
7. feature - the common id applied to the container of all the 4 services
8. feature img - the styling of each image belonging to each feature
9. feature-title - the common id applied to the title of each feature
10. feature p - the styling of each paragraph belonging to each feature
11. feature-button - the common id applied to the button of each feature
12. feature-button:hover - the ":hover" styling of each button
*/
#parcours {
box-shadow: 2px 2px 15px #bebebe;
margin-top: 5%;
padding: 2%;
}
#service-features {
display: flex;
flex-direction: row;
/* Change flow-direction to "column" in the responsive design for the features to stack
one on top of another. */
justify-content: space-around;
margin-top: 2%;
padding-bottom: 3%;
}
#features-description {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
margin-top: 2%;
padding: 1%;
display: flex;
width: 60%;
}
#features-description h1 {
font-size: 45px;
}
#features-description p {
padding: 1%;
margin-top: 1%;
}
#feature {
width: 20%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 1px #bebebe;
box-shadow: 1px 2px 15px #bebebe;
}
#feature img {
max-width: 30%;
max-height: 30%;
padding-top: 5%;
}
#feature-title {
margin-top: 5%;
}
#feature p {
width: 70%;
margin-top: 5%;
text-align:left;
}
#feature-button {
border: none;
margin-top: 30%;
width: 12vh;
height: 5vh;
border-radius: 15px;
background-color: #ff5a6e;
color: white;
font-size: 16px;
margin-bottom: 20%;
}
#feature-button:hover {
background-color: #ff7b8b;
cursor: pointer;
}
/* ----- Product Presentation CSS -----
CSS for the section of the website that features each "product" available.
Tags included:
1. #competences - the general container where everything is
2. #presentation-title-description - the container in which the title and the description are
3. #presentation-title - the main title of the section
4. #presentation-separator - the CSS for the separator between the main title and the description
5. #presentation-description - the main description of the section
6. #section-buttons - the div containing the main product buttons
7. .product-buttons - the general class used to style the buttons
8. .product-button:hover - the CSS that changes the style of a button when hoevered
9. .product-button:focus - the CSS that removes the outlife of the buttons when clicked
10. .product-button-active - the CSS for the class that is added with jQuery to buttons when sections appear/disappear
11. #section-content-container - the main container containing all the subsections
12. .product-content - a general class applying some CSS to each subsection container
13. #content-image - general id used to apply CSS to each image in the subsections
14. #content-image-container - general id used to apply CSS to each div containing the main image of each subsection
15. #content-title-text - general ID used to style the div containing each subsection's title and description
16. #content-title-text p - selector used to add a little distance between the paragraph and the title
17. .product-features-list - a general class used to style the feature list of each subsection
18. #first-feature-list - a unique ID used to stylize only the first container with that ID.
19. #product-feature-image - genral ID used to style the container of each product image1
20. #correct-icon - general id of all the images used to replace UL bulletpoints in the "list" with features of each product
21. #inside-features-title-text - general ID of the features of the products within each subsection
22. #content-button - general ID of each button inside each product subsection
23. #content-button:hover - general ID of the hover styling of each button inside the products subsection
*/
#competences {
display: flex;
flex-flow: column;
}
#presentation-title-description {
display: flex;
flex-flow: column;
align-items: center;
margin: auto;
text-align: center;
margin-top: 5%;
width: 60%;
}
#presentation-title-description h1 {
font-size: 45px;
}
#presentation-title-description p {
margin-top: 1%;
}
#section-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product-button {
border: none;
border-radius: 10px;
background-color: inherit;
box-shadow: 1px 2px 15px #bebebe;
padding: 15px;
width: 10%;
margin: 2%;
font-size: 15px;
}
.product-button:hover {
cursor: pointer;
}
.product-button:focus {
outline: 0;
}
.product-button-active {
background-color: #ff5a6e;
color: white;
}
/* -- SUBSECTION CSS: Section Content CSS -- */
#section-content-container {
margin: auto;
width: 75%;
}
.product-content {
display: flex;
flex-flow: row;
justify-content: center;
padding: 2%;
}
#content-image {
width: 100%;
height: 100%;
width: 70%;
height: auto;
}
#content-image-container {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
#content-title-text {
display: flex;
flex-flow: column;
justify-content: flex-start;
width: 50%;
padding: 1%;
}
#content-title-text p {
margin-top: 2%;
}
.product-features-list {
display: flex;
flex-flow: row;
align-items: flex-start;
margin-top: 5%;
}
#first-feature-list {
margin-top: 0;
}
#product-feature-image {
justify-content: flex-start;
align-items: flex-start;
width: 10%;
}
#correct-icon {
width: 100%;
height: 100%;
}
#inside-features-title-text {
display: flex;
flex-flow: column;
margin-left: 2%;
}
#content-button {
border: none;
border-radius: 10px;
background-color: #ff5a6e;
box-shadow: 1px 2px 15px #bebebe;
padding: 15px;
width: 25%;
margin-top: 6%;
font-size: 16px;
color: white;
}
#content-button:hover {
cursor: pointer;
background-color: #ff7b8b;
}
/* Media - Video Section CSS
Tags included:
1. #main-media-container - main container where all the elements in the section architecto
2. #media-title-description - id of the container with the title and description
3. #media-separator - separator between title and description
4. #media-title-description p - styling applied only to the main description
5. #media-video-text-container - general container keeping the title, description and video
6. #media-text - id of the container with the title and description at the left of the Video
7. #media-text h2 - styling of the h2 within the media-text container
8. #media-text p - styling of the p within the media-text container
9. #text-video-separator - separator between the text and the Video
10. #media-button - the button bellow the text at the left of the video
11. #media-button:hover - styling of the hover state of the button
12. media-video -container with the video
13. iframe-video - the iframe tag containing the YouTube video
*/
#main-media-container {
box-shadow: 2px 2px 15px #bebebe;
display: flex;
flex-flow: column;
align-items: center;
}
#media-title-description {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 4%;
width: 90%;
}
#media-title-description h1 {
font-size: 45px;
}
#media-title-description p {
margin-top: 1%;
}
#media-video-text-container {
display: flex;
flex-wrap: wrap;
flex-flow: row;
justify-content: space-around;
align-items: center;
width: 75%;
padding: 3% 2% 3% 2%;
/* background-color: #f5f5f5; */
border-radius: 10px;
}
#media-text {
display: flex;
flex-flow: column;
align-items: flex-start;
width: 40%;
height: auto;
}
#media-text h2 {
font-size: 30px;
}
#media-text p {
font-size: 17px;
margin-top: 3%;
}
#text-video-sperator {
height: 20vh;
border: solid 0.5px #e1e1e1;
}
#media-button {
border: solid 1px #c1c1c1;
border-radius: 10px;
background-color: inherit;
box-shadow: 1px 2px 2px #bebebe;
padding: 15px;
width: 25%;
margin-top: 5%;
font-size: 15px;
color: black;
}
#media-button:hover {
cursor: pointer;
background-color: white;
background-color: #ff5a6e;
color: white;
}
#media-video {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
#video {
width: 60vh;
height: 35vh;
}
/* Prices Section CSS
Tags Included:
1. #contact - main container of the price section
2. #prices-title-description - container where the title and description are
3. #prices-title-description h1 - main title of the "Prices" section
4. #prices-separator - Separator between title and description
5. #prices-title-description p - main description of the "Prices" section
6. #all-prices-container - container where all the divs with prices are
7. .price-container - common class used to style the containers of each price
8. .price-container h1 - title of each price (starter/premium/professional)
9. .price-container h2 - subtitle of each price ($55/$85/$120)
10. .price-container p - monthly payment text style
11. .price-container hr - prices separator style
12. .price-container ul - the list with features of each price
13. .price-container li - each individual item on the list with features for each price
14. .price-container button - style of each button of each price section
15. .price-container button:hover - the hover state of each button of each price
16. #price-container-two - the price container in the middle, placed a little higher than the others
*/
#contact {
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
margin: auto;
margin-top: 3%;
}
#prices-title-description {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
text-align: center;
width: 60%;
}
#prices-title-description h1 {
font-size: 45px;
}
#prices-separator {
width: 5%;
margin-top: 2%;
border: solid 1px #ff5a63;
}
#prices-title-description p {
margin-top: 1%;
}
#all-prices-container {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
width: 90%;
}
.price-container {
box-shadow: 2px 2px 15px #bebebe;
text-align: center;
margin-top: 7%;
width: 27%;
}
.price-container h1 {
color: #ff5a63;
font-size: 45px;
margin-top: 6%;
}
.price-container h2 {
color: #323a45;
font-size: 40px;
margin-top: 4%;
}
.price-container p {
margin-top: 4%;
font-size: 17px;
}
.price-container hr{
margin: auto;
margin-top: 4%;
margin-bottom: 4%;
width: 70%;
border: solid 0.5px #c1c1c1;
}
.price-container ul {
list-style: none;
}
.price-container li {
padding: 3%;
}
.price-container button {
border: none;
border-radius: 10px;
background-color: #ff5a6e;
box-shadow: 1px 2px 15px #bebebe;
padding: 15px;
width: 30%;
margin-top: 6%;
font-size: 16px;
color: white;
margin-bottom: 6%;
}
.price-container button:hover {
cursor: pointer;
background-color: #ff7b8b;
}
#price-container-two {
margin-top: 4%;
}
/* Newsletter Section CSS
Tags included:
1. #newsletter-container - main newsletter section container
2. #newsletter-title-description - container with the main title and description
3. #newsletter-title-description h1 - styling for the main title
4. #newsletter-input-container - container with the form and input elements
5. #email-form - the id given to the