Compare commits
44 Commits
news
...
review-imp
| Author | SHA1 | Date | |
|---|---|---|---|
|
1359ee9131 | ||
|
|
5e147407c8 | ||
|
|
fcb9969cd1 | ||
|
|
52745b0535 | ||
|
|
84122d6d91 | ||
|
|
146107b31a | ||
|
|
b0d501c360 | ||
|
|
65e57ca0ce | ||
|
|
dc0542d0cc | ||
|
|
0bb3fb7d8e | ||
|
|
c18b26e613 | ||
|
|
5532b9e015 | ||
|
|
664cd80b37 | ||
|
|
3153593ea5 | ||
|
|
f15138e0e1 | ||
|
|
def66a6fd3 | ||
|
|
45f2353012 | ||
|
|
5a0c860c75 | ||
|
|
658886fe22 | ||
|
|
5e00e803bd | ||
|
|
39532aacf7 | ||
|
|
abb149b383 | ||
|
|
325a0b5e3e | ||
|
|
494bf4d2c3 | ||
|
|
59dd5095b1 | ||
|
|
d2f03f2ca6 | ||
|
|
39f6316897 | ||
|
|
eb04cb6a08 | ||
|
|
719906d227 | ||
|
|
4b5d2198d2 | ||
|
|
a290809750 | ||
|
|
a02b17a51b | ||
|
|
b60fe45d49 | ||
|
|
83763013b8 | ||
|
|
1661de16a9 | ||
|
|
1e01ceae3a | ||
|
|
dee7647f13 | ||
|
|
ac9d30253c | ||
|
|
2a10237171 | ||
|
|
f29c45d28b | ||
|
|
09d7258400 | ||
|
|
815d8ba7d3 | ||
|
|
92016ebdc5 | ||
|
|
fc4b091d2f |
2
gulpfile.js
Normal file → Executable file
2
gulpfile.js
Normal file → Executable file
@@ -46,7 +46,7 @@ gulp.task('serve', function() {
|
||||
});
|
||||
|
||||
gulp.watch(config.htmlIn, function() { sequence('html', 'reload') });
|
||||
gulp.watch(config.scssIn, function() { sequence('sass', 'css', 'reload') });
|
||||
gulp.watch(config.scssIn, function() { sequence('sass', 'css' ) });
|
||||
gulp.watch(config.jsIn, function() { sequence('js', 'reload') });
|
||||
gulp.watch(config.imgIn, function() { sequence('img', 'reload') });
|
||||
gulp.watch(config.svgIn, function() { sequence('svg', 'reload') });
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 464 KiB After Width: | Height: | Size: 400 KiB |
7
src/img/navbar/sandwich.svg
Normal file
7
src/img/navbar/sandwich.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 568 B |
280
src/index.html
Normal file → Executable file
280
src/index.html
Normal file → Executable file
@@ -28,49 +28,55 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper" id="wrapper">
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<div class="container">
|
||||
<div class="navbar__header navbar-header">
|
||||
<img class="navbar__logo" src="img/logo.svg" alt="Forkio logo">
|
||||
<span class="navbar__brand">Fork</span>
|
||||
<span class="navbar__brand navbar__brand--emph">IO</span>
|
||||
<div class="navbar navbar-light navbar-expand-lg fixed-top">
|
||||
<div class="container navbar__content">
|
||||
<div class="brand navbar__content__brand navbar-header">
|
||||
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
|
||||
<span class="brand__name">Fork</span>
|
||||
<span class="brand__name brand__name--emph">IO</span>
|
||||
</div>
|
||||
<button class="navbar__content__button navbar__content__button--phone rounded-button rounded-button--strong">Buy now</button>
|
||||
<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">
|
||||
<a class="navbar__link nav-link" href="#">Overview</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">About fork</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">Buying options</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">Support</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="navbar__content__button navbar__content__button--desktop rounded-button rounded-button--strong">Buy now</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="navbar__body navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">Overview</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">About fork</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">Buying options</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="navbar__link nav-link" href="#">Support</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#">
|
||||
<button class="rounded-button rounded-button--strong">Buy now</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div>
|
||||
<div class="header__text">
|
||||
<p class="header__title">Fork app</p>
|
||||
<p class="header__subtitle">A real gamechanger in the world of web development</p>
|
||||
<p class="header__description">V. 2.8 for Mac and Windows</p>
|
||||
</div>
|
||||
<div class="header__image"> </div>
|
||||
</header>
|
||||
<section class="download">
|
||||
<div class="download">
|
||||
<a href="#" class="rounded-button rounded-button--very-strong download__rounded-button--translated">
|
||||
Download for free now
|
||||
</a>
|
||||
<p class="download__description">Unlimited 30-Days trial period</p>
|
||||
</section>
|
||||
<section class="editor">
|
||||
</div>
|
||||
<div class="editor">
|
||||
<div class="container">
|
||||
<div class="editor__description">
|
||||
<p class="editor__title">Revolutionary editor</p>
|
||||
@@ -103,21 +109,21 @@
|
||||
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
</div>
|
||||
<div class="about">
|
||||
<div class="container">
|
||||
<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"><Here is what you get></p>
|
||||
<div class="row feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/1.png"/>
|
||||
<div class="col-4 col-md-3 feature__icon">
|
||||
<img src="img/features/1.png" alt=""/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="col-8 col-md-9">
|
||||
<p class="feature__title">
|
||||
Created to Make The Web Better
|
||||
</p>
|
||||
@@ -129,10 +135,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/2.png"/>
|
||||
<div class="col-4 col-md-3 feature__icon">
|
||||
<img src="img/features/2.png" alt=""/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="col-8 col-md-9">
|
||||
<p class="feature__title">
|
||||
Incredibly Powerful Tool
|
||||
</p>
|
||||
@@ -144,10 +150,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/3.png"/>
|
||||
<div class="col-4 col-md-3 feature__icon">
|
||||
<img src="img/features/3.png" alt=""/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="col-8 col-md-9">
|
||||
<p class="feature__title">
|
||||
Experimental Stuff
|
||||
</p>
|
||||
@@ -159,10 +165,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/4.png"/>
|
||||
<div class="col-4 col-md-3 feature__icon">
|
||||
<img src="img/features/4.png" alt=""/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="col-8 col-md-9">
|
||||
<p class="feature__title">
|
||||
Created to Make The Web Better
|
||||
</p>
|
||||
@@ -174,14 +180,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about__what-you-get col-6">
|
||||
<p class="about__title about__title--no-wrap"><Here is what you get></p>
|
||||
<div class="about__what-you-get col-12 col-xl-6">
|
||||
<p class="about__title about__title--no-wrap about__title--desktop-xl"><Here is what you get></p>
|
||||
<img src="img/features/editor.png" alt="Revolutionary editor">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="reviews container">
|
||||
</div>
|
||||
<div class="reviews container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="reviews__content col-10">
|
||||
<div class="review">
|
||||
@@ -237,82 +243,95 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="social container">
|
||||
</div>
|
||||
<div class="social container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="social__content col-10">
|
||||
<div>
|
||||
<button class="rect-button rect-button--github rect-button--fixed-width">
|
||||
<div class="social__github">
|
||||
<a href="https://github.com/bartlomiej-pluta/forkio" target="_blank"
|
||||
class="rect-button rect-button--github rect-button--fixed-width">
|
||||
<span class="rect-button__icon fab fa-github"></span>
|
||||
GitHub
|
||||
</button>
|
||||
<p class="social__stats">7 352 Followers</p>
|
||||
</a>
|
||||
<p id="github-watchers" class="social__stats"></p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="rect-button rect-button--twitter rect-button--fixed-width">
|
||||
<div class="social__twitter">
|
||||
<a href="https://twitter.com/pgssoftware" target="_blank"
|
||||
class="rect-button rect-button--twitter rect-button--fixed-width">
|
||||
<span class="rect-button__icon fab fa-twitter"></span>
|
||||
Twitter
|
||||
</button>
|
||||
<p class="social__stats">136 312 Followers</p>
|
||||
</a>
|
||||
<p class="social__stats"></p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="rect-button rect-button--facebook rect-button--fixed-width">
|
||||
<div class="social__facebook">
|
||||
<a href="https://www.facebook.com/pgs.software" target="_blank"
|
||||
class="rect-button rect-button--facebook rect-button--fixed-width">
|
||||
<span class="rect-button__icon fab fa-facebook-f"></span>
|
||||
Facebook
|
||||
</button>
|
||||
<p class="social__stats">218 092 Subscribers</p>
|
||||
</a>
|
||||
<p class="social__stats"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="testimonials">
|
||||
</div>
|
||||
<div class="testimonials">
|
||||
<p class="testimonials__h1">People are talking about fork</p>
|
||||
<div class="testimonials__content container">
|
||||
<div class="testimonials__row row">
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/1.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
|
||||
magna.
|
||||
Sed varius urna et pulvinar venenatis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/2.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
|
||||
mollis eleifend nibh.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/3.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
|
||||
nibh.
|
||||
Morbi tempus auctor felis ac vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonials__row row">
|
||||
<div class="testimonial col-4">
|
||||
<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">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/4/1.png" alt="Smashing Magazine">
|
||||
<img src="img/testimonials/4/2.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
|
||||
magna.
|
||||
Sed varius urna et pulvinar venenatis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/5.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
|
||||
arcu
|
||||
consequat faucibus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="testimonial col-4">
|
||||
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
|
||||
<div class="testimonial col-12 col-sm-6 col-xl-4">
|
||||
<div class="testimonial__logo">
|
||||
<img src="img/testimonials/6.png" alt="Smashing Magazine">
|
||||
</div>
|
||||
<p class="testimonial__text">
|
||||
Fusce pharetra erat id odio blandit, nec
|
||||
pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
|
||||
@@ -323,12 +342,12 @@
|
||||
<div class="testimonials__delimiter col-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pricing">
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<p class="pricing__title">Fork Subscription Pricing</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="price-wrapper col-md-3 col-sm-6 col-7">
|
||||
<div class="price">
|
||||
<p class="price__title">Students</p>
|
||||
<p class="price__value">$29</p>
|
||||
@@ -340,7 +359,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price-wrapper col-md-3 col-sm-6 col-7">
|
||||
<div class="price">
|
||||
<p class="price__title">Professional</p>
|
||||
<p class="price__value">$59</p>
|
||||
@@ -352,7 +371,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price-wrapper col-md-3 col-sm-6 col-7">
|
||||
<div class="price">
|
||||
<p class="price__title">Agency</p>
|
||||
<p class="price__value">$99</p>
|
||||
@@ -364,7 +383,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="price-wrapper col-md-3 col-sm-6 col-7">
|
||||
<div class="price">
|
||||
<p class="price__title">Enterprise</p>
|
||||
<p class="price__value">$159</p>
|
||||
@@ -390,46 +409,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="newsletter">
|
||||
</div>
|
||||
<div class="newsletter">
|
||||
<div class="container">
|
||||
<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
|
||||
</div>
|
||||
<div class="col-6 oneline__form">
|
||||
<input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
|
||||
<button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
|
||||
type="submit">Subscribe
|
||||
<div class="col-12 col-xl-6 oneline__form">
|
||||
<input class="newsletter__form-element textfield oneline__form__component--growing" title="Email" placeholder="Email...">
|
||||
<button class="newsletter__form-element rounded-button rounded-button--uppercase oneline__form__component--fixed"
|
||||
type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="news">
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="news__news col-12 col-sm-4">
|
||||
<p class="news__title">
|
||||
New in Release 2.8
|
||||
</p>
|
||||
<div class="news-entry">
|
||||
<p class="news-entry__brief">Fully Available: Live Preview Support for Multiple Browsers</p>
|
||||
<p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
|
||||
<p class="news-entry__content">Morbi faucibus ante ipsum, a tincidunt libero posuere et. Etiam
|
||||
tempor tortor at odio condimentum, sit amet fringilla ligula maximus. Mauris venenatis nisl
|
||||
nisi, et dictum dui aliquet nec. Sed erat, nec aliquam vel, aliquam ac felis. </p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<p class="news-entry__brief">Improved Support for Typing</p>
|
||||
<p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit. Donec eu elit mauris. </p>
|
||||
<p class="news-entry__content">Nulla purus quam, pulvinar sed ante et, feugiat maximus velit.
|
||||
Donec eu elit mauris. </p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<p class="news-entry__brief">Improved Stability</p>
|
||||
<p class="news-entry__content">
|
||||
Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel, iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
|
||||
Proin id ligula eget massa tincidunt molestie. Morbi urna lectus, molestie vel quam vel,
|
||||
iaculis fermentum nunc. Morbi imperdiet, leo in interdum pretium
|
||||
</p>
|
||||
</div>
|
||||
<button class="rect-button rect-button--small">Go to Release Log</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="news__extensions col-12 col-sm-4">
|
||||
<p class="news__title">
|
||||
Popular Extensions
|
||||
</p>
|
||||
@@ -448,7 +472,8 @@
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">WebZap</a>
|
||||
<p class="news-entry__content">
|
||||
Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam vitae orci. Suspendisse interdum accumsan magna vitae commodo.
|
||||
Morbi imperdiet, leo in interdum pretium, elit eros dapibus velit, eu posuere quam diam
|
||||
vitae orci. Suspendisse interdum accumsan magna vitae commodo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
@@ -459,7 +484,7 @@
|
||||
</div>
|
||||
<button class="rect-button rect-button--small">Go to Marketplace</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="news__blog col-12 col-sm-4">
|
||||
<p class="news__title">
|
||||
New From the Blog
|
||||
</p>
|
||||
@@ -470,7 +495,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit leo.</a>
|
||||
<a href="#" class="news-entry__title">Donec orci ante, porta vel nulla quis, aliquet hendrerit
|
||||
leo.</a>
|
||||
<p class="news-entry__content">
|
||||
February 12, 2015
|
||||
</p>
|
||||
@@ -482,7 +508,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a egestas.</a>
|
||||
<a href="#" class="news-entry__title">Quisque varius ante lorem, eget pretium purus hendrerit a
|
||||
egestas.</a>
|
||||
<p class="news-entry__content">
|
||||
February 2, 2015
|
||||
</p>
|
||||
@@ -497,7 +524,46 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="footer__about col-12 col-md-4">
|
||||
<div class="brand">
|
||||
<img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
|
||||
<span class="brand__name">Fork</span>
|
||||
<span class="brand__name brand__name--emph">IO</span>
|
||||
</div>
|
||||
<p class="footer__about__description">
|
||||
Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer__nav col-12 col-md-2">
|
||||
<p class="footer__nav__title">Navigation</p>
|
||||
<ul class="footer__nav__navbar">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Overview</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Buying options</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__contact col-12 col-md-3">
|
||||
<p class="footer__contact__phone">347 567 78 90</p>
|
||||
<p class="footer__contact__availability">Available from 12PM - 18PM</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>
|
||||
</div>
|
||||
<div class="footer__info col-12 col-md-3">
|
||||
<p class="footer__info__title">Info</p>
|
||||
<p class="footer__info__description">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
|
||||
18
src/js/script.js
Normal file → Executable file
18
src/js/script.js
Normal file → Executable file
@@ -9,6 +9,7 @@
|
||||
|
||||
if (scrollTop >= scrollThreshold) {
|
||||
$('.navbar').addClass('navbar--shrink');
|
||||
$('#navbarNavDropdown').collapse('hide');
|
||||
} else {
|
||||
$('.navbar').removeClass('navbar--shrink');
|
||||
}
|
||||
@@ -20,4 +21,21 @@
|
||||
autoplay: true,
|
||||
autoplaySpeed: 4000,
|
||||
});
|
||||
|
||||
$(window).resize(function() {
|
||||
$('#navbarNavDropdown').collapse('hide');
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
const p = $('#github-watchers');
|
||||
$.get({
|
||||
//url: 'https://api.github.com/repos/bartlomiej-pluta/forkio',
|
||||
url: 'https://localhost',
|
||||
success: function(data) {
|
||||
p.text((data ? data.watchers_count : 'No') + ' Watchers');
|
||||
},
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
49
src/scss/_about.scss
Normal file → Executable file
49
src/scss/_about.scss
Normal file → Executable file
@@ -1,7 +1,7 @@
|
||||
.about {
|
||||
background-color: $background-light;
|
||||
padding: 75px 0 0 30px;
|
||||
height: 710px;
|
||||
min-width: 320px;
|
||||
padding: 50px 0 0;
|
||||
}
|
||||
|
||||
.about__title {
|
||||
@@ -9,8 +9,53 @@
|
||||
font-weight: bold;
|
||||
font-size: 48px;
|
||||
color: $primary;
|
||||
margin: 0;
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
&--no-wrap {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about__what-you-get {
|
||||
img {
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
top: 70px;
|
||||
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/scss/_author.scss
Normal file → Executable file
34
src/scss/_author.scss
Normal file → Executable file
@@ -9,19 +9,43 @@
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.author__details {
|
||||
margin-left: 23px;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.author__name {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 5px 0 0;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $primary-dark;
|
||||
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.nickname {
|
||||
@@ -37,5 +61,13 @@
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/scss/_brand.scss
Executable file
29
src/scss/_brand.scss
Executable file
@@ -0,0 +1,29 @@
|
||||
.brand {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.brand__logo {
|
||||
height: 45px;
|
||||
margin-right: 17px;
|
||||
@media all and (max-width: $phone) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-family: Lato, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&--emph {
|
||||
color: $primary;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
53
src/scss/_buttons.scss
Normal file → Executable file
53
src/scss/_buttons.scss
Normal file → Executable file
@@ -7,6 +7,10 @@
|
||||
border-radius: 30px;
|
||||
transition: $hover-duration;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
padding: 7px 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken($primary, $hover-threshold);
|
||||
transition: $hover-duration;
|
||||
@@ -24,6 +28,10 @@
|
||||
@extend .rounded-button--strong;
|
||||
font-size: 21px;
|
||||
padding: 15px 60px;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--uppercase {
|
||||
@@ -45,10 +53,24 @@
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
padding: 10px 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($primary, $hover-threshold);
|
||||
cursor: pointer;
|
||||
transition: $hover-duration;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&--github {
|
||||
@@ -57,6 +79,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: darken($github-color, $hover-threshold);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,6 +89,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($twitter-color, $hover-threshold);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,11 +99,24 @@
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($facebook-color, $hover-threshold);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&--fixed-width {
|
||||
width: 240px;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
@@ -90,6 +127,10 @@
|
||||
color: $primary;
|
||||
transition: $hover-duration;
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background-light, $hover-threshold);
|
||||
transition: $hover-duration;
|
||||
@@ -99,4 +140,16 @@
|
||||
|
||||
.rect-button__icon {
|
||||
margin-right: 35px;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
8
src/scss/_download.scss
Normal file → Executable file
8
src/scss/_download.scss
Normal file → Executable file
@@ -1,14 +1,16 @@
|
||||
.download {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.download__rounded-button--translated {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.download__description {
|
||||
padding-top: 45px;
|
||||
padding-top: 15px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
33
src/scss/_editor.scss
Normal file → Executable file
33
src/scss/_editor.scss
Normal file → Executable file
@@ -1,14 +1,35 @@
|
||||
.editor {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.editor__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor__title {
|
||||
padding: 0 10px;
|
||||
margin-top: 60px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 54px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: $primary-dark;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor__subtitle {
|
||||
@@ -17,6 +38,18 @@
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
color: $dark-text;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor__github {
|
||||
|
||||
17
src/scss/_feature.scss
Normal file → Executable file
17
src/scss/_feature.scss
Normal file → Executable file
@@ -3,7 +3,14 @@
|
||||
}
|
||||
|
||||
.feature__icon {
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
img {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
@@ -12,10 +19,18 @@
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $dark-text;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature__description {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
color: $regular-text;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
109
src/scss/_footer.scss
Executable file
109
src/scss/_footer.scss
Executable file
@@ -0,0 +1,109 @@
|
||||
.footer {
|
||||
margin-top: 65px;
|
||||
padding-top: 65px;
|
||||
border-top: solid 1px $background-light;
|
||||
margin-bottom: 95px;
|
||||
min-width: 320px;
|
||||
|
||||
&__about {
|
||||
&__description {
|
||||
margin-top: 30px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
color: $regular-text;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
&__title {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: $dark-text;
|
||||
}
|
||||
|
||||
&__navbar {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li > a {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: $primary;
|
||||
text-transform: capitalize;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
color: darken($primary, $hover-threshold);
|
||||
transition: $hover-duration;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__contact {
|
||||
&__phone {
|
||||
margin-bottom: 5px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: #3f3f3f;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__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 {
|
||||
&__title {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: $dark-text;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 25px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
color: $regular-text;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
&__about,
|
||||
&__nav,
|
||||
&__contact,
|
||||
&__info {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/scss/_form.scss
Normal file → Executable file
25
src/scss/_form.scss
Normal file → Executable file
@@ -5,11 +5,20 @@
|
||||
background-color: white;
|
||||
color: $regular-text;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $gray-text;
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,13 +26,27 @@
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.oneline__form__component--growing {
|
||||
width: 100%;
|
||||
margin: 0 20px;
|
||||
min-width: 100px;
|
||||
margin: 5px 10px;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.oneline__form__component--fixed {
|
||||
white-space: nowrap;
|
||||
margin: 5px 10px;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
}
|
||||
3
src/scss/_global.scss
Normal file → Executable file
3
src/scss/_global.scss
Normal file → Executable file
@@ -1,3 +1,4 @@
|
||||
body {
|
||||
.wrapper {
|
||||
overflow-x: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
35
src/scss/_header.scss
Normal file → Executable file
35
src/scss/_header.scss
Normal file → Executable file
@@ -1,7 +1,21 @@
|
||||
.header {
|
||||
background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
|
||||
height: 900px;
|
||||
height: 100vh;
|
||||
padding-top: 110px;
|
||||
width: 100%;
|
||||
display: table;
|
||||
background: $hero-background;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.header__text {
|
||||
display: table-row;
|
||||
background: $hero-background;
|
||||
}
|
||||
|
||||
.header__image {
|
||||
background: $hero-background url(../img/header/img.png) no-repeat center top / cover;
|
||||
display: table-row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
@@ -19,6 +33,7 @@
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.header__description {
|
||||
@@ -30,3 +45,19 @@
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
.header__title {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.header__subtitle {
|
||||
font-size: 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
||||
.header__description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
87
src/scss/_navbar.scss
Normal file → Executable file
87
src/scss/_navbar.scss
Normal file → Executable file
@@ -1,40 +1,75 @@
|
||||
$shrinking-duration: 0.4s;
|
||||
|
||||
@media all and (min-width: $desktop) {
|
||||
.navbar {
|
||||
margin: 0 0;
|
||||
padding: 0 90px;
|
||||
height: 100px;
|
||||
transition: height $shrinking-duration;
|
||||
}
|
||||
|
||||
.navbar--shrink {
|
||||
height: 50px;
|
||||
transition: height $shrinking-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 0;
|
||||
padding: 0 90px;
|
||||
height: 100px;
|
||||
background-color: white;
|
||||
transition: height $shrinking-duration;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.navbar--shrink {
|
||||
height: 50px;
|
||||
transition: height $shrinking-duration;
|
||||
.navbar__content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.navbar__header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.navbar__content__header {
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 45px;
|
||||
margin-right: 17px;
|
||||
.navbar__content__toggler {
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
font-family: Lato, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.navbar__content__body {
|
||||
}
|
||||
|
||||
.navbar__brand--emph {
|
||||
color: $primary;
|
||||
font-style: normal;
|
||||
.navbar__content__button {
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
&--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--phone {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: $desktop) {
|
||||
&--desktop {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&--phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
&--desktop {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&--phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
@@ -42,9 +77,13 @@ $shrinking-duration: 0.4s;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
margin: 0 20px;
|
||||
color: $primary-dark;
|
||||
transition: $hover-duration;
|
||||
margin: 0 20px;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__link:hover {
|
||||
|
||||
14
src/scss/_news.scss
Normal file → Executable file
14
src/scss/_news.scss
Normal file → Executable file
@@ -1,5 +1,6 @@
|
||||
.news {
|
||||
padding-top: 70px;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.news__title {
|
||||
@@ -41,4 +42,17 @@
|
||||
font-size: 13px;
|
||||
color: $regular-text;
|
||||
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;
|
||||
}
|
||||
}
|
||||
24
src/scss/_newsletter.scss
Normal file → Executable file
24
src/scss/_newsletter.scss
Normal file → Executable file
@@ -1,15 +1,35 @@
|
||||
.newsletter {
|
||||
padding: 55px 0;
|
||||
background-color: #f4f4f4;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: $primary-dark;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter__form-element {
|
||||
font-size: 16px;
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
103
src/scss/_pricing.scss
Normal file → Executable file
103
src/scss/_pricing.scss
Normal file → Executable file
@@ -1,38 +1,58 @@
|
||||
.pricing {
|
||||
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
|
||||
background: $background-violet url(../img/testimonials/pricing.png) no-repeat center / cover;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 75px;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.pricing__title {
|
||||
padding: 10px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrapper {
|
||||
padding: 40px 15px;
|
||||
height: 560px;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
padding: 0 2px;
|
||||
transition: $hover-duration;
|
||||
|
||||
.price {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
|
||||
& > .price__title {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
height: 470px;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
position: relative;
|
||||
margin-top: 110px;
|
||||
margin-bottom: 125px;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
height: 450px;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 75px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
height: 530px;
|
||||
|
||||
& > .price__title {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
transition: $hover-duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price__title {
|
||||
@@ -45,6 +65,14 @@
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
transition: $hover-duration;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.price__value {
|
||||
@@ -53,6 +81,14 @@
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $desktop) {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.price__period {
|
||||
@@ -75,25 +111,52 @@
|
||||
}
|
||||
|
||||
.price__description {
|
||||
padding: 0 15px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.price__rounded-button--purchase {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding: 10px 0;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
bottom: 35px;
|
||||
left: 20%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
width: 60%;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
font-size: 13px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 11px;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing__footer {
|
||||
|
||||
17
src/scss/_reviews.scss
Normal file → Executable file
17
src/scss/_reviews.scss
Normal file → Executable file
@@ -12,6 +12,14 @@
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.review__date {
|
||||
@@ -21,4 +29,13 @@
|
||||
font-weight: 500;
|
||||
color: $regular-text;
|
||||
text-align: center;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $small-phone) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
15
src/scss/_social.scss
Normal file → Executable file
15
src/scss/_social.scss
Normal file → Executable file
@@ -3,7 +3,11 @@
|
||||
padding-top: 50px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.social__stats {
|
||||
@@ -13,4 +17,13 @@
|
||||
font-size: 14px;
|
||||
color: $regular-text;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social__github,
|
||||
.social__twitter,
|
||||
.social__facebook {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
38
src/scss/_testimonials.scss
Normal file → Executable file
38
src/scss/_testimonials.scss
Normal file → Executable file
@@ -1,40 +1,60 @@
|
||||
.testimonials {
|
||||
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 center 100% / cover;
|
||||
min-width: 320px;
|
||||
|
||||
@media all and (max-width: $tablet) {
|
||||
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat center top;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonials__h1 {
|
||||
padding: 100px 0;
|
||||
padding: 100px 50px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.testimonials__row {
|
||||
padding-bottom: 100px;
|
||||
@media all and (max-width: $tablet) {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 170px;
|
||||
min-height: 180px;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@media all and (min-width: $phone) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.testimonial__logo {
|
||||
padding-bottom: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.testimonial__text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: white;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.testimonials__delimiter {
|
||||
|
||||
10
src/scss/_variables.scss
Normal file → Executable file
10
src/scss/_variables.scss
Normal file → Executable file
@@ -7,6 +7,8 @@ $light-text: #a291a5;
|
||||
$gray-text: #c8cbcf;
|
||||
$lightgray-text: #d3d1da;
|
||||
|
||||
$hero-background: #010005;
|
||||
|
||||
$background-light: #f4f4f4;
|
||||
$background-violet: #4a3b4e;
|
||||
|
||||
@@ -18,4 +20,10 @@ $hover-duration: 0.3s;
|
||||
|
||||
$github-color: #f3f3f3;
|
||||
$twitter-color: #26a6d1;
|
||||
$facebook-color: #3b5998;
|
||||
$facebook-color: #3b5998;
|
||||
|
||||
$small-phone: 350px;
|
||||
$phone: 576px;
|
||||
$tablet: 768px;
|
||||
$desktop: 992px;
|
||||
$desktop-xl: 1200px;
|
||||
@@ -3,6 +3,7 @@
|
||||
@import "global";
|
||||
@import "author";
|
||||
@import "navbar";
|
||||
@import "brand";
|
||||
@import "header";
|
||||
@import "download";
|
||||
@import "editor";
|
||||
@@ -14,4 +15,5 @@
|
||||
@import "pricing";
|
||||
@import "newsletter";
|
||||
@import "form";
|
||||
@import "news";
|
||||
@import "news";
|
||||
@import "footer";
|
||||
Reference in New Issue
Block a user