Compare commits
55 Commits
testimonia
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
4002303538 | ||
|
|
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 | ||
|
|
0902ed2bc1 | ||
|
|
4bda64b9f7 | ||
|
|
4bb13d82c6 | ||
|
|
251436500c | ||
|
|
beb1929445 | ||
|
|
06c9f15746 | ||
|
|
a5bdf1fcf6 | ||
|
|
d8ff782ad9 | ||
|
|
d3eb3b7ec3 | ||
|
|
7985979bc2 |
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 |
411
src/index.html
Normal file → Executable file
411
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,20 +109,21 @@
|
||||
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
</div>
|
||||
</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>
|
||||
@@ -127,11 +134,11 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row about__feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/2.png"/>
|
||||
<div class="row feature">
|
||||
<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>
|
||||
@@ -142,11 +149,11 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row about__feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/3.png"/>
|
||||
<div class="row feature">
|
||||
<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>
|
||||
@@ -157,11 +164,11 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row about__feature">
|
||||
<div class="col-3 feature__icon">
|
||||
<img src="img/features/4.png"/>
|
||||
<div class="row feature">
|
||||
<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>
|
||||
@@ -173,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">
|
||||
@@ -236,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.
|
||||
@@ -322,7 +342,228 @@
|
||||
<div class="testimonials__delimiter col-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<p class="pricing__title">Fork Subscription Pricing</p>
|
||||
<div class="container">
|
||||
<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>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Personal License</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Professional License<br/>Email Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">1-12 Team Members<br/>Phone Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p class="price__period">Per month</p>
|
||||
<hr class="price__splitter">
|
||||
<p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
|
||||
<a href="#" class="rounded-button price__rounded-button--purchase">
|
||||
Purchase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<p class="pricing__footer">
|
||||
Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae aliquet id,
|
||||
imperdiet quis
|
||||
nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque
|
||||
penatibus
|
||||
et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="newsletter">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-12 col-xl-6 newsletter__title">
|
||||
Subscribe to our newsletter
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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>
|
||||
</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>
|
||||
</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
|
||||
</p>
|
||||
</div>
|
||||
<button class="rect-button rect-button--small">Go to Release Log</button>
|
||||
</div>
|
||||
<div class="news__extensions col-12 col-sm-4">
|
||||
<p class="news__title">
|
||||
Popular Extensions
|
||||
</p>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Custom Themes 1.1</a>
|
||||
<p class="news-entry__content">
|
||||
Etiam viverra vulputate diam, pulvinar cursus augue egestas ullamcorper.
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Filter Forge</a>
|
||||
<p class="news-entry__content">
|
||||
Nulla purus quam, pulvinar sed et, feugiat maximus velit.
|
||||
</p>
|
||||
</div>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Renamy</a>
|
||||
<p class="news-entry__content">
|
||||
Vivamus consectetur suscipit elit, ut lacinia diam elementum et.
|
||||
</p>
|
||||
</div>
|
||||
<button class="rect-button rect-button--small">Go to Marketplace</button>
|
||||
</div>
|
||||
<div class="news__blog col-12 col-sm-4">
|
||||
<p class="news__title">
|
||||
New From the Blog
|
||||
</p>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Morbi imperdiet, leo in interdum pretium.</a>
|
||||
<p class="news-entry__content">
|
||||
February 18, 2015
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<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>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Suspendisse egestas vulputate luctus.</a>
|
||||
<p class="news-entry__content">
|
||||
February 6, 2015
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<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>
|
||||
</div>
|
||||
<div class="news-entry">
|
||||
<a href="#" class="news-entry__title">Phasellus in augue risus.</a>
|
||||
<p class="news-entry__content">
|
||||
January 23, 2015
|
||||
</p>
|
||||
</div>
|
||||
<button class="rect-button rect-button--small">Go to Blog</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
72
src/scss/_buttons.scss
Normal file → Executable file
72
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,15 @@
|
||||
@extend .rounded-button--strong;
|
||||
font-size: 21px;
|
||||
padding: 15px 60px;
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--uppercase {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,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 {
|
||||
@@ -52,6 +79,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: darken($github-color, $hover-threshold);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,6 +89,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($twitter-color, $hover-threshold);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,14 +99,57 @@
|
||||
|
||||
&: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 {
|
||||
background-color: $background-light;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/scss/_form.scss
Executable file
52
src/scss/_form.scss
Executable file
@@ -0,0 +1,52 @@
|
||||
.textfield {
|
||||
padding: 7px 25px;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oneline__form {
|
||||
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%;
|
||||
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 {
|
||||
|
||||
58
src/scss/_news.scss
Executable file
58
src/scss/_news.scss
Executable file
@@ -0,0 +1,58 @@
|
||||
.news {
|
||||
padding-top: 70px;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.news__title {
|
||||
margin-bottom: 50px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
color: $lightgray-text;
|
||||
}
|
||||
|
||||
.news-entry {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.news-entry__brief {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
color: $dark-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.news-entry__title {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
color: darken($primary, $hover-threshold);
|
||||
transition: $hover-duration;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.news-entry__content {
|
||||
margin-top: 15px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
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;
|
||||
}
|
||||
}
|
||||
35
src/scss/_newsletter.scss
Executable file
35
src/scss/_newsletter.scss
Executable file
@@ -0,0 +1,35 @@
|
||||
.newsletter {
|
||||
padding: 55px 0;
|
||||
background-color: #f4f4f4;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
168
src/scss/_pricing.scss
Executable file
168
src/scss/_pricing.scss
Executable file
@@ -0,0 +1,168 @@
|
||||
.pricing {
|
||||
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;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
transition: $hover-duration;
|
||||
}
|
||||
|
||||
.price__title {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
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 {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 60px;
|
||||
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 {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
opacity: 0.3;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price__splitter {
|
||||
margin: 30px auto;
|
||||
color: $primary;
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.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: 10px 0;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
bottom: 35px;
|
||||
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 {
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $light-text;
|
||||
text-align: center;
|
||||
}
|
||||
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 {
|
||||
|
||||
13
src/scss/_variables.scss
Normal file → Executable file
13
src/scss/_variables.scss
Normal file → Executable file
@@ -3,6 +3,11 @@ $primary-dark: #635c73;
|
||||
$primary-light: #a599c8;
|
||||
$regular-text: #848e97;
|
||||
$dark-text: #323232;
|
||||
$light-text: #a291a5;
|
||||
$gray-text: #c8cbcf;
|
||||
$lightgray-text: #d3d1da;
|
||||
|
||||
$hero-background: #010005;
|
||||
|
||||
$background-light: #f4f4f4;
|
||||
$background-violet: #4a3b4e;
|
||||
@@ -15,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";
|
||||
@@ -10,4 +11,9 @@
|
||||
@import "feature";
|
||||
@import "reviews";
|
||||
@import "social";
|
||||
@import "testimonials";
|
||||
@import "testimonials";
|
||||
@import "pricing";
|
||||
@import "newsletter";
|
||||
@import "form";
|
||||
@import "news";
|
||||
@import "footer";
|
||||
Reference in New Issue
Block a user