feat: pure css tilted background
This commit is contained in:
parent
4935177908
commit
05eb109938
Binary file not shown.
Before Width: | Height: | Size: 3.7 KiB |
|
@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
|
||||||
import meme4 from '../../../assets/meme-4.png';
|
import meme4 from '../../../assets/meme-4.png';
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="home-meme">
|
<div id="home-meme" class="tilted-bg">
|
||||||
<div class="meme-text feature-group">
|
<div class="meme-text feature-group">
|
||||||
<h2>TITLE</h2>
|
<h2>TITLE</h2>
|
||||||
<h3>Building a new world for your data</h3>
|
<h3>Building a new world for your data</h3>
|
||||||
|
|
|
@ -6,8 +6,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8% 12%;
|
padding: 8% 12%;
|
||||||
@include fluid-font-size(1.3125rem);
|
@include fluid-font-size(1.3125rem);
|
||||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.meme-text {
|
.meme-text {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import "./WhatIsWeb3.scss";
|
import "./WhatIsWeb3.scss";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="home-whatisweb3">
|
<section id="home-whatisweb3" class="tilted-bg">
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="feature-group">
|
<div class="feature-group">
|
||||||
<h2>
|
<h2>
|
||||||
|
|
|
@ -29,12 +29,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
|
||||||
height: 32.42em;
|
height: 32.42em;
|
||||||
margin-top: 2.48em;
|
margin-top: 2.48em;
|
||||||
@include fluid-font-size(1.3125rem);
|
@include fluid-font-size(1.3125rem);
|
||||||
background-image: url("../../../assets/tilted-rectangle.webp");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
$body-bg: #031418;
|
$body-bg: #031418;
|
||||||
|
$body-bg-darker: #020d11;
|
||||||
|
|
||||||
$primary-dark: #000;
|
$primary-dark: #000;
|
||||||
$primary-light: #fff;
|
$primary-light: #fff;
|
||||||
|
|
|
@ -234,10 +234,11 @@ main.vision {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 2.95em 1.95em;
|
padding: 2.95em 1.95em;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
background: #020e10;
|
background: $body-bg-darker;
|
||||||
border: 0.05em solid transparent;
|
border: 0.05em solid transparent;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
font-family: var(--font-family-jaldi);
|
font-family: var(--font-family-jaldi);
|
||||||
|
transition: border-color 200ms;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--aquamarine);
|
border-color: var(--aquamarine);
|
||||||
|
@ -255,4 +256,21 @@ main.vision {
|
||||||
line-height: 123.81%;
|
line-height: 123.81%;
|
||||||
color: var(--cloud);
|
color: var(--cloud);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tilted-bg {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -5%;
|
||||||
|
bottom: 0;
|
||||||
|
left: -5%;
|
||||||
|
margin: 2% 0;
|
||||||
|
background: $body-bg-darker;
|
||||||
|
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue