style: Themed skills page
parent
99a2710974
commit
f9ab000614
Binary file not shown.
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue