initial design

This commit is contained in:
Candifloss 2024-12-11 03:33:11 +05:30
parent 09fee7c98e
commit 811ee69573
5 changed files with 109 additions and 1 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
sh/
sh/csswatch.sh

View File

@ -1,3 +1,3 @@
# candifloss_site # candifloss_site
Candifloss.cc site Candifloss.cc Website

36
css/index.css Normal file
View File

@ -0,0 +1,36 @@
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #2c2c54, #40407a);
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
.container h1 {
font-size: 4rem;
margin: 0;
padding: 0.5em;
}
.container nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 1.5rem;
}
.container nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2rem;
transition: color 0.3s;
}
.container nav ul li a:hover {
color: #a29bfe;
}

22
html/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>candifloss.cc</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="container">
<h1>candifloss.cc</h1>
<nav>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#coding-projects">coding projects</a></li>
<li><a href="#art">art</a></li>
<li><a href="#articles">articles</a></li>
</ul>
</nav>
</div>
</body>
</html>

48
scss/index.scss Normal file
View File

@ -0,0 +1,48 @@
$bg-color: linear-gradient(135deg, #2c2c54, #40407a);
$text-color: #ffffff;
$link-hover-color: #a29bfe;
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: $bg-color;
color: $text-color;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
h1 {
font-size: 4rem;
margin: 0;
padding: 0.5em;
}
nav {
ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 1.5rem;
li {
a {
text-decoration: none;
color: $text-color;
font-size: 1.2rem;
transition: color 0.3s;
&:hover {
color: $link-hover-color;
}
}
}
}
}
}