first commit
This commit is contained in:
ssbg04 committed
commit
2025f270a8
26 files changed
+1650
No files matched your search
@@ -0,0 +1,755 @@
|
||||
/* --- Variables & Configuration --- */
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--card-bg: #161616;
|
||||
--text-main: #ededed;
|
||||
--text-muted: #a1a1a1;
|
||||
--accent: #3b82f6;
|
||||
--border: #2a2a2a;
|
||||
/* NEW: Dark Mode Transparent Background */
|
||||
--glass-bg: rgba(10, 10, 10, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
/* 1. Set the width of the scrollbar */
|
||||
html::-webkit-scrollbar {
|
||||
width: 8px; /* Thin and sleek */
|
||||
}
|
||||
|
||||
/* 2. The background of the scrollbar (Track) */
|
||||
html::-webkit-scrollbar-track {
|
||||
background: var(--bg); /* Matches your dark background */
|
||||
}
|
||||
|
||||
/* 3. The moving part of the scrollbar (Thumb) */
|
||||
html::-webkit-scrollbar-thumb {
|
||||
background-color: #333; /* Dark Grey */
|
||||
border-radius: 4px; /* Rounded edges */
|
||||
}
|
||||
|
||||
/* 4. Hover effect */
|
||||
html::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--accent); /* Turns Blue when hovered */
|
||||
}
|
||||
|
||||
.site-wrapper {
|
||||
background-color: var(--bg);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- Dark/Light Logic --- */
|
||||
.toggle-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper {
|
||||
--bg: #ffffff;
|
||||
--card-bg: #f3f4f6;
|
||||
--text-main: #111827;
|
||||
--text-muted: #4b5563;
|
||||
--accent: #2563eb;
|
||||
--border: #e5e7eb;
|
||||
/* NEW: Light Mode Transparent Background */
|
||||
--glass-bg: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
font-size: 1.2rem;
|
||||
user-select: none;
|
||||
}
|
||||
.toggle-checkbox:checked ~ .site-wrapper .icon-sun {
|
||||
display: none;
|
||||
}
|
||||
.toggle-checkbox:checked ~ .site-wrapper .icon-moon {
|
||||
display: inline;
|
||||
}
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper .icon-moon {
|
||||
display: none;
|
||||
}
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper .icon-sun {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* --- Global Styles --- */
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- UPDATED: Sticky Nav --- */
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0; /* Slightly reduced for a sleeker sticky bar */
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
/* Sticky properties */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
|
||||
/* Theme-based Glass Background */
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border); /* Adds a nice separation line when scrolling */
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* Desktop: Show links normally */
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Hamburger Icon (Hidden on Desktop) */
|
||||
.hamburger {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 5px auto;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: var(--text-main); /* Matches theme color */
|
||||
}
|
||||
|
||||
/* --- Mobile Menu (Max-width 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
/* Show Hamburger */
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Animate Hamburger to X when active */
|
||||
.hamburger.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger.active .bar:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
}
|
||||
.hamburger.active .bar:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* --- UPDATED: Mobile Dropdown --- */
|
||||
.nav-links {
|
||||
position: absolute; /* Attaches exactly to the sticky nav */
|
||||
left: -100%; /* Hide off-screen */
|
||||
top: 100%; /* Sits exactly below the navbar */
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.3s ease-in-out;
|
||||
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 20px 0;
|
||||
gap: 20px;
|
||||
|
||||
/* Theme-Based Transparent Background */
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
/* Show Links when active */
|
||||
.nav-links.active {
|
||||
left: 0; /* Slide in */
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-main); /* Automatically matches dark/light mode */
|
||||
font-size: 1.2rem;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Hero --- */
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 80px 0;
|
||||
gap: 40px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
flex: 1;
|
||||
}
|
||||
.greeting {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.highlight {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hero-btns {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
.btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-img-container {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--border);
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
opacity: 0; /* Hide all images by default */
|
||||
}
|
||||
/* -----------------------------------
|
||||
DARK MODE (Default State)
|
||||
----------------------------------- */
|
||||
.img-night-normal {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
cursor: none;
|
||||
} /* Show Night Normal */
|
||||
|
||||
/* On Hover: Fade in Night Hover, Fade out Night Normal */
|
||||
.hero-img-container:hover .img-night-hover {
|
||||
opacity: 1;
|
||||
z-index: 3;
|
||||
cursor: none;
|
||||
}
|
||||
.hero-img-container:hover .img-night-normal {
|
||||
opacity: 0;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* -----------------------------------
|
||||
LIGHT MODE (When Checkbox is unchecked)
|
||||
----------------------------------- */
|
||||
/* 1. Hide the Dark Mode images entirely */
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper .img-night-normal,
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper .img-night-hover {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* 2. Show Day Normal */
|
||||
.toggle-checkbox:not(:checked) ~ .site-wrapper .img-day-normal {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* 3. On Hover: Fade in Day Hover, Fade out Day Normal */
|
||||
.toggle-checkbox:not(:checked)
|
||||
~ .site-wrapper
|
||||
.hero-img-container:hover
|
||||
.img-day-hover {
|
||||
opacity: 1;
|
||||
z-index: 3;
|
||||
cursor: none;
|
||||
}
|
||||
.toggle-checkbox:not(:checked)
|
||||
~ .site-wrapper
|
||||
.hero-img-container:hover
|
||||
.img-day-normal {
|
||||
opacity: 0;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.glow-effect {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 20px;
|
||||
opacity: 0.2;
|
||||
z-index: 1;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
/* --- Common Section Styles --- */
|
||||
.section-pad {
|
||||
padding: 80px 0;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
gap: 50px;
|
||||
}
|
||||
.about-text p {
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tags span {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 14px;
|
||||
border-radius: 50px;
|
||||
font-size: 0.85rem;
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* --- Projects (Clickable) --- */
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
/* Wrapper is now an anchor tag */
|
||||
a.project-card {
|
||||
text-decoration: none; /* Remove underline */
|
||||
color: inherit; /* Keep text color */
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
border-color 0.3s;
|
||||
}
|
||||
|
||||
a.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card-content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
/* Card Header for Arrow Icon */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.arrow-icon {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transition: 0.3s;
|
||||
color: var(--accent);
|
||||
}
|
||||
a.project-card:hover .arrow-icon {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.stack-icons {
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Certificates Section --- */
|
||||
.cert-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.cert-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.cert-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.cert-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.cert-info h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.issuer {
|
||||
color: var(--accent);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.date {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* --- Blog Section --- */
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
border-color 0.3s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.blog-tag {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.blog-excerpt {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1; /* Pushes the link to the bottom */
|
||||
}
|
||||
|
||||
.read-more {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* --- View All Button Wrapper --- */
|
||||
.view-all-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* --- Social Media Buttons --- */
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.social-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%; /* Makes them round */
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
/* Hover Effect: Glows with the accent color */
|
||||
.social-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px var(--glow);
|
||||
}
|
||||
|
||||
/* --- Contact & Footer --- */
|
||||
.contact-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.contact-container p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.email-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.full-width {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted); /* Maintained your font fix */
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* --- Back to Top Button --- */
|
||||
#back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--accent);
|
||||
color: white; /* Arrow color */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
||||
/* Hidden state */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Visible state (added by JS) */
|
||||
#back-to-top.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#back-to-top:hover {
|
||||
background-color: var(--text-main); /* Inverts color on hover */
|
||||
color: var(--bg);
|
||||
transform: translateY(-5px); /* Lift effect */
|
||||
}
|
||||
|
||||
/* Mobile Adjustment */
|
||||
@media (max-width: 600px) {
|
||||
#back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Content Layout */
|
||||
/* --- Mobile Menu (Max-width 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
/* Show Hamburger */
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Animate Hamburger to X when active */
|
||||
.hamburger.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger.active .bar:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
}
|
||||
.hamburger.active .bar:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* --- FIXED: Mobile Dropdown --- */
|
||||
.nav-links {
|
||||
position: absolute;
|
||||
top: 100%; /* Sits exactly below the navbar */
|
||||
left: -120vw; /* Hide completely off-screen to the left */
|
||||
flex-direction: column;
|
||||
|
||||
/* Force it to fill the ENTIRE screen width */
|
||||
width: 100vw;
|
||||
|
||||
text-align: center;
|
||||
transition: left 0.4s ease-in-out; /* Smooth sliding animation */
|
||||
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 30px 0;
|
||||
gap: 20px;
|
||||
|
||||
/* Theme-Based Transparent Background */
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
/* Show Links when active */
|
||||
.nav-links.active {
|
||||
/* This offsets the 5% padding of your site-wrapper
|
||||
so the menu perfectly touches the left edge of the phone screen */
|
||||
left: -5vw;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-main);
|
||||
font-size: 1.2rem;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Mobile Content Layout */
|
||||
.hero {
|
||||
flex-direction: column-reverse;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-btns {
|
||||
justify-content: center;
|
||||
}
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.cert-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user