styling for about section
This commit is contained in:
+16
-15
@@ -255,7 +255,7 @@
|
||||
<div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
|
||||
<div class="module-content relative flex flex-col items-start pr-5percent pl-15percent lg:pr-0">
|
||||
<p class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/05em text-black">Who am I?</p>
|
||||
<h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Tokunbo Strategy</h2>
|
||||
<h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Tokunbo Lawal Tokslaw</h2>
|
||||
<p class="ld-fh-element mb-2em text-16 leading-1/6em text-black">I'm an Enterprise Architect and Developer based in Atlanta, USA. I build immersive infrastructure, microservice applications and architecture through carefully crafted code and user-centric solutions</p>
|
||||
<div class="w-full relative">
|
||||
<div class="flex flex-wrap -mx-15 mb-50 md:mb-0">
|
||||
@@ -314,24 +314,25 @@
|
||||
|
||||
|
||||
<section id="about1" class="active">
|
||||
<div class="container page-title ">
|
||||
<h5 class=" ld-fh-element mb-0/5em relative text-40 "><span>Experience</span></h5>
|
||||
<?php if (! empty($content)) { ?>
|
||||
<div class="experience-container">
|
||||
<div class="container page-title">
|
||||
<h5 class="ld-fh-element mb-0/5em relative text-40"><span>Experience</span></h5>
|
||||
<?php if (!empty($content)) { ?>
|
||||
<div class="experience-cards">
|
||||
<?php foreach($content as $item) { ?>
|
||||
<div class="experience-item">
|
||||
<ul>
|
||||
<li class="title"><?php echo htmlspecialchars($item['title']); ?></li>
|
||||
<li class="title"><?php echo htmlspecialchars($item['company']);?></li>
|
||||
<li class="title"><?php echo htmlspecialchars($item['duration']); ?></li>
|
||||
<li class="title"><?php echo nl2br(htmlspecialchars($item['description'])); ?></li>
|
||||
</ul>
|
||||
<div class="exp-card">
|
||||
<div class="exp-header">
|
||||
<div class="exp-title-group">
|
||||
<h4 class="exp-role"><?php echo htmlspecialchars($item['title']); ?></h4>
|
||||
<span class="exp-company"><?php echo htmlspecialchars($item['company']); ?></span>
|
||||
</div>
|
||||
<span class="exp-duration"><?php echo htmlspecialchars($item['duration']); ?></span>
|
||||
</div>
|
||||
<hr class="exp-divider">
|
||||
<p class="exp-description"><?php echo nl2br(htmlspecialchars($item['description'])); ?></p>
|
||||
</div>
|
||||
<?php
|
||||
} ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
+71
-35
@@ -21,53 +21,89 @@
|
||||
}
|
||||
/* ─────────────────────────── */
|
||||
|
||||
.experience-container {
|
||||
/* ── Experience cards ── */
|
||||
.experience-cards {
|
||||
max-width: 820px;
|
||||
margin: 40px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: justify;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.experience-item {
|
||||
background: #d72f2f;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
.exp-card {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-top: 4px solid #000;
|
||||
padding: 28px 32px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
|
||||
.experience-item ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.exp-card:hover {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.exp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.exp-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.exp-role {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.experience-item li {
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
.exp-company {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.exp-duration {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
padding: 5px 14px;
|
||||
border-radius: 100px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.experience-item .title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #007bff;
|
||||
.exp-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.experience-item .company {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.experience-item .duration {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.experience-item .description {
|
||||
color: #444;
|
||||
.exp-description {
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.exp-card {
|
||||
padding: 22px 20px;
|
||||
}
|
||||
.exp-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
/* ───────────────────── */
|
||||
Reference in New Issue
Block a user