mirror of
https://github.com/LBRYFoundation/lbryorg.git
synced 2025-08-23 20:47:23 +00:00
feat: add a global parallx
This commit is contained in:
HarshKhandeparkar
parent
1455ac4a4f
commit
87dc517ce2
2 changed files with 198 additions and 139 deletions
300
index.html
300
index.html
|
|
@ -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,159 +19,180 @@
|
||||||
<!--/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"
|
||||||
<span class="navbar-toggler-icon"></span>
|
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
</button>
|
||||||
<div class="navbar-nav">
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||||
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
|
<div class="navbar-nav">
|
||||||
<a class="nav-item nav-link" href="#about">About</a>
|
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
|
||||||
<a class="nav-item nav-link" href="#part2">part2</a>
|
<a class="nav-item nav-link" href="#about">About</a>
|
||||||
<a class="nav-item nav-link" href="./branding">Branding</a>
|
<a class="nav-item nav-link" href="#part2">part2</a>
|
||||||
|
<a class="nav-item nav-link" href="./branding">Branding</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- /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 -->
|
||||||
|
<div class="jumbotron jumbotron-fluid bg-info text-white">
|
||||||
|
<div class="container text-sm-center pt-5">
|
||||||
|
<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>
|
||||||
|
<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 class="btn btn-light btn-lg" href="https://chat.lbry.com">join discord</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<!-- /jumbotron -->
|
||||||
<!-- /navbar -->
|
|
||||||
|
<div class="container pt-4">
|
||||||
<!-- jumbotron -->
|
<!-- about -->
|
||||||
<div class="jumbotron jumbotron-fluid bg-info text-white">
|
<div id="about" class="row">
|
||||||
<div class="container text-sm-center pt-5">
|
<div class="col-lg order-lg-2">
|
||||||
<h1 class="display-2"Ideas>Welcome to LBRY </h1>
|
<h3 class="mb-4">About LBRY Foundations</h3>
|
||||||
<p class="lead">LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY</p>
|
<!-- <img class="mb-4 img-fluid rounded d-none d-sm-block" src="./img/lbry-logo.png" alt="4"> -->
|
||||||
<div class="btn-group mt-4" role="group" aria-label="Callout buttons">
|
<p>The LBRY community invites everyone to join us in building a more free and open way to share content and
|
||||||
<a type="button" class="btn btn-primary btn-lg" href="https://lbry.com/get">Download LBRY</a>
|
information online.</p>
|
||||||
<a class="btn btn-light btn-lg" href="https://chat.lbry.com">join discord</a>
|
<p>The LBRY Foundation is a non-profit organization dedicated to the growth, development, and adoption of the
|
||||||
</div>
|
LBRY network in a way that the community of LBRYians decides themselves.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg order-lg-1">
|
||||||
|
<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>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 class="col-lg order-3">
|
||||||
|
<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>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>
|
||||||
|
<!-- /about -->
|
||||||
|
|
||||||
|
<!-- part2 -->
|
||||||
|
<h1 id="part2" class="display-4 text-center my-5 text-muted">lbryians</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card mb-3">
|
||||||
|
<!-- <img class="card-img-top" src="./img/1.png" alt="1"> -->
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Developer</h4>
|
||||||
|
<p class="card-text">developer developer developer developer developer developer developer</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card mb-3">
|
||||||
|
<!-- <img class="card-img-top" src="./img/2.png" alt="2"> -->
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Designer</h4>
|
||||||
|
<p class="card-text">designer designer designer designer designer designer designer designer</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card">
|
||||||
|
<!-- <img class="card-img-top" src="./img/3.png" alt="3"> -->
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title">Creator</h4>
|
||||||
|
<p class="card-text">creator creator creator creator creator creator creator creator creator</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /part2 -->
|
||||||
|
|
||||||
|
<div class="row py-4 text-muted">
|
||||||
|
<div class="col-md col-xl-5">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="col-md col-xl-5 ml-auto">
|
||||||
|
<p><strong>Stay up-to-date on LBRY Foundation</strong></p>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Email">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-primary" type="button">Sign up</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr /><!-- /signup form -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /jumbotron -->
|
<!-- /globalParallaxContent -->
|
||||||
|
</div>
|
||||||
<div class="container pt-4">
|
<!-- /globalParallax -->
|
||||||
<!-- about -->
|
|
||||||
<div id="about" class="row">
|
|
||||||
<div class="col-lg order-lg-2">
|
|
||||||
<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"> -->
|
|
||||||
<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 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 class="col-lg order-lg-1">
|
|
||||||
<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>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 class="col-lg order-3">
|
|
||||||
<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>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>
|
|
||||||
<!-- /about -->
|
|
||||||
|
|
||||||
<div class="parallax-window" data-parallax="scroll" data-image-src="./img/lbry_background_art.png"></div>
|
<!-- footer -->
|
||||||
|
<div class="container">
|
||||||
<!-- part2 -->
|
<div class="row py-3">
|
||||||
<h1 id="part2" class="display-4 text-center my-5 text-muted">lbryians</h1>
|
<div class="col-md-7">
|
||||||
<div class="row">
|
<ul class="nav">
|
||||||
<div class="col-md-6 col-lg-4">
|
<li class="nav-item">
|
||||||
<div class="card mb-3">
|
<a class="nav-link" href="#">Terms and Condition</a>
|
||||||
<!-- <img class="card-img-top" src="./img/1.png" alt="1"> -->
|
</li>
|
||||||
<div class="card-body">
|
<li class="nav-item">
|
||||||
<h4 class="card-title">Developer</h4>
|
<a class="nav-link" href="#">Privacy Policy</a>
|
||||||
<p class="card-text">developer developer developer developer developer developer developer</p>
|
</li>
|
||||||
</div>
|
<li class="nav-item">
|
||||||
</div>
|
<div class="btn-group dropup">
|
||||||
</div>
|
<button type="button" class="btn btn-outline-secondary">Other Sites</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
|
||||||
<div class="col-md-6 col-lg-4">
|
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
<div class="card mb-3">
|
<span class="sr-only">Toggle Dropdown</span>
|
||||||
<!-- <img class="card-img-top" src="./img/2.png" alt="2"> -->
|
</button>
|
||||||
<div class="card-body">
|
<div class="dropdown-menu">
|
||||||
<h4 class="card-title">Designer</h4>
|
<a class="dropdown-item" href="#">LBRY.com</a>
|
||||||
<p class="card-text">designer designer designer designer designer designer designer designer</p>
|
<a class="dropdown-item" href="#">LBRY.tech</a>
|
||||||
</div>
|
<a class="dropdown-item" href="#">LBRY.fund</a>
|
||||||
</div>
|
<a class="dropdown-item" href="#">LBRY.tv</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 col-lg-4">
|
|
||||||
<div class="card">
|
|
||||||
<!-- <img class="card-img-top" src="./img/3.png" alt="3"> -->
|
|
||||||
<div class="card-body">
|
|
||||||
<h4 class="card-title">Creator</h4>
|
|
||||||
<p class="card-text">creator creator creator creator creator creator creator creator creator</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /part2 -->
|
|
||||||
|
|
||||||
<div class="row py-4 text-muted">
|
|
||||||
<div class="col-md col-xl-5">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="col-md col-xl-5 ml-auto">
|
|
||||||
<p><strong>Stay up-to-date on LBRY Foundation</strong></p>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Email">
|
|
||||||
<span class="input-group-btn">
|
|
||||||
<button class="btn btn-primary" type="button">Sign up</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr><!-- /signup form -->
|
|
||||||
|
|
||||||
<!-- footer -->
|
|
||||||
<div class="row py-3">
|
|
||||||
<div class="col-md-7">
|
|
||||||
<ul class="nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Terms and Condition</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Privacy Policy</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<div class="btn-group dropup">
|
|
||||||
<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">
|
|
||||||
<span class="sr-only">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
<a class="dropdown-item" href="#">LBRY.com</a>
|
|
||||||
<a class="dropdown-item" href="#">LBRY.tech</a>
|
|
||||||
<a class="dropdown-item" href="#">LBRY.fund</a>
|
|
||||||
<a class="dropdown-item" href="#">LBRY.tv</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="col-md text-md-right">
|
</div>
|
||||||
<small>© 2020 LBRY.org & LBRY Foundation</small>
|
<div class="col-md text-md-right">
|
||||||
</div>
|
<small>© 2020 LBRY.org & LBRY Foundation</small>
|
||||||
</div><!-- /footer -->
|
</div>
|
||||||
|
</div>
|
||||||
</div><!-- /.container -->
|
</div>
|
||||||
|
<!-- /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>
|
||||||
|
|
@ -12,4 +12,41 @@
|
||||||
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue