bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bartek:cross-browser
Branches Tags
bartek:master bartek:review-improvement bartek:rwd-footer bartek:rwd-news bartek:rwd-newsletter bartek:rwd-pricing bartek:rwd-testimonials bartek:rwd-social bartek:rwd-about bartek:rwd-navbar bartek:rwd bartek:cross-browser bartek:footer bartek:news bartek:newsletter bartek:pricing bartek:testimonials bartek:review-1
...
pull from: bartek:rwd-footer
Branches Tags
bartek:master bartek:review-improvement bartek:rwd-footer bartek:rwd-news bartek:rwd-newsletter bartek:rwd-pricing bartek:rwd-testimonials bartek:rwd-social bartek:rwd-about bartek:rwd-navbar bartek:rwd bartek:cross-browser bartek:footer bartek:news bartek:newsletter bartek:pricing bartek:testimonials bartek:review-1

20 Commits
cross-brow ... rwd-footer

Author SHA1 Message Date
Bartlomiej Pluta (PGS Software)
5a0c860c75 Enable RWD for footer 2018-04-19 11:43:26 +02:00
Bartlomiej Pluta (PGS Software)
658886fe22 Fix navbar 2018-04-19 11:34:25 +02:00
Bartłomiej Przemysław Pluta
5e00e803bd Merge pull request #16 from bartlomiej-pluta/rwd-news 
Enable RWD in news section
 2018-04-16 14:44:45 +02:00
Bartłomiej Pluta
39532aacf7 Enable RWD in news section 2018-04-16 14:44:05 +02:00
Bartłomiej Przemysław Pluta
abb149b383 Merge pull request #15 from bartlomiej-pluta/rwd-newsletter 
Enable RWD in Newsletter section
 2018-04-16 14:35:53 +02:00
Bartłomiej Pluta
325a0b5e3e Enable RWD in Newsletter section 2018-04-16 14:34:53 +02:00
Bartłomiej Przemysław Pluta
494bf4d2c3 Merge pull request #14 from bartlomiej-pluta/rwd-pricing 
Enable RWD on pricing section
 2018-04-16 14:21:35 +02:00
Bartłomiej Pluta
59dd5095b1 Enable RWD on pricing section 2018-04-16 14:20:29 +02:00
Bartłomiej Przemysław Pluta
d2f03f2ca6 Merge pull request #13 from bartlomiej-pluta/rwd-testimonials 
Enable RWD for testimonials
 2018-04-16 12:19:25 +02:00
Bartłomiej Pluta
39f6316897 Enable RWD for testimonials 2018-04-16 12:18:38 +02:00
Bartłomiej Przemysław Pluta
eb04cb6a08 Merge pull request #12 from bartlomiej-pluta/rwd-social 
Enable RWD for social buttons
 2018-04-16 12:00:59 +02:00
Bartłomiej Pluta
719906d227 Enable RWD for social buttons 2018-04-16 12:00:17 +02:00
Bartłomiej Przemysław Pluta
4b5d2198d2 Merge pull request #11 from bartlomiej-pluta/rwd-about 
Enable RWD for about section
 2018-04-16 11:21:08 +02:00
Bartłomiej Pluta
a290809750 Enable RWD for about section 2018-04-16 11:10:29 +02:00
Bartlomiej Pluta (PGS Software)
a02b17a51b Fix header subtitle 2018-04-12 14:43:57 +02:00
Bartłomiej Przemysław Pluta
b60fe45d49 Merge pull request #10 from bartlomiej-pluta/rwd-navbar 
Enable RWD for navbar and header
 2018-04-12 13:44:22 +02:00
Bartlomiej Pluta (PGS Software)
83763013b8 Enable RWD for navbar and header 2018-04-12 13:27:14 +02:00
Bartłomiej Przemysław Pluta
1661de16a9 Merge pull request #9 from bartlomiej-pluta/rwd 
Create RWD breakpoints
 2018-04-12 09:40:39 +02:00
Bartlomiej Pluta (PGS Software)
1e01ceae3a Create RWD breakpoints 2018-04-12 09:39:38 +02:00
Bartłomiej Przemysław Pluta
dee7647f13 Merge pull request #8 from bartlomiej-pluta/cross-browser 
Cross browser
 2018-04-10 12:33:59 +02:00
14 changed files with 220 additions and 79 deletions
Expand all files Collapse all files

7
src/img/navbar/sandwich.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 22" width="27" height="22">
<style>
tspan { white-space:pre }
.shp0 { fill: #333333 }
</style>
<path id="sandwich" class="shp0" d="M0,20.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM0,11.5c0,0.83 0.67,1.5 1.5,1.5h23c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-23c-0.83,0 -1.5,0.67 -1.5,1.5zM6,2.5c0,0.83 0.67,1.5 1.5,1.5h17c0.83,0 1.5,-0.67 1.5,-1.5c0,-0.83 -0.67,-1.5 -1.5,-1.5h-17c-0.83,0 -1.5,0.67 -1.5,1.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

87
src/index.html
View File

@@ -28,14 +28,19 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<div class="navbar navbar-expand-lg fixed-top"> <div class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"> <div class="container navbar__content">
<div class="brand navbar-header"> <div class="brand navbar__content__brand navbar-header">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span> <span class="brand__name">Fork</span>
<span class="brand__name brand__name--emph">IO</span> <span class="brand__name brand__name--emph">IO</span>
</div> </div>
<ul class="navbar__body navbar-nav"> <button class="navbar__content__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
<img src="img/navbar/sandwich.svg" alt="">
</button>
<div class="collapse navbar-collapse nav-content" id="navbarNavDropdown">
<ul class="navbar__content__body navbar-nav mr-0 ml-auto">
<li class="nav-item"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Overview</a> <a class="navbar__link nav-link" href="#">Overview</a>
</li> </li>
@@ -48,11 +53,10 @@
<li class="nav-item"> <li class="nav-item">
<a class="navbar__link nav-link" href="#">Support</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item">
<button class="rounded-button rounded-button--strong">Buy now</button>
</li>
</ul> </ul>
</div> </div>
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
</div>
</div> </div>
<header class="header"> <header class="header">
@@ -109,12 +113,13 @@
<div class="about"> <div class="about">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="about__features col-6"> <div class="about__features col-12 col-xl-6">
<p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/1.png" alt=""/> <img src="img/features/1.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
@@ -126,10 +131,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/2.png" alt=""/> <img src="img/features/2.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Incredibly Powerful Tool Incredibly Powerful Tool
</p> </p>
@@ -141,10 +146,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/3.png" alt=""/> <img src="img/features/3.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Experimental Stuff Experimental Stuff
</p> </p>
@@ -156,10 +161,10 @@
</div> </div>
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-4 col-md-3 feature__icon">
<img src="img/features/4.png" alt=""/> <img src="img/features/4.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-8 col-md-9">
<p class="feature__title"> <p class="feature__title">
Created to Make The Web Better Created to Make The Web Better
</p> </p>
@@ -171,8 +176,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="about__what-you-get col-6"> <div class="about__what-you-get col-12 col-xl-6">
<p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p> <p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
<img src="img/features/editor.png" alt="Revolutionary editor"> <img src="img/features/editor.png" alt="Revolutionary editor">
</div> </div>
</div> </div>
@@ -238,21 +243,21 @@
<div class="social container"> <div class="social container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="social__content col-10"> <div class="social__content col-10">
<div> <div class="social__github">
<button class="rect-button rect-button--github rect-button--fixed-width"> <button class="rect-button rect-button--github rect-button--fixed-width">
<span class="rect-button__icon fab fa-github"></span> <span class="rect-button__icon fab fa-github"></span>
GitHub GitHub
</button> </button>
<p class="social__stats">7 352 Followers</p> <p class="social__stats">7 352 Followers</p>
</div> </div>
<div> <div class="social__twitter">
<button class="rect-button rect-button--twitter rect-button--fixed-width"> <button class="rect-button rect-button--twitter rect-button--fixed-width">
<span class="rect-button__icon fab fa-twitter"></span> <span class="rect-button__icon fab fa-twitter"></span>
Twitter Twitter
</button> </button>
<p class="social__stats">136 312 Followers</p> <p class="social__stats">136 312 Followers</p>
</div> </div>
<div> <div class="social__facebook">
<button class="rect-button rect-button--facebook rect-button--fixed-width"> <button class="rect-button rect-button--facebook rect-button--fixed-width">
<span class="rect-button__icon fab fa-facebook-f"></span> <span class="rect-button__icon fab fa-facebook-f"></span>
Facebook Facebook
@@ -266,7 +271,7 @@
<p class="testimonials__h1">People are talking about fork</p> <p class="testimonials__h1">People are talking about fork</p>
<div class="testimonials__content container"> <div class="testimonials__content container">
<div class="testimonials__row row"> <div class="testimonials__row row">
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -274,14 +279,14 @@
Sed varius urna et pulvinar venenatis. Sed varius urna et pulvinar venenatis.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac, Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
mollis eleifend nibh. mollis eleifend nibh.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -291,7 +296,7 @@
</div> </div>
</div> </div>
<div class="testimonials__row row"> <div class="testimonials__row row">
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
<img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
@@ -300,7 +305,7 @@
Sed varius urna et pulvinar venenatis. Sed varius urna et pulvinar venenatis.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -308,7 +313,7 @@
consequat faucibus. consequat faucibus.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec Fusce pharetra erat id odio blandit, nec
@@ -324,8 +329,8 @@
<div class="pricing"> <div class="pricing">
<p class="pricing__title">Fork Subscription Pricing</p> <p class="pricing__title">Fork Subscription Pricing</p>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-3"> <div class="col-8 col-xl-3">
<div class="price"> <div class="price">
<p class="price__title">Students</p> <p class="price__title">Students</p>
<p class="price__value">$29</p> <p class="price__value">$29</p>
@@ -337,7 +342,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-3">
<div class="price"> <div class="price">
<p class="price__title">Professional</p> <p class="price__title">Professional</p>
<p class="price__value">$59</p> <p class="price__value">$59</p>
@@ -349,7 +354,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-3">
<div class="price"> <div class="price">
<p class="price__title">Agency</p> <p class="price__title">Agency</p>
<p class="price__value">$99</p> <p class="price__value">$99</p>
@@ -361,7 +366,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-3">
<div class="price"> <div class="price">
<p class="price__title">Enterprise</p> <p class="price__title">Enterprise</p>
<p class="price__value">$159</p> <p class="price__value">$159</p>
@@ -391,10 +396,10 @@
<div class="newsletter"> <div class="newsletter">
<div class="container"> <div class="container">
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col-6 newsletter__title"> <div class="col-12 col-xl-6 newsletter__title">
Subscribe to our newsletter Subscribe to our newsletter
</div> </div>
<div class="col-6 oneline__form"> <div class="col-12 col-xl-6 oneline__form">
<input class="textfield oneline__form__component--growing" title="Email" placeholder="Email..."> <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
<button class="rounded-button rounded-button--uppercase oneline__form__component--fixed" <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
type="submit">Subscribe type="submit">Subscribe
@@ -406,7 +411,7 @@
<div class="news"> <div class="news">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-4"> <div class="news__news col-12 col-sm-4">
<p class="news__title"> <p class="news__title">
New in Release 2.8 New in Release 2.8
</p> </p>
@@ -430,7 +435,7 @@
</div> </div>
<button class="rect-button rect-button--small">Go to Release Log</button> <button class="rect-button rect-button--small">Go to Release Log</button>
</div> </div>
<div class="col-4"> <div class="news__extensions col-12 col-sm-4">
<p class="news__title"> <p class="news__title">
Popular Extensions Popular Extensions
</p> </p>
@@ -461,7 +466,7 @@
</div> </div>
<button class="rect-button rect-button--small">Go to Marketplace</button> <button class="rect-button rect-button--small">Go to Marketplace</button>
</div> </div>
<div class="col-4"> <div class="news__blog col-12 col-sm-4">
<p class="news__title"> <p class="news__title">
New From the Blog New From the Blog
</p> </p>
@@ -505,7 +510,7 @@
<div class="footer"> <div class="footer">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="footer__about col-4"> <div class="footer__about col-12 col-md-4">
<div class="brand"> <div class="brand">
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo"> <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
<span class="brand__name">Fork</span> <span class="brand__name">Fork</span>
@@ -515,7 +520,7 @@
Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
</p> </p>
</div> </div>
<div class="footer__nav col-2"> <div class="footer__nav col-12 col-md-2">
<p class="footer__nav__title">Navigation</p> <p class="footer__nav__title">Navigation</p>
<ul class="footer__nav__navbar"> <ul class="footer__nav__navbar">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
@@ -525,13 +530,13 @@
<li><a href="#">Support</a></li> <li><a href="#">Support</a></li>
</ul> </ul>
</div> </div>
<div class="footer__contact col-3"> <div class="footer__contact col-12 col-md-3">
<p class="footer__contact__phone">347 567 78 90</p> <p class="footer__contact__phone">347 567 78 90</p>
<p class="footer__contact__availability">Available from 12PM - 18PM</p> <p class="footer__contact__availability">Available from 12PM - 18PM</p>
<p class="footer__contact__city">New York, NY</p> <p class="footer__contact__city">New York, NY</p>
<p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p> <p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p>
</div> </div>
<div class="footer__info col-3"> <div class="footer__info col-12 col-md-3">
<p class="footer__info__title">Info</p> <p class="footer__info__title">Info</p>
<p class="footer__info__description"> <p class="footer__info__description">
Wisia enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut Wisia enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut

24
src/scss/_about.scss
View File

@@ -1,8 +1,13 @@
.about { .about {
background-color: $background-light; background-color: $background-light;
@media all and (max-width: $desktop-xl) {
.about {
padding: 75px 0 0 30px; padding: 75px 0 0 30px;
height: 710px; height: 710px;
} }
}
}
.about__title { .about__title {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
@@ -13,4 +18,23 @@
&--no-wrap { &--no-wrap {
white-space: nowrap; white-space: nowrap;
} }
&--desktop-xl {
display: block;
}
&--desktop {
display: none;
text-align: center;
}
@media all and (max-width: $desktop-xl) {
&--desktop-xl {
display: none;
}
&--desktop {
display: block;
}
}
} }

2
src/scss/_feature.scss
View File

@@ -3,7 +3,7 @@
} }
.feature__icon { .feature__icon {
text-align: center; text-align: left;
} }
.feature__title { .feature__title {

9
src/scss/_footer.scss
View File

@@ -88,4 +88,13 @@
color: $regular-text; color: $regular-text;
} }
} }
@media all and (max-width: $phone) {
&__about,
&__nav,
&__contact,
&__info {
padding: 0 30px;
}
}
} }

5
src/scss/_form.scss
View File

@@ -5,6 +5,7 @@
background-color: white; background-color: white;
color: $regular-text; color: $regular-text;
&::placeholder { &::placeholder {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 14px; font-size: 14px;
@@ -21,9 +22,11 @@
.oneline__form__component--growing { .oneline__form__component--growing {
width: 100%; width: 100%;
margin: 0 20px; min-width: 100px;
margin: 0 10px;
} }
.oneline__form__component--fixed { .oneline__form__component--fixed {
white-space: nowrap; white-space: nowrap;
margin: 0 10px;
} }

9
src/scss/_header.scss
View File

@@ -1,5 +1,5 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover; background: black url(../img/header/img.png) no-repeat center 120px/ cover;
height: 100vh; height: 100vh;
padding-top: 110px; padding-top: 110px;
} }
@@ -21,6 +21,13 @@
margin-bottom: 0; margin-bottom: 0;
} }
@media all and (max-width: $phone) {
.header__subtitle {
font-size: 24px;
text-transform: capitalize;
}
}
.header__description { .header__description {
margin-top: 20px; margin-top: 20px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;

34
src/scss/_navbar.scss
View File

@@ -1,10 +1,10 @@
$shrinking-duration: 0.4s; $shrinking-duration: 0.4s;
@media all and (min-width: $desktop) {
.navbar { .navbar {
margin: 0 0; margin: 0 0;
padding: 0 90px; padding: 0 90px;
height: 100px; height: 100px;
background-color: white;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
@@ -12,15 +12,45 @@ $shrinking-duration: 0.4s;
height: 50px; height: 50px;
transition: height $shrinking-duration; transition: height $shrinking-duration;
} }
}
.navbar {
background-color: white;
}
.navbar__content {
display: flex;
}
.navbar__content__header {
order: 1;
}
.navbar__content__toggler {
order: 4;
border: none;
}
.navbar__content__body {
order: 2;
}
.navbar__content__button {
order: 3;
}
.navbar__link { .navbar__link {
text-transform: capitalize; text-transform: capitalize;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: bolder; font-weight: bolder;
margin: 0 20px;
color: $primary-dark; color: $primary-dark;
transition: $hover-duration; transition: $hover-duration;
margin: 0 20px;
@media all and (max-width: $desktop-xl) {
margin: 0 5px;
}
} }
.navbar__link:hover { .navbar__link:hover {

13
src/scss/_news.scss
View File

@@ -42,3 +42,16 @@
color: $regular-text; color: $regular-text;
font-weight: 500; font-weight: 500;
} }
@media all and (max-width: $phone) {
.news__news,
.news__extensions,
.news__blog {
padding: 0 30px;
}
.news__extensions,
.news__blog {
margin-top: 50px;
}
}

7
src/scss/_newsletter.scss
View File

@@ -4,12 +4,15 @@
} }
.newsletter__title { .newsletter__title {
display: flex;
align-items: center;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 30px;
color: $primary-dark; color: $primary-dark;
text-transform: capitalize; text-transform: capitalize;
text-align: center;
@media all and (max-width: $desktop-xl) {
margin-bottom: 50px;
}
} }

16
src/scss/_pricing.scss
View File

@@ -21,12 +21,19 @@
height: 450px; height: 450px;
transition: $hover-duration; transition: $hover-duration;
@media all and (max-width: $desktop-xl) {
margin-top: 7px;
margin-bottom: 7px;
}
&:hover { &:hover {
@media all and (min-width: $desktop-xl) {
margin-top: 70px; margin-top: 70px;
margin-bottom: 75px; margin-bottom: 75px;
height: 530px;
}
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration; transition: $hover-duration;
height: 530px;
& > .price__title { & > .price__title {
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
padding-bottom: 10px; padding-bottom: 10px;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
position: absolute; position: absolute;
left: 0;
text-align: center;
right: 0;
bottom: 35px; bottom: 35px;
left: 20%; margin: auto;
display: block;
width: 80%;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;

13
src/scss/_social.scss
View File

@@ -4,6 +4,10 @@
padding-bottom: 80px; padding-bottom: 80px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media all and (max-width: $tablet) {
flex-direction: column;
}
} }
.social__stats { .social__stats {
@@ -14,3 +18,12 @@
color: $regular-text; color: $regular-text;
text-align: center; text-align: center;
} }
.social__github,
.social__twitter,
.social__facebook {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

12
src/scss/_testimonials.scss
View File

@@ -1,6 +1,6 @@
.testimonials { .testimonials {
position: relative; position: relative;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain; background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
} }
.testimonials__h1 { .testimonials__h1 {
@@ -15,12 +15,20 @@
.testimonials__row { .testimonials__row {
padding-bottom: 100px; padding-bottom: 100px;
@media all and (max-width: $desktop) {
padding: 0 10px;
margin: 0;
}
} }
.testimonial { .testimonial {
position: relative; position: relative;
text-align: center; text-align: center;
min-height: 170px; min-height: 170px;
@media all and (max-width: $desktop) {
margin-bottom: 50px;
}
} }
.testimonial__logo { .testimonial__logo {
@@ -28,8 +36,10 @@
} }
.testimonial__text { .testimonial__text {
@media all and (min-width: $desktop-xl) {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
}
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;

5
src/scss/_variables.scss
View File

@@ -19,3 +19,8 @@ $hover-duration: 0.3s;
$github-color: #f3f3f3; $github-color: #f3f3f3;
$twitter-color: #26a6d1; $twitter-color: #26a6d1;
$facebook-color: #3b5998; $facebook-color: #3b5998;
$phone: 576px;
$tablet: 768px;
$desktop: 992px;
$desktop-xl: 1200px;