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

Compare commits

merge into: bartek: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
...
pull from: bartek:rwd
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

7 Commits
footer ... rwd

Author SHA1 Message Date
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
Bartlomiej Pluta (PGS Software)
ac9d30253c Fix errors raported by W3C validator 2018-04-10 12:33:24 +02:00
Bartlomiej Pluta (PGS Software)
2a10237171 Fix header 2018-04-10 12:12:07 +02:00
Bartlomiej Pluta (PGS Software)
f29c45d28b Fix Download button 2018-04-10 11:29:39 +02:00
Bartlomiej Pluta (PGS Software)
09d7258400 Fix footer 2018-04-10 11:29:10 +02:00
Bartłomiej Przemysław Pluta
815d8ba7d3 Merge pull request #7 from bartlomiej-pluta/footer 
Create footer
 2018-04-10 10:58:26 +02:00
6 changed files with 72 additions and 37 deletions
Expand all files Collapse all files

57
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;

32
src/scss/_footer.scss
View File

@@ -30,6 +30,7 @@
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
color: $primary; color: $primary;
text-transform: capitalize;
transition: $hover-duration; transition: $hover-duration;
&:hover { &:hover {
@@ -41,6 +42,37 @@
} }
} }
&__contact {
&__phone {
margin-bottom: 5px;
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 30px;
color: #3f3f3f;
}
&__availability {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 12px;
color: $regular-text;
text-transform: uppercase;
}
&__city {
margin-top: 20px;
font-family: Montserrat, sans-serif;
font-size: 16px;
color: $dark-text;
}
&__address {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
}
&__info { &__info {
&__title { &__title {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;

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 {

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;