mirror of
https://github.com/ivabus/www
synced 2024-11-22 19:25:07 +03:00
Grid adjustments, removing un-needed css/html
This commit is contained in:
Thomas Smith
parent
18b2e92c2f
commit
cdcd30f70d
8 changed files with 117 additions and 152 deletions
0
.github/build-package-pages.sh
vendored
Executable file → Normal file
0
.github/build-package-pages.sh
vendored
Executable file → Normal file
0
.github/prepare-thumb-images.sh
vendored
Executable file → Normal file
0
.github/prepare-thumb-images.sh
vendored
Executable file → Normal file
|
|
@ -2,142 +2,9 @@
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
|
|
||||||
<style>
|
{{- partial "mobile-art-home" -}}
|
||||||
|
|
||||||
#hero-grid-system{
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
z-index: -3;
|
|
||||||
margin-top:-5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-container{
|
|
||||||
position:relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width-cta-container{
|
|
||||||
position:relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
#m-home-gen-art-1{
|
|
||||||
position:absolute;
|
|
||||||
width:57vw;
|
|
||||||
height: 19.3vw;
|
|
||||||
left: 6.8vw;
|
|
||||||
margin-top:164vw;
|
|
||||||
z-index: 1;
|
|
||||||
background-image: url("/Images/gen-art/orange-pattern.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#m-home-gen-art-2{
|
|
||||||
position:absolute;
|
|
||||||
width:36vw;
|
|
||||||
height: 19.3vw;
|
|
||||||
right: 6.8vw;
|
|
||||||
margin-top:154vw;
|
|
||||||
z-index: 3;
|
|
||||||
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#m-home-gen-art-3{
|
|
||||||
position:absolute;
|
|
||||||
width:18vw;
|
|
||||||
height: 18vw;
|
|
||||||
border-radius:200px;
|
|
||||||
right: 40vw;
|
|
||||||
margin-top:167vw;
|
|
||||||
z-index: 3;
|
|
||||||
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
animation: rotation 10s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
#m-home-gen-art-4{
|
|
||||||
position:absolute;
|
|
||||||
width:36vw;
|
|
||||||
height: 12vw;
|
|
||||||
right: 50vw;
|
|
||||||
margin-top:180vw;
|
|
||||||
z-index: 2;
|
|
||||||
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#m-home-gen-art-5{
|
|
||||||
position:absolute;
|
|
||||||
width:36vw;
|
|
||||||
height: 100vw;
|
|
||||||
right: 50vw;
|
|
||||||
margin-top:20vw;
|
|
||||||
z-index: 1;
|
|
||||||
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#m-home-gen-art-6{
|
|
||||||
position:absolute;
|
|
||||||
width:36vw;
|
|
||||||
height: 60vw;
|
|
||||||
right: 30vw;
|
|
||||||
margin-top:30vw;
|
|
||||||
z-index: 0;
|
|
||||||
background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotation {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 576px) {
|
|
||||||
|
|
||||||
.gen-art-mobile{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
|
|
||||||
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
|
|
||||||
<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
|
|
||||||
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
|
|
||||||
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
|
|
||||||
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>
|
|
||||||
|
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<!-- Comment out generative art for now -- adding into SVG itself
|
|
||||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="gen-art-1"></div>
|
|
||||||
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="gen-art-2"></div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--<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">
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,7 @@
|
||||||
|
|
||||||
<!-- Desktop Gen Art -->
|
<!-- Desktop Gen Art -->
|
||||||
|
|
||||||
<section class="two-boxes hero-section">
|
<section class="two-boxes product-hero-section">
|
||||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-1"></div>
|
|
||||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-2"></div>
|
|
||||||
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-3"></div>
|
|
||||||
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-4"></div>
|
|
||||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-5"></div>
|
|
||||||
|
|
||||||
<!-- Mobile Gen Art -->
|
<!-- Mobile Gen Art -->
|
||||||
|
|
||||||
|
|
@ -97,9 +92,11 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col" style="position:relative; z-index:4;">
|
<div class="col" style="position:relative; z-index:4;">
|
||||||
<h1>Products</h1>
|
<h1 style="margin-bottom: 0px !important;">Products</h1>
|
||||||
<p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
|
<div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4">
|
||||||
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
<p class="lead" style="margin-bottom: 0px">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
|
||||||
|
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
108
src/layouts/partials/mobile-art-home.html
Normal file
108
src/layouts/partials/mobile-art-home.html
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#m-home-gen-art-1{
|
||||||
|
position:absolute;
|
||||||
|
width:57vw;
|
||||||
|
height: 19.3vw;
|
||||||
|
left: 6.8vw;
|
||||||
|
margin-top:164vw;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url("/Images/gen-art/orange-pattern.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-home-gen-art-2{
|
||||||
|
position:absolute;
|
||||||
|
width:36vw;
|
||||||
|
height: 19.3vw;
|
||||||
|
right: 6.8vw;
|
||||||
|
margin-top:154vw;
|
||||||
|
z-index: 3;
|
||||||
|
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-home-gen-art-3{
|
||||||
|
position:absolute;
|
||||||
|
width:18vw;
|
||||||
|
height: 18vw;
|
||||||
|
border-radius:200px;
|
||||||
|
right: 40vw;
|
||||||
|
margin-top:167vw;
|
||||||
|
z-index: 3;
|
||||||
|
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
animation: rotation 10s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-home-gen-art-4{
|
||||||
|
position:absolute;
|
||||||
|
width:36vw;
|
||||||
|
height: 12vw;
|
||||||
|
right: 50vw;
|
||||||
|
margin-top:180vw;
|
||||||
|
z-index: 2;
|
||||||
|
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-home-gen-art-5{
|
||||||
|
position:absolute;
|
||||||
|
width:36vw;
|
||||||
|
height: 100vw;
|
||||||
|
right: 50vw;
|
||||||
|
margin-top:20vw;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-home-gen-art-6{
|
||||||
|
position:absolute;
|
||||||
|
width:36vw;
|
||||||
|
height: 60vw;
|
||||||
|
right: 30vw;
|
||||||
|
margin-top:30vw;
|
||||||
|
z-index: 0;
|
||||||
|
background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotation {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 576px) {
|
||||||
|
|
||||||
|
.gen-art-mobile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
|
||||||
|
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
|
||||||
|
<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
|
||||||
|
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
|
||||||
|
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
|
||||||
|
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>
|
||||||
BIN
src/static/Images/prouct-x-large-grid-generative-art.gif
Normal file
BIN
src/static/Images/prouct-x-large-grid-generative-art.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
|
|
@ -4,20 +4,14 @@
|
||||||
|
|
||||||
@media only screen and (min-width: 1200px) {
|
@media only screen and (min-width: 1200px) {
|
||||||
|
|
||||||
.products-hero{
|
.product-hero-section{
|
||||||
background-image: url("Images/x-large-grid.svg");
|
background-image: url("/Images/prouct-x-large-grid-generative-art.gif") !important;
|
||||||
background-attachment: scroll;
|
background-attachment: scroll;
|
||||||
background-position: top;
|
background-position: top;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lead-container{
|
|
||||||
padding-left: 25vw;
|
|
||||||
padding-right: 25vw;
|
|
||||||
margin-bottom: -2.7vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,6 @@ a:hover{
|
||||||
line-height: 12.4vw;
|
line-height: 12.4vw;
|
||||||
margin-top: -1.116vw;
|
margin-top: -1.116vw;
|
||||||
margin-left: -0.837vw;
|
margin-left: -0.837vw;
|
||||||
margin-bottom: 1.2vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue