mirror of https://github.com/sayanarijit/xplr
Arijit Basu
2 years ago
committed by
Arijit Basu
parent
dfb4854f01
commit
a1d0c222a1
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@ -1,117 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/assets/icon/xplr64.png" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>xplr</title>
|
||||
<!-- ------------- SEO TAGS --------------------->
|
||||
<meta name="title" content="xplr" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://xplr.dev/" />
|
||||
<meta name="twitter:title" content="xplr" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://s3.gifyu.com/images/imaged284d8b830767ac4.png"
|
||||
/>
|
||||
<meta name="twitter:site" content="https://xplr.dev" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://xplr.dev" />
|
||||
<meta property="og:title" content="xplr" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://s3.gifyu.com/images/imaged284d8b830767ac4.png"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<meta itemprop="name" content="xplr" />
|
||||
<meta
|
||||
itemprop="description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://s3.gifyu.com/images/icon2194563908b29554.png"
|
||||
/>
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-page">
|
||||
<div class="para">
|
||||
<h1>xplr</h1>
|
||||
<p>
|
||||
<span style="font-size: 4rem">A</span> hackable, minimal, fast TUI
|
||||
file explorer
|
||||
</p>
|
||||
<br />
|
||||
<p><a href="/en/install.html">Try or Install</a></p>
|
||||
</div>
|
||||
<div class="main-video">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/Hk6sPhMBOLY"
|
||||
width="100%"
|
||||
height="480"
|
||||
frameborder="0"
|
||||
allowfullscreen=""
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="/en/">
|
||||
<div class="linkCad mrgL">
|
||||
<img
|
||||
src="/assets/homepage_icons/document_logo.png"
|
||||
alt=""
|
||||
width="35%"
|
||||
/>
|
||||
<p>Documentation</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/sayanarijit/xplr">
|
||||
<div class="linkCad mrgR">
|
||||
<img src="/assets/homepage_icons/pr_logo.png" alt="" width="40%" />
|
||||
<p>Source Code</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/sayanarijit/xplr/releases">
|
||||
<div class="linkCad mrgL">
|
||||
<img
|
||||
src="/assets/homepage_icons/release_logo.png"
|
||||
alt=""
|
||||
width="35%"
|
||||
/>
|
||||
<p>Releases</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://discord.com/invite/JmasSPCcz3">
|
||||
<div class="linkCad mrgR">
|
||||
<img src="/assets/homepage_icons/disc_logo.png" alt="" width="40%" />
|
||||
<p>Discord</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1 @@
|
||||
../../assets
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
../en/book
|
||||
@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<title>xplr - A hackable, minimal, fast TUI file explorer</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="xplr is a hackable, minimal, fast TUI file explorer "
|
||||
/>
|
||||
|
||||
<!--Inter UI font-->
|
||||
<link href="https://rsms.me/inter/inter-ui.css" rel="stylesheet" />
|
||||
|
||||
<!--vendors styles-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
|
||||
/>
|
||||
|
||||
<!-- Icons -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="126x128"
|
||||
href="/assets/icon/xplr128.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="64x64"
|
||||
href="/assets/icon/xplr64.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/assets/icon/xplr32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/assets/icon/xplr16.png"
|
||||
/>
|
||||
|
||||
<!-- Bootstrap CSS / Color Scheme -->
|
||||
<link rel="stylesheet" href="css/default.css" id="theme-color" />
|
||||
|
||||
<!-- ------------- SEO TAGS --------------------->
|
||||
<meta name="title" content="xplr" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://xplr.dev/" />
|
||||
<meta name="twitter:title" content="xplr" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://s3.gifyu.com/images/imaged284d8b830767ac4.png"
|
||||
/>
|
||||
<meta name="twitter:site" content="https://xplr.dev" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://xplr.dev" />
|
||||
<meta property="og:title" content="xplr" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://s3.gifyu.com/images/imaged284d8b830767ac4.png"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<meta itemprop="name" content="xplr" />
|
||||
<meta
|
||||
itemprop="description"
|
||||
content="A hackable, minimal, fast TUI file explorer"
|
||||
/>
|
||||
|
||||
<!-- Youtube Embed -->
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css"
|
||||
/>
|
||||
|
||||
<script
|
||||
defer="defer"
|
||||
src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"
|
||||
></script>
|
||||
|
||||
<!-- EthicalAds by "Read The Docs" folks -->
|
||||
<script
|
||||
async
|
||||
src="https://media.ethicalads.io/media/client/ethicalads.min.js"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--navigation-->
|
||||
<section>
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-md navbar-dark">
|
||||
<a class="navbar-brand heading-black" href="/">
|
||||
<img src="/assets/icon/xplr32.png" alt="xplr" />
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler navbar-toggler-right border-0"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span data-feather="grid"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link page-scroll"
|
||||
href="/en/introduction.html#features"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link page-scroll" href="/en">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link page-scroll" href="/en/community.html">
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link page-scroll"
|
||||
href="https://github.com/sayanarijit/xplr"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div
|
||||
class="dark flat"
|
||||
data-ea-publisher="xplrdev"
|
||||
data-ea-type="text"
|
||||
></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--hero header-->
|
||||
<section class="bg-hero" id="home">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-10 col-12 mx-auto my-auto text-center">
|
||||
<!--
|
||||
<h1 class="heading-black text-capitalize">xplr</h1>
|
||||
<p class="lead py-3">A hackable, minimal, fast TUI file explorer</p>
|
||||
|
||||
<a
|
||||
class="btn btn-primary d-inline-flex flex-row align-items-center"
|
||||
href="/en/install.html"
|
||||
>
|
||||
Try or Install
|
||||
<em class="ml-2" data-feather="arrow-right"></em>
|
||||
</a>
|
||||
-->
|
||||
|
||||
<h1 class="heading-black">xplr</h1>
|
||||
<p class="lead">A hackable, minimal, fast TUI file explorer</p>
|
||||
|
||||
<div id="QyJZzq0v7Z4" class="eleventy-plugin-youtube-embed pb-3">
|
||||
<lite-youtube
|
||||
videoid="Hk6sPhMBOLY"
|
||||
style="
|
||||
background-image: url('https://i.ytimg.com/vi/Hk6sPhMBOLY/hqdefault.jpg');
|
||||
"
|
||||
>
|
||||
<div class="lty-playbtn"></div>
|
||||
</lite-youtube>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="btn btn-primary d-inline-flex flex-row align-items-center py-3"
|
||||
href="/en/install.html"
|
||||
class="mb-3"
|
||||
>
|
||||
Try or Install
|
||||
<em class="ml-2" data-feather="arrow-right"></em>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--scroll to top-->
|
||||
<div class="scroll-top">
|
||||
<i class="fa fa-angle-up" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.7.3/feather.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
|
||||
<script src="js/scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,73 @@
|
||||
$(function () {
|
||||
|
||||
// init feather icons
|
||||
feather.replace();
|
||||
|
||||
// init tooltip & popovers
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('[data-toggle="popover"]').popover();
|
||||
|
||||
//page scroll
|
||||
$('a.page-scroll').bind('click', function (event) {
|
||||
var $anchor = $(this);
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $($anchor.attr('href')).offset().top - 20
|
||||
}, 1000);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// slick slider
|
||||
$('.slick-about').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
dots: true,
|
||||
arrows: false
|
||||
});
|
||||
|
||||
//toggle scroll menu
|
||||
var scrollTop = 0;
|
||||
$(window).scroll(function () {
|
||||
var scroll = $(window).scrollTop();
|
||||
//adjust menu background
|
||||
if (scroll > 80) {
|
||||
if (scroll > scrollTop) {
|
||||
$('.smart-scroll').addClass('scrolling').removeClass('up');
|
||||
} else {
|
||||
$('.smart-scroll').addClass('up');
|
||||
}
|
||||
} else {
|
||||
// remove if scroll = scrollTop
|
||||
$('.smart-scroll').removeClass('scrolling').removeClass('up');
|
||||
}
|
||||
|
||||
scrollTop = scroll;
|
||||
|
||||
// adjust scroll to top
|
||||
if (scroll >= 600) {
|
||||
$('.scroll-top').addClass('active');
|
||||
} else {
|
||||
$('.scroll-top').removeClass('active');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// scroll top top
|
||||
$('.scroll-top').click(function () {
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
/**Theme switcher - DEMO PURPOSE ONLY */
|
||||
$('.switcher-trigger').click(function () {
|
||||
$('.switcher-wrap').toggleClass('active');
|
||||
});
|
||||
$('.color-switcher ul li').click(function () {
|
||||
var color = $(this).attr('data-color');
|
||||
$('#theme-color').attr("href", "css/" + color + ".css");
|
||||
$('.color-switcher ul li').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,561 @@
|
||||
/*!
|
||||
* Created by Kroplet (https://www.kroplet.com)
|
||||
* The easiest way to create Bootstrap 4 themes.
|
||||
*/
|
||||
|
||||
/*****************
|
||||
Custom CSS
|
||||
*****************/
|
||||
body {
|
||||
border-color: $black;
|
||||
}
|
||||
.small-xl {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.img-faded {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.font-weight-medium {
|
||||
font-weight: 600;
|
||||
}
|
||||
.heading-black {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* Box shadow */
|
||||
.btn {
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.btn-#{$color} {
|
||||
box-shadow: 0 8px 16px rgba($value, 0.3);
|
||||
transition: all 0.2s ease-out;
|
||||
&:hover {
|
||||
box-shadow: 0 8px 20px rgba($value, 0.35);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Navbar*/
|
||||
.navbar {
|
||||
&.navbar-transparent {
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
&.navbar-transparent {
|
||||
background-color: rgba($black, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: $primary;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item {
|
||||
margin: 0 0.7rem;
|
||||
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-angle {
|
||||
position: relative;
|
||||
border-color: inherit;
|
||||
background: $black;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
border: 0 solid transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&.top-left:before,
|
||||
&.top-right:before {
|
||||
top: 0;
|
||||
border-left-width: 100vw;
|
||||
}
|
||||
|
||||
&.bottom-left:after,
|
||||
&.bottom-right:after {
|
||||
bottom: 0;
|
||||
border-right-width: 100vw;
|
||||
}
|
||||
|
||||
&.bottom-left:after {
|
||||
border-right-color: inherit;
|
||||
}
|
||||
|
||||
&.bottom-right:after {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
&.top-left:before {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
|
||||
&.top-right:before {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up('lg') {
|
||||
&.bottom-right:after,
|
||||
&.top-right:before {
|
||||
border-bottom-width: 2rem;
|
||||
}
|
||||
&.bottom-left:after,
|
||||
&.top-left:before {
|
||||
border-top-width: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
&.bottom-right:after,
|
||||
&.top-right:before {
|
||||
border-bottom-width: 1rem;
|
||||
}
|
||||
&.bottom-left:after,
|
||||
&.top-left:before {
|
||||
border-top-width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*smart scrolling*/
|
||||
.smart-scroll {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1020;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease-out;
|
||||
|
||||
&.scrolling {
|
||||
transform: translateY(-100%);
|
||||
|
||||
&.up {
|
||||
background-color: rgba($black, 0.9);
|
||||
transform: translateY(0);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**dividers */
|
||||
.divider {
|
||||
position: relative;
|
||||
|
||||
&.top-divider:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: $gray-900;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($primary, 0.1) 0,
|
||||
$gray-900 50%,
|
||||
rgba($primary, 0.1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&.bottom-divider:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: $gray-900;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba($primary, 0.24) 0,
|
||||
$gray-900 50%,
|
||||
rgba($primary, 0.24) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*vertical heights */
|
||||
.vh-100 {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.vh-sm-100 {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.vh-md-100 {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-hero {
|
||||
background-color: $black;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg %3E%3Ccircle fill='#{$black}' cx='400' cy='400' r='600'/%3E%3Ccircle fill='#{darken($primary,40%)}' cx='400' cy='400' r='500'/%3E%3Ccircle fill='#{darken($primary,30%)}' cx='400' cy='400' r='400'/%3E%3Ccircle fill='#{darken($primary,20%)}' cx='400' cy='400' r='300'/%3E%3Ccircle fill='#{darken($primary,10%)}' cx='400' cy='400' r='200'/%3E%3Ccircle fill='#{$primary}' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
|
||||
/* background by SVGBackgrounds.com */
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: '';
|
||||
background-color: rgba($black, 0.7);
|
||||
}
|
||||
|
||||
.container {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/*features boxes*/
|
||||
.feature-boxes {
|
||||
text-align: center;
|
||||
|
||||
.box {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*features-list */
|
||||
.features-list {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.75rem;
|
||||
font-size: 1.05rem;
|
||||
padding-left: 1.75rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:before {
|
||||
position: relative;
|
||||
font-family: FontAwesome;
|
||||
font-size: 14px;
|
||||
content: '\f10c';
|
||||
color: $primary;
|
||||
margin: 0 0.75rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Pricing tables*/
|
||||
.pricing-table {
|
||||
.pricing-list {
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: all 0.25s ease-out;
|
||||
text-align: center;
|
||||
|
||||
.card-body {
|
||||
padding: 2.25rem 2rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**slick slider */
|
||||
.slick-dots {
|
||||
top: -4rem;
|
||||
|
||||
li {
|
||||
button::before {
|
||||
font-size: 0.75rem !important;
|
||||
line-height: 3.5rem !important;
|
||||
}
|
||||
|
||||
button::before,
|
||||
&.slick-active button:before {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next:before,
|
||||
.slick-prev:before {
|
||||
color: rgba($primary, 0.2);
|
||||
}
|
||||
|
||||
.slick-next:hover:before,
|
||||
.slick-prev:hover:before {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
footer {
|
||||
ul > li {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba($white, 0.7);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease-out;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.9);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
/*social icons*/
|
||||
.social {
|
||||
a {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: transparent;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: gray-100;
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
color: $black;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.social-sm a {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
&.social-rounded a {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*scroll to top */
|
||||
.scroll-top {
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
line-height: 40px;
|
||||
right: -100px;
|
||||
color: $white;
|
||||
background-color: rgba($primary, 0.5);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($primary, 1);
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon Boxes */
|
||||
.icon-box {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-color: $white;
|
||||
margin: 1rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.box-#{$color} {
|
||||
color: $value;
|
||||
background-color: rgba($value, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
|
||||
&.small {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
&.small-xs {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*all themes colors*/
|
||||
.bg-black {
|
||||
background-color: $black;
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: $blue;
|
||||
}
|
||||
.bg-indigo {
|
||||
background-color: $indigo;
|
||||
}
|
||||
.bg-purple {
|
||||
background-color: $purple;
|
||||
}
|
||||
.bg-pink {
|
||||
background-color: $pink;
|
||||
}
|
||||
.bg-red {
|
||||
background-color: $red;
|
||||
}
|
||||
.bg-orange {
|
||||
background-color: $orange;
|
||||
}
|
||||
.bg-yellow {
|
||||
background-color: $yellow;
|
||||
}
|
||||
.bg-green {
|
||||
background-color: $green;
|
||||
}
|
||||
.bg-teal {
|
||||
background-color: $teal;
|
||||
}
|
||||
.bg-cyan {
|
||||
background-color: $cyan;
|
||||
}
|
||||
|
||||
/*theme switcher*/
|
||||
.switcher-wrap {
|
||||
position: fixed;
|
||||
top: 250px;
|
||||
width: 250px;
|
||||
background: $gray-900;
|
||||
color: $body-color;
|
||||
z-index: 100;
|
||||
padding: 20px;
|
||||
left: -250px;
|
||||
transition: 0.3s;
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
a {
|
||||
color: $body-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-switcher ul li {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
&.active {
|
||||
border: 3px solid $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.switcher-trigger {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $gray-900;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: rgba($primary, 0.5);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.switcher-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ea-text {
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,151 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #2d3436;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-left: 5px;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 5rem;
|
||||
padding-top: 2vh;
|
||||
text-align: center;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.main-page {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background-color: #dfe6e9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.para {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 2rem;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.para .more a {
|
||||
font-size: 1.5rem;
|
||||
color: #636e72;
|
||||
}
|
||||
|
||||
.main-video {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-video img {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 2rem;
|
||||
margin: 5rem 0;
|
||||
}
|
||||
|
||||
.links .linkCad {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40vh;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
|
||||
color: #2d3436;
|
||||
font-family: sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.links .linkCad:hover {
|
||||
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.links a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links .linkCad p {
|
||||
padding-top: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mrgL {
|
||||
margin-left: 60%;
|
||||
}
|
||||
|
||||
.mrgR {
|
||||
margin-right: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.mrgL {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.mrgR {
|
||||
margin-right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.mrgL {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.mrgR {
|
||||
margin-right: 40%;
|
||||
}
|
||||
.main-page {
|
||||
display: block;
|
||||
}
|
||||
.para {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.mrgL {
|
||||
margin-left: 30%;
|
||||
}
|
||||
.mrgR {
|
||||
margin-right: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.mrgL {
|
||||
margin-left: 15%;
|
||||
}
|
||||
.mrgR {
|
||||
margin-right: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.mrgL {
|
||||
margin-left: 0%;
|
||||
}
|
||||
.mrgR {
|
||||
margin-right: 0%;
|
||||
}
|
||||
.links {
|
||||
display: block;
|
||||
}
|
||||
.links {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.linkCad {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue