Adding background images
This commit is contained in:
sairaj mote
parent
fdae63a30c
commit
5da1677659
BIN
assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg
Normal file
BIN
assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
BIN
assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg
Normal file
BIN
assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg
Normal file
BIN
assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
assets/representational/nik-z1d-LP8sjuI-unsplash.jpg
Normal file
BIN
assets/representational/nik-z1d-LP8sjuI-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
97
css/main.css
97
css/main.css
@ -294,16 +294,30 @@ section:nth-of-type(2) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 60vmax;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#el_salvador_section p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#el_salvador_map {
|
||||
position: absolute;
|
||||
opacity: 0.06;
|
||||
top: 0;
|
||||
width: max(100vh, 90vw);
|
||||
height: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
#projectb_milestones_section {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.8156862745), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top 20% center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#projectb_milestones_section p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
#projectb_milestones_section .carousel-control {
|
||||
border: solid thin rgba(var(--foreground-color), 0.5);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#projectb_milestones_section .milestone {
|
||||
isolation: isolate;
|
||||
}
|
||||
#projectb_milestones_section .milestone__label::before {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.carousel {
|
||||
@ -340,12 +354,13 @@ section:nth-of-type(2) {
|
||||
.milestone__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--text-color), 1);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
padding: 0.4rem 0.5rem;
|
||||
align-self: flex-start;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.milestone__label::before {
|
||||
position: absolute;
|
||||
@ -374,6 +389,9 @@ section:nth-of-type(2) {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#projects_section {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
#projects_section h2 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
@ -492,6 +510,16 @@ section:nth-of-type(2) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#methodology_section {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.6274509804), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg") no-repeat center center;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#methodology_section p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#methodology_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -629,6 +657,14 @@ section:nth-of-type(2) {
|
||||
max-width: max(100vw - 2.5rem);
|
||||
}
|
||||
|
||||
#socials_section {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.5019607843)), url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat center center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#socials_section p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
|
||||
#social_links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -645,9 +681,10 @@ section:nth-of-type(2) {
|
||||
transition: box-shadow 0.1s ease;
|
||||
flex: 1 1 8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#social_links li:hover {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#social_links a {
|
||||
display: flex;
|
||||
@ -686,44 +723,6 @@ section:nth-of-type(2) {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
#news_list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
#news_list li {
|
||||
container: news-item/inline-size;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: " icon ." "icon ." "icon ." "icon .";
|
||||
gap: 0.5rem 1rem;
|
||||
border: solid thin rgba(var(--text-color), 0.5);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
text-decoration: none;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
-webkit-animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.news-item__icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
.news-item__icon .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.news-item__date {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
margin-right: auto;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -252,15 +252,35 @@ section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 60vmax;
|
||||
background: linear-gradient(to left, #00000080, #000000d0),
|
||||
url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg")
|
||||
no-repeat center center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
}
|
||||
#el_salvador_map {
|
||||
position: absolute;
|
||||
opacity: 0.06;
|
||||
top: 0;
|
||||
width: max(100vh, 90vw);
|
||||
height: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
#projectb_milestones_section {
|
||||
background: linear-gradient(to left, #000000d0, #000000d0),
|
||||
url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top
|
||||
20% center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
padding-bottom: 3rem;
|
||||
p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
.carousel-control {
|
||||
border: solid thin rgba(var(--foreground-color), 0.5);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.milestone {
|
||||
isolation: isolate;
|
||||
&__label {
|
||||
&::before {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel {
|
||||
display: flex;
|
||||
@ -296,12 +316,13 @@ section {
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--text-color), 1);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
padding: 0.4rem 0.5rem;
|
||||
align-self: flex-start;
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
@ -329,6 +350,7 @@ section {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#projects_section {
|
||||
padding-top: 5rem;
|
||||
h2 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
@ -442,6 +464,17 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
#methodology_section {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
background: linear-gradient(to left, #000000a0, #000000d0),
|
||||
url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg")
|
||||
no-repeat center center;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
}
|
||||
#methodology_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -577,6 +610,13 @@ section {
|
||||
}
|
||||
|
||||
#socials_section {
|
||||
background: linear-gradient(to left, #00000050, #00000080),
|
||||
url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat
|
||||
center center fixed;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
p {
|
||||
color: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
}
|
||||
#social_links {
|
||||
display: flex;
|
||||
@ -593,8 +633,9 @@ section {
|
||||
transition: box-shadow 0.1s ease;
|
||||
flex: 1 1 8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1);
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
a {
|
||||
@ -635,41 +676,6 @@ section {
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
#news_list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
li {
|
||||
container: news-item / inline-size;
|
||||
}
|
||||
}
|
||||
.news-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: " icon ." "icon ." "icon ." "icon .";
|
||||
gap: 0.5rem 1rem;
|
||||
border: solid thin rgba(var(--text-color), 0.5);
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
text-decoration: none;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
animation: slide-up 0.5s ease var(--delay) forwards;
|
||||
opacity: 0;
|
||||
&__icon {
|
||||
grid-area: icon;
|
||||
.icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
margin-right: auto;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
||||
@ -166,7 +166,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<section id="projectb_milestones_section">
|
||||
<h2>Milestones</h2>
|
||||
<ul id="projectb_milestones_wrapper" class="carousel"> </ul>
|
||||
<div class="carousel-controls flex gap-0-3">
|
||||
@ -313,7 +313,7 @@
|
||||
<img id="bitcoin_lineart" src="assets/svg/bitcoin line art.svg" alt="">
|
||||
</section>
|
||||
<section id="el_salvador_section">
|
||||
<img src="assets/svg/el-salvador.svg" alt="" id="el_salvador_map">
|
||||
<!-- <img src="assets/representational/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg" alt="" id="el_salvador_map"> -->
|
||||
<div class="grid gap-2">
|
||||
<div class="grid">
|
||||
<h4>Why</h4>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user