Start re-designing About page
This commit is contained in:
parent
dd87592f46
commit
dbab8f5770
267
css/about.css
267
css/about.css
@ -1,198 +1,123 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
background: #232323;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
main {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
scroll-snap-align: start;
|
||||
height: 90vh;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
* {
|
||||
all: unset;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
head, script {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
|
||||
background: #202020;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sections {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
/* Each section is exactly 90vh tall. */
|
||||
/* The missing 10vh comes from the next section's title-footer. */
|
||||
.section {
|
||||
height: 90vh;
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* This belongs to THIS section, but visually appears at the bottom of
|
||||
the previous section's viewport. */
|
||||
/* The rest of the section: 80vh main content */
|
||||
}
|
||||
.section .title-footer {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 10vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 0 5px #000;
|
||||
transition: top 0.3s ease;
|
||||
background-color: white;
|
||||
color: purple;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(5px);
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
.section .title-footer h2 {
|
||||
font-size: 1.2rem;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.section .title-footer:hover h2 {
|
||||
color: #6fa8a8;
|
||||
}
|
||||
.section .content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
height: 80vh;
|
||||
flex-shrink: 0;
|
||||
padding: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.section .content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.section .content p {
|
||||
color: #bdbdbd;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* background colors */
|
||||
.section1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.section1::before {
|
||||
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
|
||||
}
|
||||
.section1 .content {
|
||||
text-align: left;
|
||||
max-width: 1024px;
|
||||
margin: 4rem auto auto;
|
||||
}
|
||||
.section1 .content .portrait {
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
}
|
||||
.section1 .content .portrait img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.section1 .content h1 {
|
||||
font-size: 4rem;
|
||||
margin: -6rem 0 1rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
}
|
||||
.section1 .content h1 .myname {
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
}
|
||||
.section1 .content .tagline {
|
||||
font-size: 1.7rem;
|
||||
text-align: left;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item {
|
||||
display: inline;
|
||||
margin-right: 0.7ch;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item .cursor {
|
||||
display: inline-block;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
margin-left: 0.2ch;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.section1 .content {
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content .portrait {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content .portrait img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.section1 .content h1 {
|
||||
text-align: left;
|
||||
margin: 0 0 1ch 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
.section1 .content .tagline {
|
||||
display: block;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.section1 .content .tagline .tagline-item:last-child .cursor {
|
||||
margin-left: 0.4ch;
|
||||
}
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
50% {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.section2 {
|
||||
background-color: orange;
|
||||
background: #1b1b1b;
|
||||
}
|
||||
.section2::before {
|
||||
background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
|
||||
}
|
||||
|
||||
.lastsection {
|
||||
height: 100vh;
|
||||
.section2 .title-footer {
|
||||
background: #1b1b1b;
|
||||
}
|
||||
|
||||
.section3 {
|
||||
background-color: red;
|
||||
background: #242424;
|
||||
}
|
||||
.section3::before {
|
||||
background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
|
||||
.section3 .title-footer {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
.section4 {
|
||||
background-color: green;
|
||||
background: #171717;
|
||||
}
|
||||
.section4::before {
|
||||
background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
|
||||
.section4 .title-footer {
|
||||
background: #171717;
|
||||
}
|
||||
|
||||
.section5 {
|
||||
background-color: blue;
|
||||
background: #101010;
|
||||
}
|
||||
.section5::before {
|
||||
background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
|
||||
.section5 .title-footer {
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
/* section5 special footer */
|
||||
.section5 footer {
|
||||
height: 10vh;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 768px) {
|
||||
.section .content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.section .content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.title-footer h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
115
html/about.html
115
html/about.html
@ -1,72 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MyName - Portfolio</title>
|
||||
<link rel="stylesheet" href="../css/about.css" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>About • candifloss.cc</title>
|
||||
<link rel="stylesheet" href="../css/about.css">
|
||||
<style>html { scroll-behavior: smooth; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="section intro section1" id="intro">
|
||||
<div class="content">
|
||||
<div class="portrait">
|
||||
<img src="../img/me.jpg" alt="A stylized portrait" />
|
||||
</div>
|
||||
<h1>
|
||||
Hello, I'm <span class="myname">[My Name]</span>
|
||||
</h1>
|
||||
<p class="tagline">
|
||||
<span class="tagline-item">Code Wizard.</span>
|
||||
<span class="tagline-item">Terminal Fanatic.</span>
|
||||
<span class="tagline-item">Amateur Artist.<span class="cursor">_</span></span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section2" id="about">
|
||||
<a class="title-footer">
|
||||
<h2>About Me</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>A short, informal overview about who you are and what you enjoy doing.</p>
|
||||
</div>
|
||||
</section>
|
||||
<main class="sections" role="main">
|
||||
|
||||
<section class="section section3" id="skills">
|
||||
<a class="title-footer">
|
||||
<h2>Skills</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>Web development</li>
|
||||
<li>Linux & system tinkering</li>
|
||||
<li>Rust, Python, Bash</li>
|
||||
<li>Designing interfaces, ricing desktops</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<!-- section1 has no title-footer because nothing should peek above it -->
|
||||
<section id="section1id" class="section section1">
|
||||
<div class="content">
|
||||
<h1>Section1 title</h1>
|
||||
<p>This is section 1</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section4" id="projects">
|
||||
<a class="title-footer">
|
||||
<h2>Projects</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>A few interesting things I've made or contributed to.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- section2 starts with title-footer (this belongs to section2) -->
|
||||
<section id="section2id" class="section section2">
|
||||
<a class="title-footer" href="#section2id" aria-label="Section 2">
|
||||
<h2>Section 2 title</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>Section 2 content</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section5 lastsection" id="contact">
|
||||
<a class="title-footer">
|
||||
<h2>Contact</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
|
||||
</div>
|
||||
<footer>
|
||||
<section id="section3id" class="section section3">
|
||||
<a class="title-footer" href="#section3id" aria-label="Section 3">
|
||||
<h2>Section 3 title</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>Section 3 content</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="section4id" class="section section4">
|
||||
<a class="title-footer" href="#section4id" aria-label="Section 4">
|
||||
<h2>Section 4 title</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>Section 4 content</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="section5id" class="section section5">
|
||||
<a class="title-footer" href="#section5id" aria-label="Section 5">
|
||||
<h2>Section 5 title</h2>
|
||||
</a>
|
||||
<div class="content">
|
||||
<p>Section 5 content</p>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2024 candifloss.cc. All rights reserved.</p>
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
10
scss/_vars.scss
Normal file
10
scss/_vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
// colors and small tokens
|
||||
$text: #e0e0e0;
|
||||
$muted: #bdbdbd;
|
||||
$accent: #6fa8a8;
|
||||
|
||||
$bg1: #202020;
|
||||
$bg2: #1b1b1b;
|
||||
$bg3: #242424;
|
||||
$bg4: #171717;
|
||||
$bg5: #101010;
|
||||
@ -1,27 +1,85 @@
|
||||
@use "about/base";
|
||||
@use "about/section1";
|
||||
@use "about/section2";
|
||||
@use "about/section5";
|
||||
@use "vars" as v;
|
||||
|
||||
* { all: unset; box-sizing: border-box; }
|
||||
head, script { display: none; }
|
||||
|
||||
|
||||
.section3 {
|
||||
&::before {
|
||||
background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg');
|
||||
}
|
||||
background-color: red;
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
|
||||
background: v.$bg1;
|
||||
color: v.$text;
|
||||
}
|
||||
|
||||
.section4 {
|
||||
&::before {
|
||||
background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
|
||||
}
|
||||
background-color: green;
|
||||
.sections {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
.section5 {
|
||||
&::before {
|
||||
background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
|
||||
/* Each section is exactly 90vh tall. */
|
||||
/* The missing 10vh comes from the next section's title-footer. */
|
||||
.section {
|
||||
height: 90vh;
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* This belongs to THIS section, but visually appears at the bottom of
|
||||
the previous section's viewport. */
|
||||
.title-footer {
|
||||
height: 10vh;
|
||||
flex-shrink: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
color: v.$muted;
|
||||
}
|
||||
|
||||
&:hover h2 { color: v.$accent; }
|
||||
}
|
||||
|
||||
/* The rest of the section: 80vh main content */
|
||||
.content {
|
||||
height: 80vh;
|
||||
flex-shrink: 0;
|
||||
|
||||
padding: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h1 { font-size: 3rem; margin-bottom: .5rem; color: v.$text; }
|
||||
p { color: v.$muted; line-height: 1.5; }
|
||||
}
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
/* background colors */
|
||||
.section1 { background: v.$bg1; }
|
||||
.section2 { background: v.$bg2; .title-footer { background: v.$bg2; } }
|
||||
.section3 { background: v.$bg3; .title-footer { background: v.$bg3; } }
|
||||
.section4 { background: v.$bg4; .title-footer { background: v.$bg4; } }
|
||||
.section5 { background: v.$bg5; .title-footer { background: v.$bg5; } }
|
||||
|
||||
/* section5 special footer */
|
||||
.section5 footer {
|
||||
height: 10vh;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: v.$muted;
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 768px) {
|
||||
.section .content { padding: 1.5rem; h1 { font-size: 2rem; } }
|
||||
.title-footer h2 { font-size: 1rem; }
|
||||
}
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
@use "vars" as *;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
font-family: $font-stack;
|
||||
background: $background;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
main {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
scroll-snap-align: start;
|
||||
height: 90vh;
|
||||
//display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
//position: relative;
|
||||
margin:0;
|
||||
|
||||
.title-footer {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 10vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
//color: white;
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 0 5px #000;
|
||||
transition: top 0.3s ease;
|
||||
background-color: white;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(5px);
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
@use "vars" as *;
|
||||
|
||||
.section1 {
|
||||
padding: 1rem;
|
||||
|
||||
&::before {
|
||||
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: left;
|
||||
max-width: 1024px;
|
||||
margin: 4rem auto auto;
|
||||
|
||||
.portrait {
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
//margin-right: -25rem;
|
||||
|
||||
img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: -6rem 0 1rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
|
||||
.myname {
|
||||
font-style: normal;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.7rem;
|
||||
text-align: left;
|
||||
|
||||
.tagline-item {
|
||||
display: inline;
|
||||
margin-right: 0.7ch;
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
margin-left: 0.2ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.content {
|
||||
margin: 0;
|
||||
|
||||
.portrait {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
margin: 0 0 1ch 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
margin-left: 1.5rem;
|
||||
|
||||
.tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tagline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
.cursor {
|
||||
margin-left: 0.4ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blinking cursor animation
|
||||
@keyframes blink {
|
||||
0%, 100% { color: #fff0; }
|
||||
50% { color: #fff; }
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
.section2 {
|
||||
&::before {
|
||||
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
|
||||
}
|
||||
background-color: orange;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.lastsection {
|
||||
height: 100vh;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
$font-stack: sans-serif;
|
||||
$background:#232323;
|
||||
$text-color: #fff;
|
||||
Loading…
x
Reference in New Issue
Block a user