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 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0px 0px 9px #373737;
color: #5488bf;
}
.intro .content h1 .myname {
font-style: normal;
color: #fff;
}
h2 {
@ -71,22 +77,22 @@ footer {
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");
}
#about::before {
.section2::before {
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");
}
#projects::before {
.section4::before {
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");
}

20
html/about.html
View File

@ -3,26 +3,26 @@
<head>
<meta charset="UTF-8" />
<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" />
</head>
<body>
<main>
<section class="section intro" id="intro">
<section class="section intro section1" id="intro">
<div class="content">
<h1>Hello, I'm Shaheem</h1>
<p>I like building cool stuff and learning new things.</p>
<h1>Hello, I'm <i class="myname">[My Name]</i></h1>
<p>Code Wizard | Linux Fanatic | Amateur Artist</p>
</div>
</section>
<section class="section" id="about">
<section class="section section2" id="about">
<div class="content">
<h2>About Me</h2>
<p>A short, informal overview about who you are and what you enjoy doing.</p>
</div>
</section>
<section class="section" id="skills">
<section class="section section3" id="skills">
<div class="content">
<h2>Skills</h2>
<ul>
@ -34,20 +34,20 @@
</div>
</section>
<section class="section" id="projects">
<section class="section section4" id="projects">
<div class="content">
<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>
</section>
<section class="section" id="contact">
<section class="section section5" id="contact">
<div class="content">
<h2>Contact</h2>
<p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
</div>
<footer>
<p>&copy; 2025 Your Name</p>
<p>&copy; 2024 candifloss.cc. All rights reserved.</p>
</footer>
</section>
</main>

18
scss/about.scss
View File

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