LBRYFoundation/lbryorg
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbryorg.git synced 2025-08-23 20:47:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add a global parallx

Browse source
This commit is contained in:
HarshKhandeparkar 2020-06-08 01:17:07 +05:30
parent 1455ac4a4f
commit 87dc517ce2
2 changed files with 198 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -18,12 +19,13 @@
<!--/CUSTOM CSS--> <!--/CUSTOM CSS-->
</head> </head>
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="100"> <body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
<!-- navbar --> <!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container"> <div class="container">
<span class="navbar-brand order-1 mr-0"><i class="fab fa-github"></i></span> <span class="navbar-brand order-1 mr-0"><i class="fab fa-github"></i></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
@ -38,10 +40,16 @@
</nav> </nav>
<!-- /navbar --> <!-- /navbar -->
<!-- globalParallax -->
<div class="parallax" id="global-parallax">
<img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
<!-- globalParallaxContent -->
<div class="parallax-content">
<!-- jumbotron --> <!-- jumbotron -->
<div class="jumbotron jumbotron-fluid bg-info text-white"> <div class="jumbotron jumbotron-fluid bg-info text-white">
<div class="container text-sm-center pt-5"> <div class="container text-sm-center pt-5">
<h1 class="display-2"Ideas>Welcome to LBRY </h1> <h1 class="display-2" Ideas>Welcome to LBRY </h1>
<p class="lead">LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY</p> <p class="lead">LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY</p>
<div class="btn-group mt-4" role="group" aria-label="Callout buttons"> <div class="btn-group mt-4" role="group" aria-label="Callout buttons">
<a type="button" class="btn btn-primary btn-lg" href="https://lbry.com/get">Download LBRY</a> <a type="button" class="btn btn-primary btn-lg" href="https://lbry.com/get">Download LBRY</a>
@ -57,26 +65,32 @@
<div class="col-lg order-lg-2"> <div class="col-lg order-lg-2">
<h3 class="mb-4">About LBRY Foundations</h3> <h3 class="mb-4">About LBRY Foundations</h3>
<!-- <img class="mb-4 img-fluid rounded d-none d-sm-block" src="./img/lbry-logo.png" alt="4"> --> <!-- <img class="mb-4 img-fluid rounded d-none d-sm-block" src="./img/lbry-logo.png" alt="4"> -->
<p>The LBRY community invites everyone to join us in building a more free and open way to share content and information online.</p> <p>The LBRY community invites everyone to join us in building a more free and open way to share content and
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the LBRY network in a way that the community of LBRYians decides themselves.</p> information online.</p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the
LBRY network in a way that the community of LBRYians decides themselves.</p>
</div> </div>
<div class="col-lg order-lg-1"> <div class="col-lg order-lg-1">
<h3 class="mb-4">Welcome to LBRY</h3> <h3 class="mb-4">Welcome to LBRY</h3>
<p>The LBRY community invites everyone to join us in building a more free and open way to share content and information online.</p> <p>The LBRY community invites everyone to join us in building a more free and open way to share content and
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p> information online.</p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the LBRY network in a way that the community of LBRYians decides themselves.</p> <p>Want to meet the international JavaScript community and share skills with some of the world's top experts,
hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the
LBRY network in a way that the community of LBRYians decides themselves.</p>
</div> </div>
<div class="col-lg order-3"> <div class="col-lg order-3">
<h3 class="mb-4">Welcome to LBRY</h3> <h3 class="mb-4">Welcome to LBRY</h3>
<p>The LBRY community invites everyone to join us in building a more free and open way to share content and information online.</p> <p>The LBRY community invites everyone to join us in building a more free and open way to share content and
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p> information online.</p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the LBRY network in a way that the community of LBRYians decides themselves.</p> <p>Want to meet the international JavaScript community and share skills with some of the world's top experts,
hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the
LBRY network in a way that the community of LBRYians decides themselves.</p>
</div> </div>
</div> </div>
<!-- /about --> <!-- /about -->
<div class="parallax-window" data-parallax="scroll" data-image-src="./img/lbry_background_art.png"></div>
<!-- part2 --> <!-- part2 -->
<h1 id="part2" class="display-4 text-center my-5 text-muted">lbryians</h1> <h1 id="part2" class="display-4 text-center my-5 text-muted">lbryians</h1>
<div class="row"> <div class="row">
@ -115,7 +129,8 @@
<div class="row py-4 text-muted"> <div class="row py-4 text-muted">
<div class="col-md col-xl-5"> <div class="col-md col-xl-5">
<p><strong>About Foundation</strong></p> <p><strong>About Foundation</strong></p>
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the LBRY network in a way that the community of LBRYians decides themselves.</p> <p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the
LBRY network in a way that the community of LBRYians decides themselves.</p>
</div> </div>
<div class="col-md col-xl-5 ml-auto"> <div class="col-md col-xl-5 ml-auto">
<p><strong>Stay up-to-date on LBRY Foundation</strong></p> <p><strong>Stay up-to-date on LBRY Foundation</strong></p>
@ -127,9 +142,16 @@
</div> </div>
</div> </div>
</div> </div>
<hr><!-- /signup form --> <hr /><!-- /signup form -->
</div>
</div>
<!-- /globalParallaxContent -->
</div>
<!-- /globalParallax -->
<!-- footer --> <!-- footer -->
<div class="container">
<div class="row py-3"> <div class="row py-3">
<div class="col-md-7"> <div class="col-md-7">
<ul class="nav"> <ul class="nav">
@ -142,7 +164,8 @@
<li class="nav-item"> <li class="nav-item">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-outline-secondary">Other Sites</button> <button type="button" class="btn btn-outline-secondary">Other Sites</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -158,19 +181,18 @@
<div class="col-md text-md-right"> <div class="col-md text-md-right">
<small>&copy; 2020 LBRY.org &amp; LBRY Foundation</small> <small>&copy; 2020 LBRY.org &amp; LBRY Foundation</small>
</div> </div>
</div><!-- /footer --> </div>
</div>
</div><!-- /.container --> <!-- /footer -->
<!-- JS DEPENDENCIES --> <!-- JS DEPENDENCIES -->
<script src="./lib/jquery/jquery-3.5.1.min.js" defer></script> <script src="./lib/jquery/jquery-3.5.1.min.js" defer></script>
<script src="./lib/bootstrap/js/bootstrap.bundle.min.js" defer></script> <script src="./lib/bootstrap/js/bootstrap.bundle.min.js" defer></script>
<script src="./lib/js/parallax.min.js" defer></script>
<!-- /JS DEPENDENCIES --> <!-- /JS DEPENDENCIES -->
<!--CUSTOM JS--> <!--CUSTOM JS-->
<script src="./lib/js/index.js" defer></script> <script src="./lib/js/index.js" defer></script>
<!--/CUSTOM JS--> <!--/CUSTOM JS-->
</body> </body>
</html> </html>

37
lib/css/index.css
View file

@ -13,3 +13,40 @@
body { body {
font-family: Oxygen; font-family: Oxygen;
} }
/* Parallax */
.parallax .parallax-img {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.parallax .parallax-content {
z-index: 100;
position: relative;
background-color: transparent !important;
}
.parallax .parallax-bg {
z-index: -2;
position: absolute;
height: 100%;
width: 100%;
}
.parallax {
overflow: hidden;
}
/* /Parallax */
#global-parallax .parallax-img {
width: 100%;
margin: 0;
}
#global-parallax {
/* width: 100%; */
margin: 0;
}