339 lines
17 KiB
HTML
339 lines
17 KiB
HTML
<!-- DOCTYPE -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ForkIO</title>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="Bartlomiej Pluta">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Upskill frontend project">
|
|
<meta name="keywords" content="HTML,CSS,JavaScript">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
|
<!-- 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">
|
|
|
|
<!-- Slick.JS -->
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
|
|
|
|
<!-- Custom styles -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</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>
|
|
<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>
|
|
|
|
<header class="header">
|
|
<div>
|
|
<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>
|
|
</header>
|
|
<section 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 class="container">
|
|
<div class="editor__description">
|
|
<p class="editor__title">Revolutionary editor</p>
|
|
<div class="row">
|
|
<p class="editor__subtitle 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">
|
|
<div class="col-12">
|
|
<div class="editor__github">
|
|
<p class="editor__github-button">
|
|
<a class="github-button"
|
|
href="https://github.com/bartlomiej-pluta/forkio/subscription"
|
|
data-icon="octicon-eye" data-size="large" data-show-count="true"
|
|
aria-label="Watch bartlomiej-pluta/forkio on GitHub">Watch</a>
|
|
</p>
|
|
<p class="editor__github-button">
|
|
<a class="github-button"
|
|
href="https://github.com/bartlomiej-pluta/forkio"
|
|
data-icon="octicon-star" data-size="large" data-show-count="true"
|
|
aria-label="Star bartlomiej-pluta/forkio on GitHub">Star</a>
|
|
</p>
|
|
<p class="editor__github-button">
|
|
<a class="github-button"
|
|
href="https://github.com/bartlomiej-pluta/forkio/fork"
|
|
data-icon="octicon-repo-forked" data-size="large" data-show-count="true"
|
|
aria-label="Fork bartlomiej-pluta/forkio on GitHub">Fork</a>
|
|
</p>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="about">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="about__features col-6">
|
|
<div class="row feature">
|
|
<div class="col-3 feature__icon">
|
|
<img src="img/features/1.png"/>
|
|
</div>
|
|
<div class="col-9">
|
|
<p class="feature__title">
|
|
Created to Make The Web Better
|
|
</p>
|
|
<p class="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 feature__icon">
|
|
<img src="img/features/2.png"/>
|
|
</div>
|
|
<div class="col-9">
|
|
<p class="feature__title">
|
|
Incredibly Powerful Tool
|
|
</p>
|
|
<p class="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 feature__icon">
|
|
<img src="img/features/3.png"/>
|
|
</div>
|
|
<div class="col-9">
|
|
<p class="feature__title">
|
|
Experimental Stuff
|
|
</p>
|
|
<p class="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 feature__icon">
|
|
<img src="img/features/4.png"/>
|
|
</div>
|
|
<div class="col-9">
|
|
<p class="feature__title">
|
|
Created to Make The Web Better
|
|
</p>
|
|
<p class="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__title about__title--no-wrap"><Here is what you get></p>
|
|
<img src="img/features/editor.png" alt="Revolutionary editor">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="reviews container">
|
|
<div class="row justify-content-center">
|
|
<div class="reviews__content col-10">
|
|
<div class="review">
|
|
<div class="author">
|
|
<img class="avatar" src="http://i.pravatar.cc/100&img=1" alt="Steven Strange">
|
|
<div class="author__details">
|
|
<p class="author__name">Steven Strange</p>
|
|
<p class="nickname nickname--strong">DoctorS</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="review__content col-10">
|
|
<span class="nickname">Pixelbuddha</span> Suspendisse sodales sem est,
|
|
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat
|
|
eget
|
|
eros.
|
|
</div>
|
|
</div>
|
|
<div class="review__date">2 hours ago</div>
|
|
</div>
|
|
<div class="review">
|
|
<div class="author">
|
|
<img class="avatar" src="http://i.pravatar.cc/100&img=2" alt="Steven Strange">
|
|
<div class="author__details">
|
|
<p class="author__name">Aemiliana Alejo</p>
|
|
<p class="nickname nickname--strong">alejo</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="review__content col-10">
|
|
<span class="nickname">Pixelbuddha</span> Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
|
consequatur.
|
|
</div>
|
|
</div>
|
|
<div class="review__date">3 hours ago</div>
|
|
</div>
|
|
<div class="review">
|
|
<div class="author">
|
|
<img class="avatar" src="http://i.pravatar.cc/100&img=3" alt="Steven Strange">
|
|
<div class="author__details">
|
|
<p class="author__name">Melpomeni Étaín</p>
|
|
<p class="nickname nickname--strong">etain</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="review__content col-10">
|
|
<span class="nickname">Pixelbuddha</span> Nor again is there anyone who loves or pursues or
|
|
desires to obtain pain of itself.
|
|
</div>
|
|
</div>
|
|
<div class="review__date">4 hours ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section 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">
|
|
<span class="rect-button__icon fab fa-github"></span>
|
|
GitHub
|
|
</button>
|
|
<p class="social__stats">7 352 Followers</p>
|
|
</div>
|
|
<div>
|
|
<button 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>
|
|
</div>
|
|
<div>
|
|
<button 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section 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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<p class="testimonial__text">
|
|
Fusce pharetra erat id odio blandit, nec
|
|
pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="testimonials__delimiter col-8"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
|
|
integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html>
|