ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:45:12 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved gen art css over to separate file to clean up index.html

Browse source
This commit is contained in:
Thomas Smith 2022-09-21 18:14:07 -04:00
parent b35059b5f0
commit 029136a413
3 changed files with 99 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/layouts/index.html
View file

@ -4,34 +4,6 @@
<style>
#gen-art-1{
position:absolute;
width:15vw;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
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-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:17vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#hero-grid-system{
position:absolute;
width:100%;
@ -106,38 +78,8 @@
<!-- Package Section: Before -->
<style>
.gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 16vw;
right: 22vw;
width: 26vw;
height: 16vw;
z-index:2;
}
.gen-art-3{
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-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
</style>
<section>
<div class="gen-art-3 light-gray-bg"></div>
<div class="gen-art" id="gen-art-3"></div>
<div class="container package_before">
<div class="row">
<div class="col">
@ -172,66 +114,6 @@
<!-- Statistics -->
<style>
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
</style>
<section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">
<!-- Generative Art for this section -->

1
src/layouts/partials/head.html
View file

@ -51,6 +51,7 @@
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/typography.css">
<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/generative-art.css">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
<link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">

97
src/static/css/generative-art.css Normal file
View file

@ -0,0 +1,97 @@
#gen-art-1{
position:absolute;
width:15vw;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
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-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:17vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-3{
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-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}