mirror of
https://github.com/ivabus/www
synced 2024-11-22 13:55:05 +03:00
Grid system for white paper page
This commit is contained in:
Thomas Smith
parent
7fdfbaa2ac
commit
fe40f4af60
7 changed files with 98 additions and 66 deletions
|
|
@ -3,12 +3,14 @@
|
|||
{{- partial "white-paper-gen-art.html" -}}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="section two-boxes hero-section">
|
||||
<div class="section two-boxes wp-hero-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col" style="position: relative; z-index: 2;">
|
||||
<h1>White Paper</h1>
|
||||
<p class="lead animated-5 animatedFadeInUp fadeInUp" style="background-color: #1a1a1a;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
|
||||
<div class="wp-lead-text-container animated-5 animatedFadeInUp fadeInUp p-4 black-bg">
|
||||
<p class="lead" style="margin-bottom: 0px;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
|
||||
</div>
|
||||
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
<link rel="stylesheet" href="/css/products.css">
|
||||
<link rel="stylesheet" href="/css/accordion.css">
|
||||
<link rel="stylesheet" href="/css/nebraska-man.css">
|
||||
<link rel="stylesheet" href="/css/white-paper.css">
|
||||
<link rel="stylesheet" href="/css/spacing.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<!-- Desktop -->
|
||||
|
||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-1"></div>
|
||||
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="wp-gen-art-2"></div>
|
||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-3"></div>
|
||||
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-4"></div>
|
||||
|
||||
<!-- Mobile -->
|
||||
|
||||
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-wp-gen-art-1"></div>
|
||||
|
|
@ -14,63 +7,6 @@
|
|||
|
||||
<style>
|
||||
|
||||
#wp-gen-art-1{
|
||||
position:absolute;
|
||||
width:34vw;
|
||||
height: 18vw;
|
||||
right: 5.8vw;
|
||||
top:16.741vw;
|
||||
z-index: 0;
|
||||
background-image: url("/Images/gen-art/orange-pattern.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#wp-gen-art-2{
|
||||
position:absolute;
|
||||
width:34vw;
|
||||
height: 12vw;
|
||||
left: 5.8vw;
|
||||
top:11.161vw;
|
||||
z-index: 0;
|
||||
background-image: url("/Images/gen-art/dream-tree.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#wp-gen-art-3{
|
||||
position:absolute;
|
||||
width:12vw;
|
||||
height: 12vw;
|
||||
border-radius: 200px;
|
||||
left: 36vw;
|
||||
top:16vw;
|
||||
z-index: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
#wp-gen-art-4{
|
||||
position:absolute;
|
||||
width:45vw;
|
||||
height: 7vw;
|
||||
left: 36vw;
|
||||
top:40vw;
|
||||
z-index: 0;
|
||||
background-image: url("/Images/gen-art/white-light-pattern.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#m-wp-gen-art-1{
|
||||
position:absolute;
|
||||
width:29vw;
|
||||
|
|
|
|||
BIN
src/static/Images/wp-large-grid-generative-art.gif
Normal file
BIN
src/static/Images/wp-large-grid-generative-art.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
src/static/Images/wp-medium-grid-generative-art.gif
Normal file
BIN
src/static/Images/wp-medium-grid-generative-art.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
src/static/Images/wp-x-large-grid-generative-art.gif
Normal file
BIN
src/static/Images/wp-x-large-grid-generative-art.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
93
src/static/css/white-paper.css
Normal file
93
src/static/css/white-paper.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/* Breakpoints for re-use*/
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
.wp-hero-section{
|
||||
background-image: url("/Images/wp-x-large-grid-generative-art.gif") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.wp-lead-text-container{
|
||||
border: 1px solid #949494 !important;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 20.8vw;
|
||||
margin-top: 0.9vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
|
||||
.wp-hero-section{
|
||||
background-image: url("/Images/wp-large-grid-generative-art.gif") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.wp-lead-text-container{
|
||||
border: 1px solid #949494 !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 25vw;
|
||||
margin-top: 1.1vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
||||
|
||||
.wp-hero-section{
|
||||
background-image: url("/Images/wp-large-grid-generative-art.gif") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.wp-lead-text-container{
|
||||
border: 1px solid #949494 !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 30vw;
|
||||
margin-top: 0vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
||||
|
||||
.wp-hero-section{
|
||||
background-image: url("/Images/wp-medium-grid-generative-art.gif") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.wp-lead-text-container{
|
||||
border: 1px solid #949494 !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 47vw;
|
||||
margin-top: -1vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue