candifloss/candifloss_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: Classes

Browse Source 
- Updated html classes
- Tweaked text color
This commit is contained in:
Candifloss 2025-05-27 08:31:49 +05:30
parent 201fb0335c
commit 97fb5d8242
3 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/about.css
View File

@ -48,6 +48,12 @@ main {
.intro .content h1 { .intro .content h1 {
font-size: 3rem; font-size: 3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-shadow: 0px 0px 9px #373737;
color: #5488bf;
}
.intro .content h1 .myname {
font-style: normal;
color: #fff;
} }
h2 { h2 {
@ -71,22 +77,22 @@ footer {
opacity: 0.5; opacity: 0.5;
} }
#intro::before { .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"); 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");
} }
#about::before { .section2::before {
background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg"); background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
} }
#skills::before { .section3::before {
background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg"); background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
} }
#projects::before { .section4::before {
background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg"); background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
} }
#contact::before { .section5::before {
background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg"); background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
} }

20
html/about.html
View File

@ -3,26 +3,26 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shaheem - Portfolio</title> <title>MyName - Portfolio</title>
<link rel="stylesheet" href="../css/about.css" /> <link rel="stylesheet" href="../css/about.css" />
</head> </head>
<body> <body>
<main> <main>
<section class="section intro" id="intro"> <section class="section intro section1" id="intro">
<div class="content"> <div class="content">
<h1>Hello, I'm Shaheem</h1> <h1>Hello, I'm <i class="myname">[My Name]</i></h1>
<p>I like building cool stuff and learning new things.</p> <p>Code Wizard | Linux Fanatic | Amateur Artist</p>
</div> </div>
</section> </section>
<section class="section" id="about"> <section class="section section2" id="about">
<div class="content"> <div class="content">
<h2>About Me</h2> <h2>About Me</h2>
<p>A short, informal overview about who you are and what you enjoy doing.</p> <p>A short, informal overview about who you are and what you enjoy doing.</p>
</div> </div>
</section> </section>
<section class="section" id="skills"> <section class="section section3" id="skills">
<div class="content"> <div class="content">
<h2>Skills</h2> <h2>Skills</h2>
<ul> <ul>
@ -34,20 +34,20 @@
</div> </div>
</section> </section>
<section class="section" id="projects"> <section class="section section4" id="projects">
<div class="content"> <div class="content">
<h2>Projects</h2> <h2>Projects</h2>
<p>A few interesting things I\u2019ve made or contributed to.</p> <p>A few interesting things I've made or contributed to.</p>
</div> </div>
</section> </section>
<section class="section" id="contact"> <section class="section section5" id="contact">
<div class="content"> <div class="content">
<h2>Contact</h2> <h2>Contact</h2>
<p>Email: you@example.com<br />Mastodon / GitHub / etc.</p> <p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
</div> </div>
<footer> <footer>
<p>&copy; 2025 Your Name</p> <p>&copy; 2024 candifloss.cc. All rights reserved.</p>
</footer> </footer>
</section> </section>
</main> </main>

18
scss/about.scss
View File

@ -53,8 +53,14 @@ main {
.intro .content h1 { .intro .content h1 {
font-size: 3rem; font-size: 3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} text-shadow: 0px 0px 9px #373737;
color: #5488bf;
.myname {
font-style: normal;
color: $text-color;
}
}
h2 { h2 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -78,31 +84,31 @@ footer {
} }
// Example background images per section // Example background images per section
#intro { .section1 {
&::before { &::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'); 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');
} }
} }
#about { .section2 {
&::before { &::before {
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg'); background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
} }
} }
#skills { .section3 {
&::before { &::before {
background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg'); background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg');
} }
} }
#projects { .section4 {
&::before { &::before {
background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg'); background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
} }
} }
#contact { .section5 {
&::before { &::before {
background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg'); background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
} }