0% found this document useful (0 votes)
6 views9 pages

Style

The document is a CSS stylesheet defining styles for a web page, including variables for colors, typography, and layout. It includes styles for various components such as the navbar, hero section, cards, and forms, with hover effects and animations. Media queries are also included to ensure responsiveness on smaller screens.

Uploaded by

Asav Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views9 pages

Style

The document is a CSS stylesheet defining styles for a web page, including variables for colors, typography, and layout. It includes styles for various components such as the navbar, hero section, cards, and forms, with hover effects and animations. Media queries are also included to ensure responsiveness on smaller screens.

Uploaded by

Asav Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

:root {

--primary-color: #6366f1;
--secondary-color: #4f46e5;
--background: #ffffff;
--text-primary: #1f2937;
--text-secondary: #4b5563;
--accent-light: #e0e7ff;
--card-bg: #ffffff;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', sans-serif;
background: var(--background);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}

.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
}

.nav-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}

.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
position: relative;
padding: 0.5rem 0;
}

.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
}

.nav-links a:hover::after {
width: 100%;
}

.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--accent-light) 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(var(--accent-light) 2px, transparent 2px);
background-size: 30px 30px;
opacity: 0.5;
animation: fadeIn 2s ease;
}

.hero-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
align-items: center;
position: relative;
}

.hero-text {
animation: fadeInUp 1s ease;
}
.greeting {
color: var(--primary-color);
font-weight: 500;
font-size: 1.2rem;
margin-bottom: 1rem;
display: block;
}

.hero-text h1 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
margin-bottom: 1rem;
line-height: 1.2;
background: linear-gradient(120deg, var(--primary-color), var(--secondary-
color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-text h2 {
color: var(--text-secondary);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}

.hero-image {
display: grid;
gap: 2rem;
animation: fadeInRight 1s ease;
}

.experience-card, .achievement-card {
background: var(--card-bg);
padding: 2rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
transition: var(--transition);
}

.experience-card:hover, .achievement-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(99, 102, 241, 0.1);
}

.number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
display: block;
}

.section-header {
text-align: center;
margin-bottom: 4rem;
padding-top: 6rem;
}

.section-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}

.subtitle {
color: var(--primary-color);
font-size: 1.1rem;
}

.education-grid, .achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.education-card {
background: var(--card-bg);
padding: 2rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
transition: var(--transition);
text-align: center;
position: relative;
overflow: hidden;
}

.education-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-
color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}

.education-card:hover::before {
transform: scaleX(1);
}

.education-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(99, 102, 241, 0.1);
}

.card-icon {
width: 60px;
height: 60px;
background: var(--accent-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
}

.card-icon i {
font-size: 1.5rem;
color: var(--primary-color);
}

.experience-timeline {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}

.timeline-item {
background: var(--card-bg);
padding: 2rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
transition: var(--transition);
border-left: 4px solid var(--primary-color);
position: relative;
}

.timeline-item::before {
content: '';
position: absolute;
left: -12px;
top: 2rem;
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
}

.timeline-item:hover {
transform: translateX(10px);
}

.contact {
padding: 100px 0;
background: linear-gradient(to bottom, #ffffff, var(--accent-light));
}

.contact-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
padding: 2rem;
}

.info-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
text-align: center;
margin-bottom: 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.info-icon {
width: 60px;
height: 60px;
background: var(--accent-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}

.info-icon i {
font-size: 1.5rem;
color: var(--primary-color);
}

.info-card h3 {
margin-bottom: 1rem;
color: var(--text-primary);
}

.info-card a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}

.info-card a:hover {
color: var(--secondary-color);
}

.social-connect {
text-align: center;
margin-top: 3rem;
}

.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
}

.social-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.social-icon:hover {
transform: translateY(-5px);
background: var(--primary-color);
color: white;
}

.contact-form-wrapper {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.form-header {
text-align: center;
margin-bottom: 2.5rem;
}

.form-header h3 {
color: var(--text-primary);
font-size: 1.8rem;
margin-bottom: 0.5rem;
}

.form-header p {
color: var(--text-secondary);
}

.form-group {
position: relative;
margin-bottom: 2rem;
}

.form-group.floating {
position: relative;
}

.form-group.floating input,
.form-group.floating textarea {
width: 100%;
padding: 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: transparent;
transition: all 0.3s ease;
font-size: 1rem;
}

.form-group.floating label {
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 0.25rem;
background: white;
color: #6b7280;
transition: all 0.3s ease;
pointer-events: none;
}

.form-group.floating input:focus,
.form-group.floating textarea:focus,
.form-group.floating input:not(:placeholder-shown),
.form-group.floating textarea:not(:placeholder-shown) {
border-color: var(--primary-color);
outline: none;
}

.form-group.floating input:focus ~ label,


.form-group.floating textarea:focus ~ label,
.form-group.floating input:not(:placeholder-shown) ~ label,
.form-group.floating textarea:not(:placeholder-shown) ~ label {
transform: translateY(-1.5rem) translateX(-0.5rem) scale(0.85);
background: white;
color: var(--primary-color);
}

.submit-btn {
width: 100%;
padding: 1rem;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}

.submit-btn:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}

.submit-btn i {
transition: transform 0.3s ease;
}

.submit-btn:hover i {
transform: translateX(5px);
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}

@media (max-width: 768px) {


.hero-content {
grid-template-columns: 1fr;
text-align: center;
}

.contact-container {
grid-template-columns: 1fr;
}

.hero-text h1 {
font-size: 3rem;
}

.nav-links {
display: none;
}

.contact-form-wrapper {
padding: 2rem;
}
}

You might also like