ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 04:35:06 +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

41
src/layouts/index.html
View file

@ -11,7 +11,7 @@
width:300px; width:300px;
right: 225px; right: 225px;
top:300px; top:300px;
z-index:-2; z-index: 0;
} }
#gen-art-2{ #gen-art-2{
@ -19,13 +19,39 @@
width:225px; width:225px;
right: 375px; right: 375px;
top:600px; 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> </style>
<img src="/Images/gen-art-1.png" alt="gen-art-1" class="gen-art" id="gen-art-1"> <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/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="container hero-container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -38,7 +64,9 @@
</div> </div>
</div> </div>
</div> </div>
{{- partial "full-width-cta.html" . -}} <div class="full-width-cta-container">
{{- partial "full-width-cta.html" . -}}
</div>
</section> </section>
<!-- Teal Impact Section --> <!-- Teal Impact Section -->
@ -61,7 +89,7 @@
<!-- Package Section: Before --> <!-- Package Section: Before -->
<section class="black-bg"> <section>
<div class="container package_before"> <div class="container package_before">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -92,6 +120,7 @@
border-left: 2px solid #949494; border-left: 2px solid #949494;
border-right: 2px solid #949494; border-right: 2px solid #949494;
height: 100%; height: 100%;
padding: 25px;
} }
.package-row{ .package-row{
@ -172,8 +201,8 @@
<section> <section>
<hr> <hr>
<div class="container"> <div class="container">
<div class="row"> <div class="row" style="margin-bottom: 20px;">
<div class="col m-5"> <div class="col" style="margin: 150px 0px;">
<h3 class="text-center">Stay tuned for our full launch.</h3> <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> <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> </div>

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

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

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

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