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

Merge pull request #8 from bartlomiej-pluta/cross-browser

Browse Source 
Cross browser
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-10 12:33:59 +02:00
committed by GitHub
parent 09d7258400 ac9d30253c
commit dee7647f13
4 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/index.html
View File

@@ -28,7 +28,7 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-lg sticky-top"> <div class="navbar navbar-expand-lg fixed-top">
<div class="container"> <div class="container">
<div class="brand navbar-header"> <div class="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">
@@ -49,13 +49,11 @@
<a class="navbar__link nav-link" href="#">Support</a> <a class="navbar__link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#"> <button class="rounded-button rounded-button--strong">Buy now</button>
<button class="rounded-button rounded-button--strong">Buy now</button>
</a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </div>
<header class="header"> <header class="header">
<div> <div>
@@ -64,13 +62,13 @@
<p class="header__description">V. 2.8 for Mac and Windows</p> <p class="header__description">V. 2.8 for Mac and Windows</p>
</div> </div>
</header> </header>
<section class="download"> <div class="download">
<a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated"> <a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
Download for free now Download for free now
</a> </a>
<p class="download__description">Unlimited 30-Days trial period</p> <p class="download__description">Unlimited 30-Days trial period</p>
</section> </div>
<section class="editor"> <div class="editor">
<div class="container"> <div class="container">
<div class="editor__description"> <div class="editor__description">
<p class="editor__title">Revolutionary editor</p> <p class="editor__title">Revolutionary editor</p>
@@ -103,19 +101,18 @@
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a> aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
</p> </p>
</div> </div>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section 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-6">
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-3 feature__icon">
<img src="img/features/1.png"/> <img src="img/features/1.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="feature__title"> <p class="feature__title">
@@ -130,7 +127,7 @@
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-3 feature__icon">
<img src="img/features/2.png"/> <img src="img/features/2.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="feature__title"> <p class="feature__title">
@@ -145,7 +142,7 @@
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-3 feature__icon">
<img src="img/features/3.png"/> <img src="img/features/3.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="feature__title"> <p class="feature__title">
@@ -160,7 +157,7 @@
</div> </div>
<div class="row feature"> <div class="row feature">
<div class="col-3 feature__icon"> <div class="col-3 feature__icon">
<img src="img/features/4.png"/> <img src="img/features/4.png" alt=""/>
</div> </div>
<div class="col-9"> <div class="col-9">
<p class="feature__title"> <p class="feature__title">
@@ -180,8 +177,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="reviews container"> <div class="reviews container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="reviews__content col-10"> <div class="reviews__content col-10">
<div class="review"> <div class="review">
@@ -237,8 +234,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section 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>
@@ -264,8 +261,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="testimonials"> <div class="testimonials">
<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">
@@ -323,8 +320,8 @@
<div class="testimonials__delimiter col-8"></div> <div class="testimonials__delimiter col-8"></div>
</div> </div>
</div> </div>
</section> </div>
<section 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">
@@ -390,8 +387,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section 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-6 newsletter__title">
@@ -405,8 +402,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="news"> <div class="news">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
@@ -504,8 +501,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<footer 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-4">
@@ -537,13 +534,13 @@
<div class="footer__info col-3"> <div class="footer__info col-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">
Wisi 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
aliquip ex commodo consequat. Autem vel hendrerit iriure dolor in hendrerit. aliquip ex commodo consequat. Autem vel hendrerit iriure dolor in hendrerit.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</footer> </div>
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->

7
src/scss/_download.scss
View File

@@ -1,14 +1,15 @@
.download { .download {
text-align: center; text-align: center;
width: 100%;
} }
.download__rounded-button--translated { .download__rounded-button--translated {
position: absolute; position: relative;
transform: translate(-50%, -50%); bottom: 15px;
} }
.download__description { .download__description {
padding-top: 45px; padding-top: 15px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;

2
src/scss/_header.scss
View File

@@ -1,6 +1,6 @@
.header { .header {
background: black url(../img/header/img.png) no-repeat 50% 30% / cover; background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
height: 900px; height: 100vh;
padding-top: 110px; padding-top: 110px;
} }

2
src/scss/_social.scss
View File

@@ -3,7 +3,7 @@
padding-top: 50px; padding-top: 50px;
padding-bottom: 80px; padding-bottom: 80px;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-between;
} }
.social__stats { .social__stats {