Batuhan-s-Bikes-Website/css/styles.css
2021-02-27 16:05:48 -05:00

209 lines
No EOL
2.4 KiB
CSS

body {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
/* Headings */
.big-heading {
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;
}
.container-fluid {
padding: 7% 15%;
}
/* Sections */
.colored-section#title {
background-image: url("images/biking.jpg");
}
.colored-section {
background-color: #ff4c68;
color: #ffffff;
}
.white-section {
background-color: #ffffff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat-Bold';
}
h3 {
font-size: 1.5rem;
}
p {
color: #8f8f8f;
}
/* navigation bar */
.navbar {
padding: 0 0 4.5rem;
}
.section-heading {
font-size: 3rem;
line-height: 1.5;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
font-size: 2.5rem;
font-weight: bold;
}
.navbar-item {
padding: 0px 18px;
}
.navbar-link {
font-size: 1.2rem;
font-family: 'Montserrat-light', sans-serif;
}
/* Download Buttons */
.download-btn {
margin: 5% 3% 5% 0;
}
/* Title Section */
#title .container-fluid {
padding: 3% 15% 7%;
text-align: left;
}
/* Title Image */
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
/* Features section */
#features {
position: relative;
z-index: 1;
}
.feature-title {
font-size: 1.5rem;
}
.feature-box {
padding: 4%;
}
.feature-icon {
color: #ef8172;
margin-bottom: 1rem;
}
.feature-icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
background-color: #ef8172;
}
.testimonial-text {
font-size: 3rem;
line-height: 1.5;
}
.testimonial-img {
width: 10%;
border-radius: 100%;
margin: 20px;
}
.carousel-item {}
/* Press section */
#press {
background-color: #ef8172;
padding-bottom: 3%;
}
.press-img {
width: 15%;
margin: 20px 20px 50px;
}
/* Pricing Section */
#pricing {
padding: 100px;
}
.price-text {
font-size: 3rem;
line-height: 1.5;
}
.pricing-col {
padding: 3% 2%;
}
/* CTA Section */
/* Footer section */
#footer {}
.social-icon {
margin: 20px 10px;
}
@media (max-width: 1028px) {
#title {
text-align: center;
}
.title-image {
position: static;
transform: rotate(0);
}
}
.colored-section#title {
background-image: url("images/biking.jpg");
}