Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

landingpage Video

pull/4/head
Jan Umbach 2024-06-02 18:53:42 +02:00
parent 2462c9e4d9
commit 876e5c4755
1 changed files with 50 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
snippets/shx-landingpage.liquid
View File

@ -1,75 +1,68 @@
{% assign videoURL = "https://cdn.shopify.com/videos/c/o/v/37f714939aef4036aa9fc14f7c18ab46.mp4" %}
<style>
.landingPage {
max-height: 50vh;
}
.landingPage {}
.shx-landingPage__video__element {
.shx-landingPage__video__element {
width: 100%;
height: 100%;
object-fit: cover;
}
max-height: 50vh;
}
.shx-landingPage__video {
.shx-landingPage__video {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
/* Add this */
justify-content: center;
/* Add this */
align-items: center;
/* Add this */
}
}
.shx-landingPage__video__content {
.shx-landingPage__video__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
}
.shx-landingPage__video__title {
.shx-landingPage__video__title {
font-size: 4rem;
margin-bottom: 1rem;
color: white;
}
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
.shx-landingPage__video__title {
font-size: 2rem;
}
}
}
.shx-landingPage__video__description {
.shx-landingPage__video__description {
font-size: 1rem;
margin-bottom: 1rem;
}
}
.shx-landingPage__video__cta {
.shx-landingPage__video__cta {
display: inline-block;
padding: 0.5rem 1rem;
background-color: white;
color: black;
text-decoration: none;
border-radius: 5px;
}
}
.shx-landingPage__video__cta:hover {
.shx-landingPage__video__cta:hover {
background-color: black;
color: white;
}
}
.shx-landingPage__video__cta:active {
.shx-landingPage__video__cta:active {
transform: scale(0.95);
}
}
</style>