Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
a290809750 | ||
|
|
a02b17a51b | ||
|
|
b60fe45d49 | ||
|
|
83763013b8 | ||
|
|
1661de16a9 | ||
|
|
1e01ceae3a | ||
|
|
dee7647f13 | ||
|
|
ac9d30253c | ||
|
|
2a10237171 | ||
|
|
f29c45d28b | ||
|
|
09d7258400 | ||
|
|
815d8ba7d3 | ||
|
|
92016ebdc5 | ||
|
|
fc4b091d2f | ||
|
|
0902ed2bc1 | ||
|
|
4bda64b9f7 | ||
|
|
4bb13d82c6 | ||
|
|
251436500c | ||
|
|
beb1929445 |
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 |
277
src/index.html
277
src/index.html
@@ -28,34 +28,36 @@
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="navbar__content__button rounded-button rounded-button--strong">Buy now</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div>
|
||||
@@ -64,13 +66,13 @@
|
||||
<p class="header__description">V. 2.8 for Mac and Windows</p>
|
||||
</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 +105,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 +130,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 +145,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 +160,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 +176,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,8 +239,8 @@
|
||||
</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>
|
||||
@@ -263,8 +266,8 @@
|
||||
</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">
|
||||
@@ -322,8 +325,8 @@
|
||||
<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">
|
||||
@@ -381,14 +384,168 @@
|
||||
<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
|
||||
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>
|
||||
</section>
|
||||
</div>
|
||||
<div class="newsletter">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-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="col-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="col-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-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-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-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-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 -->
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
.about {
|
||||
background-color: $background-light;
|
||||
padding: 75px 0 0 30px;
|
||||
height: 710px;
|
||||
|
||||
@media all and (max-width: $desktop-xl) {
|
||||
.about {
|
||||
padding: 75px 0 0 30px;
|
||||
height: 710px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about__title {
|
||||
@@ -13,4 +18,23 @@
|
||||
&--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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
22
src/scss/_brand.scss
Normal file
22
src/scss/_brand.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.brand {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.brand__logo {
|
||||
height: 45px;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-family: Lato, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&--emph {
|
||||
color: $primary;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,11 @@
|
||||
font-size: 21px;
|
||||
padding: 15px 60px;
|
||||
}
|
||||
|
||||
&--uppercase {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.rect-button {
|
||||
@@ -76,6 +81,20 @@
|
||||
&--fixed-width {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
background-color: $background-light;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: $primary;
|
||||
transition: $hover-duration;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background-light, $hover-threshold);
|
||||
transition: $hover-duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rect-button__icon {
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
.download {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.feature__icon {
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
|
||||
91
src/scss/_footer.scss
Normal file
91
src/scss/_footer.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
.footer {
|
||||
margin-top: 65px;
|
||||
padding-top: 65px;
|
||||
border-top: solid 1px $background-light;
|
||||
margin-bottom: 95px;
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/scss/_form.scss
Normal file
29
src/scss/_form.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.oneline__form {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.oneline__form__component--growing {
|
||||
width: 100%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.oneline__form__component--fixed {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.header {
|
||||
background: black url(../img/header/img.png) no-repeat 50% 30% / cover;
|
||||
height: 900px;
|
||||
background: black url(../img/header/img.png) no-repeat center 120px/ cover;
|
||||
height: 100vh;
|
||||
padding-top: 110px;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,13 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: $phone) {
|
||||
.header__subtitle {
|
||||
font-size: 24px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.header__description {
|
||||
margin-top: 20px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
|
||||
@@ -1,40 +1,42 @@
|
||||
$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;
|
||||
}
|
||||
|
||||
.navbar--shrink {
|
||||
height: 50px;
|
||||
transition: height $shrinking-duration;
|
||||
}
|
||||
|
||||
.navbar__header {
|
||||
.navbar__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 45px;
|
||||
margin-right: 17px;
|
||||
.navbar__content__header {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
font-family: Lato, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.navbar__content__toggler {
|
||||
order: 4;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navbar__brand--emph {
|
||||
color: $primary;
|
||||
font-style: normal;
|
||||
.navbar__content__body {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.navbar__content__button {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
|
||||
44
src/scss/_news.scss
Normal file
44
src/scss/_news.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.news {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
15
src/scss/_newsletter.scss
Normal file
15
src/scss/_newsletter.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.newsletter {
|
||||
padding: 55px 0;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: $primary-dark;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.pricing {
|
||||
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.pricing__title {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
padding-top: 50px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.social__stats {
|
||||
|
||||
@@ -4,6 +4,8 @@ $primary-light: #a599c8;
|
||||
$regular-text: #848e97;
|
||||
$dark-text: #323232;
|
||||
$light-text: #a291a5;
|
||||
$gray-text: #c8cbcf;
|
||||
$lightgray-text: #d3d1da;
|
||||
|
||||
$background-light: #f4f4f4;
|
||||
$background-violet: #4a3b4e;
|
||||
@@ -16,4 +18,9 @@ $hover-duration: 0.3s;
|
||||
|
||||
$github-color: #f3f3f3;
|
||||
$twitter-color: #26a6d1;
|
||||
$facebook-color: #3b5998;
|
||||
$facebook-color: #3b5998;
|
||||
|
||||
$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";
|
||||
@@ -11,4 +12,8 @@
|
||||
@import "reviews";
|
||||
@import "social";
|
||||
@import "testimonials";
|
||||
@import "pricing";
|
||||
@import "pricing";
|
||||
@import "newsletter";
|
||||
@import "form";
|
||||
@import "news";
|
||||
@import "footer";
|
||||
Reference in New Issue
Block a user