diff --git a/index.html b/index.html
index 25d5342..8e5f7c6 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,52 @@
+
+ Choose Background:
+
+ Light Blue
+ Gradient
+ Dark
+ Pastel
+ Mint Green
+
+
+
+
+
+
+
+
+
Vinit
+
Hello, Glad to see you here!
+
I am a front-end architect from Ranchi. You can view my works
+ here .
+ I love to cook Maggie when I'm not cooking any website.
+ Presently I am undergraduate at
+ VIT University Vellore.
+ Thank You for Visiting!
+
+
Ping me at vinitshahdeo@gmail.com
+
+
+
+
diff --git a/style.css b/style.css
index 8dce62b..f49abd8 100644
--- a/style.css
+++ b/style.css
@@ -1,217 +1,248 @@
/*
* Author - Vinit Shahdeo
-* Email - vinitshahdeo@gmail.com
+* Modified by - Karan Mishra�
*/
+
+/* ===== GENERAL STYLES ===== */
body {
font-family: 'Montserrat', sans-serif;
- color: #404142;
- font-size: 16px;
+ color: #404142;
+ font-size: 16px;
letter-spacing: 0.2px;
+ background: #f0f4f8; /* ✅ New subtle background for better card contrast */
+ margin: 0;
+ padding: 0;
}
+
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
- font-family: 'Roboto', sans-serif;
- text-transform: capitalize;
- letter-spacing: -0.1px;
- opacity:0.7;
+ font-family: 'Roboto', sans-serif;
+ text-transform: capitalize;
+ letter-spacing: -0.1px;
+ opacity: 0.7;
}
+
hr {
- height: 0;
- border:2px solid #404142;
- opacity: 0.1;
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
+ height: 0;
+ border: 2px solid #404142;
+ opacity: 0.1;
+ box-sizing: content-box;
}
+
ul {
margin: 0;
padding: 0;
list-style: none;
}
+
a {
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
+ transition: all 0.3s;
}
+
a:hover, a:focus, a:active, a:visited {
- text-decoration: none;
+ text-decoration: none;
}
-/* Button for title text */
+/* ===== BUTTONS ===== */
.btn {
text-transform: capitalize;
- font-weight: 600;
- -webkit-transition: all 0.6s;
- -moz-transition: all 0.6s;
- transition: all 0.6s;
-
+ font-weight: 600;
+ transition: all 0.6s;
}
+
.btn-lg {
padding: 5px 10px;
- font-size: 16px;
- line-height: none;
- border-radius: 4px;
+ font-size: 16px;
+ line-height: none;
+ border-radius: 4px;
}
.btn-yellow {
background-color: #fcd93b;
color: #2a2a2a;
opacity: 0.8;
- -webkit-transition: all 0.6s;
- -moz-transition: all 0.6s;
- transition: all 0.6s;
-
+ transition: all 0.6s;
}
+
.btn-yellow:hover {
opacity: 0.9;
- text-transform: uppercase;
- cursor: pointer;
+ text-transform: uppercase;
+ cursor: pointer;
}
.btn-red {
background-color: rgb(251,155,79);
color: #fff;
opacity: 0.8;
- -webkit-transition: all 0.6s;
- -moz-transition: all 0.6s;
- transition: all 0.6s;
-
+ transition: all 0.6s;
}
+
.btn-red:hover {
opacity: 0.9;
- text-transform: uppercase;
- cursor: pointer;
+ text-transform: uppercase;
+ cursor: pointer;
}
-/* div class */
+/* ===== PROFILE CARD ===== */
.about {
padding: 20px;
margin-top: 20px;
+ background: #ffffff; /* ✅ keeps card white for clean contrast */
+ border-radius: 10px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
}
+
+.about:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
.about span {
font-size: 2em;
- color: #016cc7;
-}
- .about p{
- opacity:0.6;
- }
- .about p span{
- color:#016cc7;
- font-size:1em;
- opacity: 1.0;
- font-weight: bolder;
- -webkit-transition: all 0.8s;
- -moz-transition: all 0.8s;
- transition: all 0.8s;
- }
- .about p span:hover{
- letter-spacing: 0.1px;
- text-transform: uppercase;
- cursor: pointer;
- }
- .about a{
- text-decoration:none;
- font-weight:bold;
- color:#2a2a2a;
- }
- .about a:hover{
- color:#016cc7;
- }
-.main .about {
- width: 31.333333%;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
- margin-right: 20px;
- border: 3px solid #f6f6f6;
- border-radius: 5px;
-}
-.main .about:hover {
- box-shadow: 3px 3px 10px #ccc;
- transform: translateY(-10px);
-}
-/* Display picture */
+ color: #016cc7;
+}
+
+.about p {
+ opacity: 0.6;
+}
+
+.about p span {
+ color: #016cc7;
+ font-size: 1em;
+ opacity: 1.0;
+ font-weight: bolder;
+ transition: all 0.8s;
+}
+
+.about p span:hover {
+ letter-spacing: 0.1px;
+ text-transform: uppercase;
+ cursor: pointer;
+}
+
+.about a {
+ text-decoration: none;
+ font-weight: bold;
+ color: #2a2a2a;
+}
+
+.about a:hover {
+ color: #016cc7;
+}
+
+/* ===== PROFILE IMAGE ===== */
.main-img {
max-width: 40%;
- border: 4px solid #efefef;
- border-radius: 50%;
- -moz-transition: all 0.3s;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
-}
- .main-img:hover{
- -moz-transform: scale(1.05);
- -webkit-transform: scale(1.05);
- transform: scale(1.05);
- cursor: pointer;
- filter: grayscale(100%);
- -webkit-filter: grayscale(100%);
- filter: gray;
-
- }
-/* Social Media icons */
+ border-radius: 50%;
+ border: 4px solid transparent;
+ transition: border-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+/* ✅ Replaced grayscale + zoom with smooth border & glow */
+.main-img:hover {
+ border-color: #4A90E2;
+ box-shadow: 0 0 15px rgba(74, 144, 226, 0.4);
+ cursor: pointer;
+}
+
+/* ===== SOCIAL ICONS ===== */
ul.social li {
list-style: none;
display: inline-block;
margin: 10px 5px;
}
+
ul.social li a {
-
padding: 0 10px;
}
-.fa{
- color:#016cc7;
- opacity: 0.8;
-}
- .fa:hover{
- opacity: 0.8;
- color:#dd5138;
- }
- /* === Custom Colors of original logo===
-* Remove comments if you want to use it
-*/
-/*
- .fa-linkedin:hover{
- color:#4099ff;
- }
- .fa-github:hover{
- color:#2a2a2a;
- }
- .fa-facebook:hover{
- color:#3b5998;
- }*/
+.fa {
+ color: #016cc7;
+ opacity: 0.8;
+ transition: color 0.3s ease;
+}
+.fa:hover {
+ opacity: 0.9;
+ color: #dd5138;
+}
-/*
- ===Custom Media Queries===
- */
+/* ===== MEDIA QUERIES ===== */
/* Mobile */
-
@media (max-width: 767px) {
-
- .main .about {
- width: 100%
- }
+ .main .about {
+ width: 100%;
+ }
}
-
/* iPad Portrait */
-
@media (min-width: 768px) and (max-width: 991px) {
-
- .main .about {
- width: 49%;
- margin-right: 7px;
- }
+ .main .about {
+ width: 49%;
+ margin-right: 7px;
+ }
}
/* iPad Landscape */
-
@media (min-width: 992px) and (max-width: 1199px) {
- .main .about {
- width: 49%;
- margin-right: 9px;
- }
+ .main .about {
+ width: 49%;
+ margin-right: 9px;
+ }
+}
+
+/* === THEME SELECTOR DROPDOWN === */
+.theme-selector {
+ position: fixed;
+ top: 15px;
+ right: 15px;
+ background: white;
+ border-radius: 8px;
+ padding: 8px 12px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ font-size: 14px;
+ z-index: 100;
+}
+
+.theme-selector select {
+ margin-left: 8px;
+ padding: 4px 6px;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ cursor: pointer;
+}
+
+/* === BACKGROUND THEMES === */
+
+/* Default */
+body.default {
+ background: #f0f4f8;
+ color: #404142;
+}
+
+/* Gradient */
+body.gradient {
+ background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
+ color: #222;
}
+
+/* Dark */
+body.dark {
+ background: #1e1e1e;
+ color: #f0f0f0;
+}
+
+/* Pastel */
+body.pastel {
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+ color: #333;
+}
+
+/* Mint */
+body.mint {
+ background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+ color: #333;
+}
+
+
+