Compare commits
No commits in common. "e530ab8a41c4d77ecce6a98e834370e1b192ca13" and "f398788adbdf1a39329a9252e3c6aa797da64f19" have entirely different histories.
e530ab8a41
...
f398788adb
@ -10,84 +10,16 @@
|
||||
# General
|
||||
--------------------------------------------------------------*/
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--highlight: #ffb727;
|
||||
--highlight-alt: #ffc85a;
|
||||
|
||||
--background: #fff;
|
||||
|
||||
--border: var(--background);
|
||||
|
||||
--btn-bg: var(--highlight);
|
||||
--btn-bg-hover: #ffc550;
|
||||
--btn-bg-hover-2: #f3a200;
|
||||
|
||||
--text-color: #444;
|
||||
--text-color-alt: var(--background);
|
||||
--text-color-alt: #fff;
|
||||
--text-color-alt-2: #eee;
|
||||
|
||||
--section-title-color: #3b434a;
|
||||
--section-title-color-back: #3b434a17;
|
||||
|
||||
--progress-text-color: #3b434a;
|
||||
--progress-background: #e6e8eb;
|
||||
|
||||
--resume-time-background: #eef0f2;
|
||||
--resume-border: #82909c;
|
||||
--resume-btn-border: var(--highlight);
|
||||
--resume-btn-hover: var(--background);
|
||||
|
||||
--skill-title: #111;
|
||||
--skill-icon-bg: #fff4df;
|
||||
|
||||
--contact-title-icon-bg: #fff6e4;
|
||||
--contact-title: #777;
|
||||
--contact-box-shadow: rgba(214, 215, 216, 0.6);
|
||||
--contact-icon: #687683;
|
||||
--contact-icon-border: #dde1e4;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--highlight: #ffbc35;
|
||||
--highlight-alt: #ffc859;
|
||||
|
||||
--background: rgb(24, 26, 27);
|
||||
|
||||
--border: #303436;
|
||||
|
||||
--btn-bg: #b57800;
|
||||
--btn-bg-hover: #f3a200;
|
||||
--btn-bg-hover-2: #f3a200;
|
||||
|
||||
--text-color: rgb(189, 183, 175);
|
||||
--text-color-alt: #e8e6e5;
|
||||
--text-color-alt-2: #e8e6e5;
|
||||
|
||||
--section-title-color: #beb8b0;
|
||||
--section-title-color-back: #beb8b017;
|
||||
|
||||
--progress-text-color: #beb8b0;
|
||||
--progress-background: #252829;
|
||||
|
||||
--resume-time-background: #202325;
|
||||
--resume-border: #50565a;
|
||||
--resume-btn-border: #a76f00;
|
||||
--resume-btn-hover: var(--text-color-alt);
|
||||
|
||||
--skill-title: #dddad6;
|
||||
--skill-icon-bg: #462e00;
|
||||
|
||||
--contact-title-icon-bg: #432d00;
|
||||
--contact-title: #9d9488;
|
||||
--contact-box-shadow: rgba(45, 50, 52, 0.6);
|
||||
--contact-icon: #9e9589;
|
||||
--contact-icon-border: #393d40;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: var(--text-color);
|
||||
background: var(--background);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@ -97,7 +29,7 @@ a {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--highlight-alt);
|
||||
color: #ffc85a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -126,7 +58,7 @@ h6 {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 996;
|
||||
background: var(--btn-bg);
|
||||
background: var(--highlight);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
@ -140,7 +72,7 @@ h6 {
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background: var(--btn-bg-hover);
|
||||
background: #ffc550;
|
||||
color: var(--text-color-alt);
|
||||
}
|
||||
|
||||
@ -194,8 +126,7 @@ h6 {
|
||||
}
|
||||
|
||||
.navbar a,
|
||||
.navbar a:focus,
|
||||
.navbar li > i {
|
||||
.navbar a:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -218,12 +149,10 @@ h6 {
|
||||
}
|
||||
|
||||
.navbar a:hover,
|
||||
.navbar li > i:hover,
|
||||
.navbar .active,
|
||||
.navbar .active:focus,
|
||||
.navbar li:hover > a {
|
||||
color: var(--highlight);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul {
|
||||
@ -236,7 +165,7 @@ h6 {
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: var(--background);
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
border-radius: 4px;
|
||||
@ -298,7 +227,7 @@ h6 {
|
||||
* Mobile Navigation
|
||||
*/
|
||||
.mobile-nav-toggle {
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
@ -343,7 +272,7 @@ h6 {
|
||||
left: 15px;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
background-color: var(--background);
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
transition: 0.3s;
|
||||
}
|
||||
@ -374,7 +303,7 @@ h6 {
|
||||
z-index: 99;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
background: var(--background);
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
}
|
||||
|
||||
@ -514,7 +443,7 @@ section {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 0;
|
||||
color: var(--section-title-color);
|
||||
color: #3b434a;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -522,7 +451,7 @@ section {
|
||||
.section-title span {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
color: var(--section-title-color-back);
|
||||
color: #3b434a17;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
@ -652,7 +581,7 @@ section {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-family: "Raleway", sans-serif;
|
||||
color: var(--progress-text-color);
|
||||
color: #3b434a;
|
||||
}
|
||||
|
||||
.progress .skill .val {
|
||||
@ -661,7 +590,7 @@ section {
|
||||
}
|
||||
|
||||
.progress-bar-wrap {
|
||||
background: var(--progress-background);
|
||||
background: #e6e8eb;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@ -685,13 +614,13 @@ section {
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--section-title-color);
|
||||
color: #3b434a;
|
||||
}
|
||||
|
||||
.resume .resume-item {
|
||||
padding: 0 0 20px 20px;
|
||||
margin-top: -2px;
|
||||
border-left: 2px solid var(--resume-border);
|
||||
border-left: 2px solid #82909c;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -706,7 +635,7 @@ section {
|
||||
|
||||
.resume .resume-item h5 {
|
||||
font-size: 16px;
|
||||
background: var(--resume-time-background);
|
||||
background: #eef0f2;
|
||||
padding: 5px 15px;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
@ -734,25 +663,25 @@ section {
|
||||
border-radius: 50px;
|
||||
left: -9px;
|
||||
top: 0;
|
||||
background: var(--background);
|
||||
background: white;
|
||||
border: 2px solid var(--highlight);
|
||||
}
|
||||
|
||||
.resume .resume-item.secondary::before {
|
||||
border-color: var(--resume-border);
|
||||
border-color: #82909c;
|
||||
}
|
||||
|
||||
.resume .btn {
|
||||
.btn {
|
||||
font-size: 20px;
|
||||
border-color: var(--resume-btn-border);
|
||||
border-color: var(--highlight);
|
||||
color: var(--highlight);
|
||||
transition: 0.3s;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.resume .btn:hover {
|
||||
transition: 0.3s;
|
||||
color: var(--resume-btn-hover);
|
||||
background-color: var(--btn-bg);
|
||||
.btn:hover {
|
||||
transition: background-color, color, border-color;
|
||||
color: #fff;
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@ -762,11 +691,11 @@ section {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--background);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.skills .icon {
|
||||
@ -777,8 +706,7 @@ section {
|
||||
border-radius: 50%;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: var(--skill-icon-bg);
|
||||
transition: 0.3s;
|
||||
background: #fff4df;
|
||||
}
|
||||
|
||||
.skills .icon i {
|
||||
@ -794,7 +722,7 @@ section {
|
||||
}
|
||||
|
||||
.skills .title a {
|
||||
color: var(--skill-title);
|
||||
color: #111;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@ -844,7 +772,7 @@ section {
|
||||
|
||||
.testimonials .testimonial-item {
|
||||
text-align: center;
|
||||
color: var(--text-color-alt);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.testimonials .testimonial-item .testimonial-img {
|
||||
@ -858,7 +786,7 @@ section {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0 5px 0;
|
||||
color: var(--text-color-alt);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.testimonials .testimonial-item h4 {
|
||||
@ -889,7 +817,7 @@ section {
|
||||
.testimonials .testimonial-item p {
|
||||
font-style: italic;
|
||||
margin: 0 auto 15px auto;
|
||||
color: var(--text-color-alt-2);
|
||||
color: #eee;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
@ -934,7 +862,7 @@ section {
|
||||
text-transform: uppercase;
|
||||
color: var(--text-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: 2px solid var(--border);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.portfolio #portfolio-flters li:hover,
|
||||
@ -969,9 +897,9 @@ section {
|
||||
|
||||
.portfolio .portfolio-item .portfolio-info h4 {
|
||||
font-size: 18px;
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -987,7 +915,7 @@ section {
|
||||
right: 40px;
|
||||
font-size: 24px;
|
||||
top: calc(50% - 18px);
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@ -1030,7 +958,7 @@ section {
|
||||
.swiper-pagination-bullet {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--background);
|
||||
background-color: #fff;
|
||||
opacity: 1;
|
||||
border: 1px solid var(--highlight);
|
||||
}
|
||||
@ -1084,7 +1012,7 @@ section {
|
||||
--------------------------------------------------------------*/
|
||||
.pricing .box {
|
||||
padding: 20px;
|
||||
background: var(--background);
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 5px;
|
||||
@ -1158,7 +1086,7 @@ section {
|
||||
display: inline-block;
|
||||
padding: 8px 35px;
|
||||
border-radius: 4px;
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
transition: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@ -1168,11 +1096,11 @@ section {
|
||||
}
|
||||
|
||||
.pricing .btn-buy:hover {
|
||||
background: var(--highlight-alt);
|
||||
background: #ffc85a;
|
||||
}
|
||||
|
||||
.pricing .featured h3 {
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
background: var(--highlight);
|
||||
}
|
||||
|
||||
@ -1186,7 +1114,7 @@ section {
|
||||
font-size: 14px;
|
||||
padding: 1px 0 3px 0;
|
||||
background: var(--highlight);
|
||||
color: var(--background);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@ -1195,7 +1123,7 @@ section {
|
||||
.contact .info-box {
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
box-shadow: 0 0 30px var(--contact-box-shadow);
|
||||
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
|
||||
padding: 20px 0 30px 0;
|
||||
}
|
||||
|
||||
@ -1204,12 +1132,12 @@ section {
|
||||
color: var(--highlight);
|
||||
border-radius: 50%;
|
||||
padding: 15px;
|
||||
background: var(--contact-title-icon-bg);
|
||||
background: #fff6e4;
|
||||
}
|
||||
|
||||
.contact .info-box h3 {
|
||||
font-size: 20px;
|
||||
color: var(--contact-title);
|
||||
color: #777777;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
}
|
||||
@ -1230,13 +1158,13 @@ section {
|
||||
.contact .social-links a {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
color: var(--contact-icon);
|
||||
color: #687683;
|
||||
line-height: 1;
|
||||
margin: 0 8px;
|
||||
transition: 0.3s;
|
||||
padding: 14px;
|
||||
border-radius: 50px;
|
||||
border: 1px solid var(--contact-icon-border);
|
||||
border: 1px solid #dde1e4;
|
||||
}
|
||||
|
||||
.contact .email a {
|
||||
@ -1246,9 +1174,106 @@ section {
|
||||
}
|
||||
|
||||
.contact .social-links a:hover {
|
||||
color: var(--text-color-alt-2);
|
||||
border-color: var(--btn-bg);
|
||||
background: var(--btn-bg);
|
||||
color: #fff;
|
||||
border-color: var(--highlight);
|
||||
background: var(--highlight);
|
||||
}
|
||||
|
||||
.contact .php-email-form {
|
||||
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
|
||||
padding: 27px;
|
||||
}
|
||||
|
||||
.contact .php-email-form .validate {
|
||||
display: none;
|
||||
color: red;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact .php-email-form .error-message {
|
||||
display: none;
|
||||
color: #fff;
|
||||
background: #ed3c0d;
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact .php-email-form .error-message br + br {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.contact .php-email-form .sent-message {
|
||||
display: none;
|
||||
color: #fff;
|
||||
background: #18d26e;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact .php-email-form .loading {
|
||||
display: none;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.contact .php-email-form .loading:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 10px -6px 0;
|
||||
border: 3px solid #18d26e;
|
||||
border-top-color: #eee;
|
||||
animation: animate-loading 1s linear infinite;
|
||||
}
|
||||
|
||||
.contact .php-email-form input,
|
||||
.contact .php-email-form textarea {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contact .php-email-form input::focus,
|
||||
.contact .php-email-form textarea::focus {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
.contact .php-email-form input {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.contact .php-email-form textarea {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type="submit"] {
|
||||
background: var(--highlight);
|
||||
border: 0;
|
||||
padding: 10px 24px;
|
||||
color: #fff;
|
||||
transition: 0.4s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type="submit"]:hover {
|
||||
background: #ffc85a;
|
||||
}
|
||||
|
||||
@keyframes animate-loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@ -1258,7 +1283,7 @@ section {
|
||||
background: url("../img/footer-bg.jpg") top center no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
color: var(--text-color-alt-2);
|
||||
color: var(--background);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
@ -1282,7 +1307,7 @@ section {
|
||||
#footer h3 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--text-color-alt-2);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-family: "Satisfy", serif;
|
||||
padding: 0;
|
||||
@ -1303,8 +1328,8 @@ section {
|
||||
#footer .social-links a {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
background: var(--btn-bg);
|
||||
color: var(--text-color-alt-2);
|
||||
background: var(--highlight);
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8px 0;
|
||||
margin-right: 4px;
|
||||
@ -1316,8 +1341,8 @@ section {
|
||||
}
|
||||
|
||||
#footer .social-links a:hover {
|
||||
background: var(--btn-bg-hover-2);
|
||||
color: var(--text-color-alt-2);
|
||||
background: #f3a200;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -276,19 +276,4 @@
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
if (localStorage.getItem("theme") == "light") {
|
||||
toggleDarkMode();
|
||||
}
|
||||
})();
|
||||
|
||||
function toggleDarkMode() {
|
||||
let dark_indicator = document.querySelector("#navbar i");
|
||||
dark_indicator.classList.toggle("bi-moon-stars-fill");
|
||||
dark_indicator.classList.toggle("bi-sun-fill");
|
||||
|
||||
document.body.classList.toggle("dark");
|
||||
|
||||
let theme = document.body.classList.contains("dark") ? "dark" : "light";
|
||||
document.documentElement.style.setProperty("color-scheme", theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
======================================================== -->
|
||||
</head>
|
||||
|
||||
<body class="dark">
|
||||
<body>
|
||||
|
||||
<!-- ======= Header ======= -->
|
||||
<header id="header" class="fixed-top d-flex justify-content-center
|
||||
@ -54,8 +54,7 @@
|
||||
<li><a class="nav-link scrollto" href="#skills">Skills</a></li>
|
||||
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
|
||||
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
|
||||
<li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i>
|
||||
</li>
|
||||
<li><button onclick="toggleDarkMode()">Dark</button> </li>
|
||||
</ul>
|
||||
<i class="bi bi-list mobile-nav-toggle"></i>
|
||||
</nav><!-- .navbar -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user