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

107
snippets/shx-landingpage.liquid
View File

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