mirror of
https://github.com/ivabus/www
synced 2024-11-26 03:55:06 +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 -->
|
||||
|
||||
<style>
|
||||
|
||||
#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>
|
||||
{{- partial "mobile-art-home" -}}
|
||||
|
||||
<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="row">
|
||||
<div class="col">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,7 @@
|
|||
|
||||
<!-- Desktop Gen Art -->
|
||||
|
||||
<section class="two-boxes 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>
|
||||
<section class="two-boxes product-hero-section">
|
||||
|
||||
<!-- Mobile Gen Art -->
|
||||
|
||||
|
|
@ -97,9 +92,11 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col" style="position:relative; z-index:4;">
|
||||
<h1>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>
|
||||
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
||||
<h1 style="margin-bottom: 0px !important;">Products</h1>
|
||||
<div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4">
|
||||
<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>
|
||||
|
|
|
|||
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) {
|
||||
|
||||
.products-hero{
|
||||
background-image: url("Images/x-large-grid.svg");
|
||||
.product-hero-section{
|
||||
background-image: url("/Images/prouct-x-large-grid-generative-art.gif") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat;
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@ a:hover{
|
|||
line-height: 12.4vw;
|
||||
margin-top: -1.116vw;
|
||||
margin-left: -0.837vw;
|
||||
margin-bottom: 1.2vw;
|
||||
}
|
||||
|
||||
h2{
|
||||
|
|
|
|||
Loading…
Reference in a new issue