Chiefsoft/TokslawMain
1
0
Fork 0
Code Issues Pull Requests Releases Activity

styling for about section

Browse Source
This commit is contained in:
Toks Law
2026-05-04 15:20:04 -04:00
parent 56b939eb02
commit 758ce3eda1
2 changed files with 87 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Views/about.php
+16 -15
View File
@@ -255,7 +255,7 @@
<div class="col col-12 col-md-6 lqd-unit-animation-done" style=""> <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"> <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> <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> <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="w-full relative">
<div class="flex flex-wrap -mx-15 mb-50 md:mb-0"> <div class="flex flex-wrap -mx-15 mb-50 md:mb-0">
@@ -314,24 +314,25 @@
<section id="about1" class="active"> <section id="about1" class="active">
<div class="container page-title "> <div class="container page-title">
<h5 class=" ld-fh-element mb-0/5em relative text-40 "><span>Experience</span></h5> <h5 class="ld-fh-element mb-0/5em relative text-40"><span>Experience</span></h5>
<?php if (! empty($content)) { ?> <?php if (!empty($content)) { ?>
<div class="experience-container"> <div class="experience-cards">
<?php foreach($content as $item) { ?> <?php foreach($content as $item) { ?>
<div class="experience-item"> <div class="exp-card">
<ul> <div class="exp-header">
<li class="title"><?php echo htmlspecialchars($item['title']); ?></li> <div class="exp-title-group">
<li class="title"><?php echo htmlspecialchars($item['company']);?></li> <h4 class="exp-role"><?php echo htmlspecialchars($item['title']); ?></h4>
<li class="title"><?php echo htmlspecialchars($item['duration']); ?></li> <span class="exp-company"><?php echo htmlspecialchars($item['company']); ?></span>
<li class="title"><?php echo nl2br(htmlspecialchars($item['description'])); ?></li> </div>
</ul> <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> </div>
<?php <?php } ?>
} ?>
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
</section> </section>
app/Views/styles.css
+70 -34
View File
@@ -21,53 +21,89 @@
} }
/* ─────────────────────────── */ /* ─────────────────────────── */
.experience-container { /* ── Experience cards ── */
.experience-cards {
max-width: 820px;
margin: 40px auto 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 20px;
max-width: 600px;
margin: 0 auto;
text-align: justify;
} }
.experience-item { .exp-card {
background: #d72f2f; background: #fff;
padding: 10px; border-radius: 14px;
border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 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 { .exp-card:hover {
list-style: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
padding: 0; 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; margin: 0;
} }
.experience-item li { .exp-company {
padding: 5px 0; font-size: 12px;
font-size: 16px; font-weight: 600;
color: #888;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.exp-duration {
font-size: 12px;
font-weight: 500; font-weight: 500;
color: #333; color: #fff;
background: #000;
padding: 5px 14px;
border-radius: 100px;
white-space: nowrap;
flex-shrink: 0;
} }
.experience-item .title { .exp-divider {
font-weight: bold; border: none;
font-size: 18px; border-top: 1px solid rgba(0, 0, 0, 0.08);
color: #007bff; margin: 18px 0;
} }
.experience-item .company { .exp-description {
font-style: italic;
color: #555;
}
.experience-item .duration {
color: #777;
font-size: 14px;
}
.experience-item .description {
color: #444;
font-size: 15px; 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;
}
}
/* ───────────────────── */