Grid system for white paper page

This commit is contained in:
Thomas Smith 2022-10-30 18:52:34 -04:00
parent 7fdfbaa2ac
commit fe40f4af60
7 changed files with 98 additions and 66 deletions

View file

@ -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;">Opensource is about the many coming together to create something great. In the spirit of that, were 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 opensource 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;">Opensource is about the many coming together to create something great. In the spirit of that, were 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 opensource 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>

View file

@ -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"

View file

@ -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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB

View 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) {
}