ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:25:11 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Scroll effects for hero section

Browse source
This commit is contained in:
Thomas Smith 2022-09-15 12:23:35 -04:00
parent e1b6f0b031
commit e5031d0edd
3 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/layouts/index.html
View file

@ -11,7 +11,7 @@
width:300px;
right: 225px;
top:300px;
z-index:-2;
z-index: 0;
}
#gen-art-2{
@ -19,13 +19,39 @@
width:225px;
right: 375px;
top:600px;
z-index:-1;
z-index: 0;
}
#hero-grid-system{
position:absolute;
width:100%;
z-index: -3;
margin-top:-5px;
}
.hero-section{
background-image: url("/Images/x-large-grid-hero.svg");
background-attachment: fixed;
background-position: center-top;
background-repeat: repeat;
background-size: contain;
}
.hero-container{
position:relative;
z-index: 2;
}
.full-width-cta-container{
position:relative;
z-index: 2;
}
</style>
<img src="/Images/gen-art-1.png" alt="gen-art-1" class="gen-art" id="gen-art-1">
<img src="/Images/gen-art-2.png" alt="gen-art-2" class="gen-art" id="gen-art-2">
<!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">-->
<div class="container hero-container">
<div class="row">
<div class="col">
@ -38,7 +64,9 @@
</div>
</div>
</div>
<div class="full-width-cta-container">
{{- partial "full-width-cta.html" . -}}
</div>
</section>
<!-- Teal Impact Section -->
@ -61,7 +89,7 @@
<!-- Package Section: Before -->
<section class="black-bg">
<section>
<div class="container package_before">
<div class="row">
<div class="col">
@ -92,6 +120,7 @@
border-left: 2px solid #949494;
border-right: 2px solid #949494;
height: 100%;
padding: 25px;
}
.package-row{
@ -172,8 +201,8 @@
<section>
<hr>
<div class="container">
<div class="row">
<div class="col m-5">
<div class="row" style="margin-bottom: 20px;">
<div class="col" style="margin: 150px 0px;">
<h3 class="text-center">Stay tuned for our full launch.</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <a>Discord Community</a>.</p>
</div>

2
src/layouts/partials/detail-btn.html
View file

@ -8,7 +8,7 @@
padding-top: 5px;
text-decoration: none;
text-transform: uppercase;
width: 35%;
width: 40%;
height: 40px;
transition: 0.1s linear;
}

8
src/static/css/style.css
View file

@ -3,8 +3,9 @@
body{
background-color: #1a1a1a;
max-width: 1920px;
/*
background-image: url("/Images/xl-grid-quarter-opacity.svg");
background-size: contain;
background-size: contain;*/
}
/*
@ -205,7 +206,8 @@ li{
h3{
font-size: 80px;
line-height: 80px;
margin-bottom: 75px;
margin-bottom: 45px;
margin-top: 25px;
}
h4{
@ -252,6 +254,8 @@ hr{
top:200px;
}
.package_before{
}