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>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -18,159 +19,180 @@
|
|||
<!--/CUSTOM CSS-->
|
||||
</head>
|
||||
|
||||
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
|
||||
<!-- navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
||||
<div class="container">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#about">About</a>
|
||||
<a class="nav-item nav-link" href="#part2">part2</a>
|
||||
<a class="nav-item nav-link" href="./branding">Branding</a>
|
||||
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
|
||||
<!-- navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
||||
<div class="container">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#about">About</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>
|
||||
</nav>
|
||||
<!-- /navbar -->
|
||||
|
||||
<!-- 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>
|
||||
<!-- /jumbotron -->
|
||||
|
||||
<div class="container pt-4">
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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>
|
||||
<!-- /jumbotron -->
|
||||
|
||||
<div class="container pt-4">
|
||||
<!-- 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 -->
|
||||
<!-- /globalParallaxContent -->
|
||||
</div>
|
||||
<!-- /globalParallax -->
|
||||
|
||||
<div class="parallax-window" data-parallax="scroll" data-image-src="./img/lbry_background_art.png"></div>
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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>
|
||||
<!-- footer -->
|
||||
<div class="container">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md text-md-right">
|
||||
<small>© 2020 LBRY.org & LBRY Foundation</small>
|
||||
</div>
|
||||
</div><!-- /footer -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md text-md-right">
|
||||
<small>© 2020 LBRY.org & LBRY Foundation</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /footer -->
|
||||
|
||||
|
||||
<!-- JS DEPENDENCIES -->
|
||||
<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/js/parallax.min.js" defer></script>
|
||||
<!-- /JS DEPENDENCIES -->
|
||||
|
||||
<!--CUSTOM JS-->
|
||||
<script src="./lib/js/index.js" defer></script>
|
||||
<!--/CUSTOM JS-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -12,4 +12,41 @@
|
|||
|
||||
body {
|
||||
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