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

Create Revolutionary Editor and Here is what you get sections

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-19 16:43:42 +01:00
parent 9126444031
commit da1d79479f
8 changed files with 165 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/img/features/editor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/img/features/github_buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

92
src/index.html
View File

@@ -14,6 +14,7 @@
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
@@ -65,6 +66,97 @@
</a>
<p class="download__description">Unlimited 30-Days trial period</p>
</section>
<section class="editor">
<div class="container">
<div class="editor__description">
<p class="editor__h1">Revolutionary editor</p>
<div class="row">
<p class="editor__h2 col-10">
Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate dignissim. Sed
id
metus id quam auctor molestie eget ut augue.
</p>
</div>
<div class="row">
<p class="col-12">
<img class="editor__github" src="img/features/github_buttons.png" alt="GitHub buttons">
</p>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<div class="row">
<div class="about__features col-6">
<div class="row about__feature">
<div class="col-3 about__feature-icon">
<img src="img/features/1.png"/>
</div>
<div class="col-9">
<p class="about__feature-title">
Created to Make The Web Better
</p>
<p class="about__feature-description">
Aenean cursus imperdiet nisl id fermentum. Aliquam pharetra dui laoreet vulputate
dignissim.
Sed id metus id quam auctor molestie eget ut augue.
</p>
</div>
</div>
<div class="row about__feature">
<div class="col-3 about__feature-icon">
<img src="img/features/2.png"/>
</div>
<div class="col-9">
<p class="about__feature-title">
Incredibly Powerful Tool
</p>
<p class="about__feature-description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="row about__feature">
<div class="col-3 about__feature-icon">
<img src="img/features/3.png"/>
</div>
<div class="col-9">
<p class="about__feature-title">
Experimental Stuff
</p>
<p class="about__feature-description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="row about__feature">
<div class="col-3 about__feature-icon">
<img src="img/features/4.png"/>
</div>
<div class="col-9">
<p class="about__feature-title">
Created to Make The Web Better
</p>
<p class="about__feature-description">
Maecenas eu dictum felis, a dignissim nibh. Mauris rhoncus felis odio, ut volutpat
massa
placerat ac. Curabitur dapibus iaculis mi gravida luctus. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
<div class="about__what-you-get col-6">
<p class="about__h1 about__h1--no-wrap">&lt;Here is what you get&gt;</p>
<img src="img/features/editor.png" alt="Revolutionary editor">
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript -->

39
src/scss/_about.scss Normal file
View File

@@ -0,0 +1,39 @@
.about {
background-color: $background-light;
padding: 75px 0 0 30px;
height: 710px;
}
.about__feature {
margin: 20px 0 0 10px;
}
.about__feature-icon {
text-align: center;
}
.about__feature-title {
margin-bottom: 10px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
color: $dark-text;
}
.about__feature-description {
font-family: Montserrat, sans-serif;
font-size: 14px;
color: $regular-text;
}
.about__h1 {
font-family: Montserrat, sans-serif;
font-weight: bold;
font-size: 48px;
color: $primary;
}
.about__h1--no-wrap {
white-space: nowrap;
}

24
src/scss/_editor.scss Normal file
View File

@@ -0,0 +1,24 @@
.editor__description {
text-align: center;
}
.editor__h1 {
margin-top: 60px;
font-family: Montserrat, sans-serif;
font-size: 54px;
font-weight: bold;
text-transform: uppercase;
color: $primary-dark;
}
.editor__h2 {
margin: 0 auto;
font-family: Source Sans Pro, sans-serif;
font-size: 21px;
font-weight: 400;
color: $dark-text;
}
.editor__github {
margin: 40px;
}

3
src/scss/_global.scss Normal file
View File

@@ -0,0 +1,3 @@
body {
overflow-x: hidden;
}

3
src/scss/_variables.scss
View File

@@ -2,6 +2,9 @@ $primary: #8d81ac;
$primary-dark: #635c73;
$primary-light: #a599c8;
$regular-text: #848e97;
$dark-text: #323232;
$background-light: #f4f4f4;
$hover-threshold: 20%;
$hover-duration: 0.3s;

5
src/scss/style.scss
View File

@@ -1,5 +1,8 @@
@import "variables";
@import "buttons";
@import "global";
@import "navbar";
@import "header";
@import "download";
@import "download";
@import "editor";
@import "about";