Batuhan-s-Bikes-Website/css/styles.css

245 lines
3.5 KiB
CSS
Raw Normal View History

2021-02-27 19:02:41 +00:00
body {
2021-02-27 21:05:48 +00:00
font-family: 'Montserrat', sans-serif;
text-align: center;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Headings */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
.big-heading {
2021-02-27 21:05:48 +00:00
font-family: 'Montserrat-Black';
font-size: 3.5rem;
line-height: 1.5;
}
.big-heading-2 {
font-family: 'Montserrat-Black';
font-size: 2.0rem;
line-height: 1.5;
padding-top: 80px;
2021-02-27 19:02:41 +00:00
}
.container-fluid {
2021-02-27 21:05:48 +00:00
padding: 7% 15%;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Sections */
2021-02-27 21:05:48 +00:00
.colored-section#title {
background-image: url("images/biking.jpg");
}
2021-02-27 19:02:41 +00:00
.colored-section {
2021-02-28 21:33:00 +00:00
background-color: #a77a32;
color: #ffffff;
}
.colored-section2 {
background-color: #34626c;
color: #ffffff;
}
.colored-section3 {
background-color: #cfd3ce;
2021-02-27 21:05:48 +00:00
color: #ffffff;
2021-02-27 19:02:41 +00:00
}
.white-section {
2021-02-27 21:05:48 +00:00
background-color: #ffffff;
2021-02-27 19:02:41 +00:00
}
h1,
h2,
h3,
h4,
h5,
h6 {
2021-02-27 21:05:48 +00:00
font-family: 'Montserrat-Bold';
2021-02-27 19:02:41 +00:00
}
h3 {
2021-02-27 21:05:48 +00:00
font-size: 1.5rem;
2021-02-27 19:02:41 +00:00
}
p {
2021-02-27 21:05:48 +00:00
color: #8f8f8f;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* navigation bar */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
.navbar {
2021-02-27 21:05:48 +00:00
padding: 0 0 4.5rem;
2021-02-27 19:02:41 +00:00
}
.section-heading {
2021-02-27 21:05:48 +00:00
font-size: 3rem;
line-height: 1.5;
2021-02-27 19:02:41 +00:00
}
.navbar-brand {
2021-02-27 21:05:48 +00:00
font-family: 'Ubuntu', sans-serif;
font-size: 2.5rem;
font-weight: bold;
2021-02-27 19:02:41 +00:00
}
.navbar-item {
2021-02-27 21:05:48 +00:00
padding: 0px 18px;
2021-02-27 19:02:41 +00:00
}
.navbar-link {
2021-02-27 21:05:48 +00:00
font-size: 1.2rem;
font-family: 'Montserrat-light', sans-serif;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Download Buttons */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
.download-btn {
2021-02-27 21:05:48 +00:00
margin: 5% 3% 5% 0;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Title Section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
#title .container-fluid {
2021-02-27 21:05:48 +00:00
padding: 3% 15% 7%;
text-align: left;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Title Image */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
.title-image {
2021-02-27 23:23:42 +00:00
width: 100%;
position: right;
2021-02-27 21:05:48 +00:00
right: 30%;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Features section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
#features {
2021-02-27 21:05:48 +00:00
position: relative;
z-index: 1;
2021-02-27 19:02:41 +00:00
}
.feature-title {
2021-02-27 21:05:48 +00:00
font-size: 1.5rem;
2021-02-27 19:02:41 +00:00
}
.feature-box {
2021-02-27 21:05:48 +00:00
padding: 4%;
2021-02-27 19:02:41 +00:00
}
.feature-icon {
2021-02-28 21:33:00 +00:00
color: #34626c;
2021-02-27 21:05:48 +00:00
margin-bottom: 1rem;
2021-02-27 19:02:41 +00:00
}
.feature-icon:hover {
2021-02-28 21:33:00 +00:00
color: #839b97;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* testimonial section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
#testimonials {
2021-02-27 21:05:48 +00:00
background-color: #ef8172;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
.testimonial-text {
2021-02-27 21:05:48 +00:00
font-size: 3rem;
line-height: 1.5;
2021-02-27 19:02:41 +00:00
}
.testimonial-img {
2021-02-27 21:05:48 +00:00
width: 10%;
border-radius: 100%;
margin: 20px;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
.carousel-item {}
2021-02-27 19:02:41 +00:00
/* Press section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
#press {
2021-02-28 21:33:00 +00:00
background-color: #81ef72;
2021-02-27 21:05:48 +00:00
padding-bottom: 3%;
2021-02-27 19:02:41 +00:00
}
.press-img {
2021-02-27 21:05:48 +00:00
width: 15%;
margin: 20px 20px 50px;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Pricing Section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
#pricing {
2021-02-27 21:05:48 +00:00
padding: 100px;
2021-02-27 19:02:41 +00:00
}
.price-text {
2021-02-27 21:05:48 +00:00
font-size: 3rem;
line-height: 1.5;
2021-02-27 19:02:41 +00:00
}
.pricing-col {
2021-02-27 21:05:48 +00:00
padding: 3% 2%;
2021-02-27 19:02:41 +00:00
}
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* CTA Section */
2021-02-27 21:05:48 +00:00
2021-02-27 19:02:41 +00:00
/* Footer section */
2021-02-27 21:05:48 +00:00
#footer {}
2021-02-27 19:02:41 +00:00
.social-icon {
2021-02-27 21:05:48 +00:00
margin: 20px 10px;
2021-02-27 19:02:41 +00:00
}
@media (max-width: 1028px) {
2021-02-27 21:05:48 +00:00
#title {
text-align: center;
}
.title-image {
position: static;
transform: rotate(0);
}
}
.colored-section#title {
background-image: url("images/biking.jpg");
2021-02-27 23:23:42 +00:00
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #d60024;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #fa4664;
}