style: Themed skills page

pull/1/head
Lunix-420 2024-11-01 23:47:53 +01:00
parent 99a2710974
commit f9ab000614
4 changed files with 123 additions and 26 deletions

Binary file not shown.

View File

@ -1,5 +1,4 @@
.project-card {
background-color: var(--cosmic-dark-dark);
color: var(--starlight-white-lighter);
border: 1px solid var(--cosmic-dark-medium);
border-radius: 8px;

View File

@ -0,0 +1,76 @@
.project-card {
background-color: var(--cosmic-dark-dark);
color: var(--starlight-white-lighter);
border: 1px solid var(--cosmic-dark-medium);
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-card .card-title {
color: var(--starlight-white-lighter);
margin-bottom: 15px;
}
.project-card .card-details {
display: flex;
justify-content: space-between;
align-items: center;
}
.project-card .card-text {
margin-bottom: 0;
}
.btn-create-project {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--cosmic-dark-dark);
background-color: var(--aurora-yellowgreen-lighter);
border: none;
border-radius: 4px;
margin-bottom: 20px;
}
.btn-create-project:hover {
background-color: var(--aurora-yellowgreen-light);
}
.btn-delete {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--cosmic-dark-dark);
background-color: var(--aurora-yellowgreen-lighter);
border: none;
border-radius: 4px;
}
.btn-delete:hover {
background-color: var(--aurora-yellowgreen-light);
}
.form-control {
background-color: var(--cosmic-dark-light);
color: var(--starlight-white-lighter);
border: 1px solid var(--cosmic-dark-medium);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
}
.form-control::placeholder {
color: var(--starlight-white-darker);
}

View File

@ -3,32 +3,54 @@
<head>
<div th:replace="~{_metadata :: metadata}"></div>
<title>My Skill Management System</title>
<link rel="stylesheet" href="/skills.css" />
</head>
<body>
<div th:replace="~{_header :: header(activePage=${home})}"></div>
<div>
<h2>Profile</h2>
<ul>
<li th:text="${employee.formOfAddress.description}">Form of Address</li>
<li th:text="${employee.firstName}">First Name</li>
<li th:text="${employee.lastName}">Last Name</li>
<li th:text="${employee.mail}">Email</li>
<li <p>6969420</p></li>
</ul>
<div class="wrapper">
<div th:replace="~{_header :: header(activePage=${skills})}"></div>
<div class="content container mt-4">
<h2 class="mb-4">Profile</h2>
<div class="project-card mb-4">
<div class="card-body">
<ul>
<li th:text="${employee.formOfAddress.description}">
Form of Address
</li>
<li th:text="${employee.firstName}">First Name</li>
<li th:text="${employee.lastName}">Last Name</li>
<li th:text="${employee.mail}">Email</li>
</ul>
</div>
</div>
<h2 class="mb-4">Skills</h2>
<div class="row">
<div class="col-12" th:each="skill : ${skillData}">
<div class="project-card mb-4">
<div class="card-body">
<h5
class="card-title"
th:text="${skill.primarySkill.description}"
>
Primary Skill
</h5>
<div class="card-details">
<div class="card-text">
<ul>
<li
th:each="secondarySkill : ${skill.secondarySkills}"
th:text="${secondarySkill.description}"
>
Secondary Skill
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div th:replace="~{_footer :: footer}"></div>
</div>
<div>
<h2>Skills</h2>
<ul>
<li th:each="skill : ${skillData}">
<span th:text="${skill.primarySkill.description}">Skill Name</span>
<ul>
<li th:each="secondarySkill : ${skill.secondarySkills}">
<span th:text="${secondarySkill.description}">Skill Name</span>
</li>
</ul>
</li>
</ul>
</div>
<div th:replace="~{_footer :: footer}"></div>
</body>
</html>
</html>