diff --git a/css/styles.css b/css/styles.css index e69de29b..b5615137 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,164 @@ +body { + font-family: 'Montserrat'; + text-align: center; +} + +h1, h2, h3, h4, h5, h7 { + font-family: 'Montserrat', sans-serif; +} + +/* Containers */ +.container-fluid { + padding: 7% 15%; +} + +/* Sections */ +.colored-section { + background-color: #ff4c68; + color: #fff; +} + +.white-section { + background-color: #fff; +} + + /* Heading */ +.big-heading { + font-family: 'Montserrat', sans-serif; + font-size: 3.5rem; + line-height: 1.5; + font-weight: 900; +} + +.section-heading { + font-size: 3rem; + line-height: 1.5; + font-weight: 900; +} + + +/* Navigation bar */ +.navbar { + padding-bottom: 4.5rem; +} + +.navbar-brand { + font-family: 'Ubuntu'; + font-size: 2.5rem; + font-weight: bold; +} + +.nav-item { + padding: 0 18px; +} + +.nav-link { + font-size: 1.2rem; + font-family: 'Montserrat'; + font-weight: 200; +} + +/* Download Buttons */ +.download-button { + margin: 5% 3% 5% 0; +} + +/* Title Section */ + #title .container-fluid { + padding: 3% 15% 7%; + text-align: left; + } + +/* Title image */ +.title-image { + position: absolute; + width: 30%; + transform: rotate(25deg); +} + +/* Features */ +#features { + position: relative; +} + +.feature-title { + font-size: 'Montserrat'; + font-size: 1.5rem; + padding-top: 1rem; + font-weight: Bold; +} + +.feature-info { + font-size: 'Montserrat'; + color: #8f8f8f; +} + +.feature-img { + color: #ef8172; +} + +.feature-box { + padding: 5%; +} +.icon:hover { + color: #ff4c68; +} + +/* Testimonial section */ +#testimonials { + background-color: #ef8172; +} + +.testimonial-text { + font-size: 3rem; + line-height: 1.5; + font-weight: 900; +} + +.testimonial-image { + width: 10%; + border-radius: 100%; + margin: 20px; +} + +#press { + background-color: #ef8172; + padding-bottom: 3%; +} + +.press-logo { + width: 15%; + margin: 20px 20px 50px; +} + +/* Pricing section */ +#pricing { + padding: 100px; +} + +.price-text { + font-size: 3rem; + line-height: 1.5; + font-weight: 900; +} + +.pricing-column { + padding: 3% +} + +/* Footer */ +.social-icon { + margin: 20px 10px; +} + +@media (max-width: 1028px) { + #title { + text-align: center; + } + + .title-image { + position: static; + transform: rotate(0); + width: 60%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 5a19d4c7..eceaf168 100644 --- a/index.html +++ b/index.html @@ -3,130 +3,211 @@
-