Scribd
Upload
8 views

portfolio code

This is the sample code document for portfolio website creation

Uploaded by

Darshan Nikam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

portfolio code

This is the sample code document for portfolio website creation

Uploaded by

Darshan Nikam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 66

<!

DOCTYPE html>

<html lang="en">

<head>

<title>Protfolio-Bhushan Gawali</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"
rel="stylesheet">

<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">

<link rel="stylesheet" href="css/animate.css">

<link rel="stylesheet" href="css/owl.carousel.min.css">

<link rel="stylesheet" href="css/owl.theme.default.min.css">

<link rel="stylesheet" href="css/magnific-popup.css">

<link rel="stylesheet" href="css/aos.css">

<link rel="stylesheet" href="css/ionicons.min.css">

<link rel="stylesheet" href="css/flaticon.css">

<link rel="stylesheet" href="css/icomoon.css">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="styles.css">

<!-- <link rel="icon" href="https://i.ibb.co/1s36DLT/your-image.png" type="image/png"> -->

<link rel="icon" href="https://i.ibb.co/dtHy9bG/your-image.png" type="image/png">


<style>

.light-gray-text {

color: lightgray;

font-size: 18px;

text-align: center;

font-style: italic;

letter-spacing: 1px;

/* Keeps border tight around the text */

/* Adjust margin for the LinkedIn and Resume buttons */

.btn-linkedin, .btn-resume {

margin-bottom: 15px; /* Adjust this value to increase/decrease the gap */

/* Style for icon buttons */

.btn-icon {

color: white;

background-color: black;

border: 2px solid white;

border-radius: 50%;

width: 40px;

height: 40px;

font-size: 1.2rem;

margin: 5px; /* Adds spacing between each icon */


}

/* Optional: Adjust icon button margin for better spacing */

.btn-icon:not(:last-child) {

margin-right: 10px; /* Adjust this value for space between icons */

/* Container styling */

.btn-container {

display: flex;

gap: 15px;

justify-content: left;

align-items: center;

/* Icon button styling for Gmail, WhatsApp, and GitHub */

.btn-icon {

display: inline-flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

color: white;

background-color: black;

border: 2px solid white;

border-radius: 50%;

transition: all 0.3s ease;


text-decoration: none;

font-size: 1.2rem; /* Adjust icon size */

.btn-icon:hover {

background-color: rgb(255, 200, 0);

color: black;

border-color: rgb(255, 200, 0);

/* -------------------- */

/* Remove horizontal scrolling */

body, html {

overflow-x: hidden;

/* Project Title Hover Effect */

.project-title a {

color: white;

font-size: 1rem;

font-weight: bold;

text-decoration: none;

transition: color 0.3s ease;

}
.project-title a:hover {

color: rgb(255, 200, 0); /* Yellow color on hover */

/* Tools Text Style */

.tools {

color: rgb(255, 200, 0); /* Yellow color */

font-size: 0.8rem;

margin-top: 5px;

/* View Project Button */

.view-project-container {

text-align: center;

margin-top: 15px;

.view-project-btn {

display: inline-block;

padding: 10px 20px;

background-color: white;

color: black;

font-weight: bold;

border: 2px solid white;

border-radius: 4px;

text-decoration: none;

transition: all 0.3s ease;

}
.view-project-btn:hover {

background-color: rgb(255, 200, 0); /* Yellow color on hover */

color: black;

/*======================================

//--//--> ABOUT

======================================*/

.about-mf .box-shadow-full {

padding-top: 4rem;

padding-bottom: 4rem;

.about-mf .about-img {

margin-bottom: 2rem;

.about-mf .about-img img {

margin-left: 10px;

.skill-mf .progress {

margin: .5rem 0 1.2rem 0;

border-radius: 0;

height: .7rem;

}
.skill-mf .progress .progress-bar {

height: .7rem;

background-color: #ffbd39;

/* Animation styles */

#typing-animation {

position: relative;

font-size: 30px;

font-weight: bold;

color: rgb(255, 255, 255);

overflow: hidden;

white-space: nowrap;

animation: typing 3s steps(20, end) infinite;

#typing-animation:before {

content: "";

top: 0;

left: 0;

width: 0;

height: 100%;

background-color: #ccc;

animation: typing-cursor 0.5s ease-in-out infinite;

@keyframes typing {

from {
width: 0;

to {

width: 100%;

@keyframes typing-cursor {

from {

width: 5px;

to {

width: 0;

/* project image zoom effect */

/* .zoom-effect {

overflow: hidden;

transition: transform 0.3s ease-out;

.zoom-effect:hover {

transform: scale(1.05);

} */

.image-container {

display: inline-block;
position: relative;

border: 2px solid white;

border-radius: 5px;

.image-container img {

display: block;

width: 100%;

height: auto;

transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;

.image-container img:hover {

transform: scale(1.1);

filter: brightness(1);

box-shadow: 0 0 15px rgb(131, 126, 126);

/* Additional CSS for other sections */

.zoom-effect {

overflow: hidden;

position: relative;

.zoom-effect img {

transition: transform 0.3s ease;

}
.zoom-effect:hover img {

transform: scale(1.01);

.skill-icons img {

width: 40px;

height: 40px;

margin: 10px;

transition: transform 0.3s ease;

.skill-icons img:hover {

transform: scale(1.01);

.counter-wrap {

display: flex;

align-items: center;

justify-content: center;

.counter-wrap .number {

font-size: 3em;

font-weight: bold;

color: #000;

.project .text {

text-align: center;
margin-top: 10px;

.project {

border: 1px solid rgba(255, 255, 255, 0.5);

border-radius: 5px;

backdrop-filter: blur(5px);

transition: border-color 0.3s ease;

.project:hover {

border-color: rgba(255, 255, 255, 0.8);

.project-item {

margin-bottom: 30px; /* Adjust the value to control spacing */

.project-row {

margin-bottom: 60px; /* Extra space between every three projects */

/* For larger screens (PC) - Full opacity */

@media (min-width: 768px) {

.hero .home-slider .slider-item .img {

background-image: url('images/bg-1.png');

opacity: 1; /* No opacity change on PC */

}
/* For smaller screens (Mobile) - Lightened background */

@media (max-width: 767px) {

.hero .home-slider .slider-item .img {

background-image: url('images/bg-1.png');

opacity: 0.5; /* Reduced opacity for mobile (10-20%) */

/* Styling the navbar brand */

.navbar-brand {

font-size: 1.8rem; /* Slightly larger font */

font-weight: 600; /* Semi-bold for better readability */

color: #FFD700; /* Yellow color */

font-family: 'Pacifico', cursive, sans-serif; /* Fancy cursive font with fallbacks */

transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effect */

letter-spacing: 1px; /* Subtle spacing for readability */

/* Hover effect */

.navbar-brand:hover {

color: #FFA500; /* Orange shade on hover */

transform: scale(1.05); /* Slight zoom effect on hover */

text-shadow: 0px 0px 8px rgba(255, 165, 0, 0.7); /* Soft glow on hover */

/* Mobile-specific enhancements */

@media (max-width: 991.98px) {

.navbar-brand {

color: #FFD700; /* Keep yellow color on mobile */


text-shadow: 0px 0px 6px rgba(255, 215, 0, 0.5); /* Soft glow on small screens */

/* Navbar and Menu Icon Styling */

.navbar {

position: sticky;

top: 0;

z-index: 1000;

background: #333; /* Dark background for contrast */

transition: background-color 0.3s ease;

.navbar-toggler {

border: none;

outline: none;

background: transparent;

.oi-menu, .oi-close {

font-size: 1.8rem;

color: #FFD700; /* Yellow color */

transition: color 0.3s ease, transform 0.3s ease;

/* Menu Icon Hover and Opened State */

.navbar-toggler .oi-menu,

.navbar-toggler.active .oi-close {
position: relative;

cursor: pointer;

color: #FFA500;

/* Adding hover effect for a fancy feel */

.navbar-toggler:hover .oi-menu,

.navbar-toggler.active:hover .oi-close {

color: #ffeb3b; /* Brighter yellow */

transform: scale(1.2); /* Slight zoom on hover */

/* Smooth Icon Transition */

/* .oi-menu,

.oi-close {

display: inline-block;

transform-origin: center;

transition: opacity 0.3s, transform 0.3s ease-in-out;

} */

.navbar-toggler.active .oi-menu {

opacity: 0;

transform: rotate(90deg) scale(0.5);

.navbar-toggler.active .oi-close {

opacity: 1;

transform: rotate(0deg) scale(1);

}
/* Hide close icon by default, show only when menu is active */

.oi-close {

display: inline-block;

opacity: 0;

position: absolute;

top: 0;

left: 0;

transition: opacity 0.3s ease, transform 0.3s ease;

/* Remove extra spacing between navbar and home section */

#home-section {

padding-top: 0; /* Remove top padding */

margin-top: -20px; /* Adjust this value as needed to reduce space */

</style>

<script>

document.addEventListener('DOMContentLoaded', function () {

const menuButton = document.querySelector('.navbar-toggler');

const menuIcon = menuButton.querySelector('.oi-menu');

const closeIcon = document.createElement('span'); // Close icon element

// Add close icon to button

closeIcon.classList.add('oi', 'oi-close');

menuButton.appendChild(closeIcon);

menuButton.addEventListener('click', function () {

menuButton.classList.toggle('active'); // Toggle active state


});

// Ensure visibility of the navbar on scroll for mobile

window.addEventListener('scroll', () => {

if (window.scrollY > 100) {

menuButton.style.opacity = "1";

menuButton.style.transition = "opacity 0.3s ease";

} else {

menuButton.style.opacity = "0.9";

});

});

</script>

<head>

<!-- Add Font Awesome for icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/


all.min.css">

</head>

<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar ftco-navbar-light site-navbar-target"


id="ftco-navbar">

<div class="container">

<!-- Portfolio Brand with Icon -->

<a class="navbar-brand" href="index.html">


<i style="margin-right: 10px;" class="fas fa-briefcase" style="margin-right: 12px;"></i>Portfolio

</a>

<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-


toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-
label="Toggle navigation">

<span class="navbar-toggler-icon">

<!-- Default icon for the menu button (three lines) -->

<i class="fas fa-bars" id="navbar-toggler-icon"></i>

</span>

</button>

<div class="collapse navbar-collapse" id="ftco-nav">

<ul class="navbar-nav nav ml-auto">

<li class="nav-item"><a href="#home-section" class="nav-link"><span>Home</span></a></li>

<li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li>

<li class="nav-item"><a href="#skills-section" class="nav-link"><span>Skills</span></a></li>

<li class="nav-item"><a href="#projects-section"


class="nav-link"><span>Certification</span></a></li>

<li class="nav-item"><a href="#certification-section"


class="nav-link"><span>Projects</span></a></li>

<li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li>

</ul>

</div>

</div>

</nav>

<style>

/* Navbar Styling */

#ftco-navbar .navbar-brand {
font-family: 'Roboto', sans-serif;

font-size: 28px;

font-weight: 700;

letter-spacing: 1px;

color: #f9c700;

display: flex;

align-items: center;

/* Portfolio Icon Styling */

#ftco-navbar .navbar-brand i {

margin-right: 10px;

font-size: 25px;

color: #ffffff;

/* Hover Effect on Navbar Brand */

#ftco-navbar .navbar-brand:hover {

color: #FFD700;

text-decoration: none;

#ftco-navbar .navbar-nav .nav-link:hover {

color: #f2c800;

/* Change navbar background */

#ftco-navbar {

background-color: #000000;
}

/* Menu Button Styling */

.navbar-toggler {

border: none; /* Remove border from button */

.navbar-toggler-icon i {

font-size: 24px; /* Set icon size */

color: #ffffff; /* Set color to white */

/* Smaller Menu Button for Mobile */

@media (max-width: 800px) {

.navbar-toggler-icon i {

font-size: 24px; /* Smaller size on mobile */

</style>

<!-- JavaScript for Smooth Scrolling and Icon Toggle -->

<script>

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const targetSection = document.querySelector(this.getAttribute('href'));

// Scroll to the section


targetSection.scrollIntoView({

behavior: 'smooth'

});

// Close the mobile menu when a link is clicked (on small screens)

if ($(".navbar-collapse").hasClass("show")) {

$(".navbar-collapse").collapse('hide');

});

});

// Toggle the menu icon between bars and cross on click

$(document).ready(function() {

$('.navbar-toggler').on('click', function() {

$('#navbar-toggler-icon').toggleClass('fa-bars fa-times');

});

});

</script>

</body>

<section id="home-section" class="hero">

<div class="container">

<div class="row content-wrapper">

<!-- Right Side: Profile Image and Icons Centered (Now on the left) -->

<div class="col-lg-5 profile-section" style="margin-top: 20px; margin-bottom: 0px;">

<div class="profile-image-container" style="margin-top: 0px; margin-bottom: 0px;">

<img src="https://photos.app.goo.gl/WbGxjEdmDLeyguibA" alt="Profile Picture"


class="profile-image">

</div>
<div class="custom-social-links">

<a href="http://wa.me/+918108091971" target="_blank" class="custom-social-icon custom-


whatsapp"><span class="icon-whatsapp"></span></a>

<a href="mailto: [email protected]" target="_blank" class="custom-social-icon custom-


envelope"><span class="icon-envelope"></span></a>

<a href="https://github.com/darsh2282" class="custom-social-icon custom-github"><span


class="icon-github"></span></a>

</div>

</div>

<!-- Left Side: Introductory Text Centered Vertically (Now on the right) -->

<div class="col-lg-5 text-section">

<span style="font-weight: bold; font-size: 32px; font-family: 'Arial', sans-serif;">Hello !</span>

<h1 class="mb-4 mt-3">I'm <span>Darshan Nikam</span></h1>

<!-- Element to contain animated typing -->

<div id="typing-container" style="margin-top: -9px; margin-bottom: 10px;">

<span id="typing-animation"></span>

</div>

<script>

// Initialize the typing animation

const typingAnimationElement = document.getElementById('typing-animation');

// Create an array of typing text

const typingTexts = [

'Data Analyst ',

'SQL Specialist ',

'Data Analyst ',

'Power BI Developer ',


];

// Function to display the typing animation for a given text

function playTypingAnimation(text) {

for (let i = 0; i < text.length; i++) {

setTimeout(() => {

typingAnimationElement.textContent += text[i];

}, i * 200); // Slower typing animation

setTimeout(() => {

typingAnimationElement.textContent = '';

playTypingAnimation(typingTexts[(typingTexts.indexOf(text) + 1) % typingTexts.length]);

}, text.length * 300);

// Start the typing animation loop

playTypingAnimation(typingTexts[0]);

</script>

<!-- Space before buttons added with margin-top -->

<div class="buttons mt-4" style="margin-top: 30px; margin-bottom: 20px;">

<a href="https://www.linkedin.com/in/darshan-nikam/" class="btn-linkedin">LinkedIn</a>

<a href="https://drive.google.com/file/d/17ATzTY4LElw9X_RtAZ002EhXUpJ8Tlua/view"
class="btn-resume">Resume</a>

</div>

</div>

</div>

</div>

</section>
<!-- CSS Styling -->

<style>

/* Section and Container Styling - Targeting Only Home Section */

#home-section {

min-height: 90vh;

display: flex;

align-items: center;

justify-content: center;

background-color: #000000; /* Dark background */

color: #f0f0f0;

padding: 20px 0;

/* Adjusting container to keep elements in center */

#home-section .container {

max-width: 1200px;

display: flex;

justify-content: center;

/* Content Wrapping for Balanced Layout */

#home-section .content-wrapper {

display: flex;

align-items: center;

justify-content: center;

gap: 60px;

width: 100%;
text-align: center;

flex-wrap: wrap; /* Makes layout stack properly on smaller screens */

/* Text Section Styling */

#home-section .text-section {

text-align: center;

max-width: 450px;

display: flex;

flex-direction: column;

align-items: center;

/* Greeting and Name Styling */

#home-section h1 {

color: #ffffff;

font-weight: bold;

font-size: 56px;

line-height: 1.2;

#home-section h1 span {

color: #FFD700;

/* Profile Section Styling */

#home-section .profile-section {

display: flex;

flex-direction: column;
align-items: center;

max-width: 450px;

/* Increased Profile Circle Size */

#home-section .profile-image-container {

width: 275px; /* Increased width */

height: 275px; /* Increased height */

border-radius: 50%;

overflow: hidden;

border: 4px solid #ffffff;

box-shadow: 0 8px 20px rgba(111, 104, 104, 0.4);

margin-bottom: 20px;

transition: transform 0.3s;

#home-section .profile-image-container:hover {

transform: scale(1.1); /* Slight zoom-in effect on hover */

#home-section .profile-image {

width: 100%;

height: 100%;

object-fit: cover;

/* Buttons Styling */

#home-section .buttons .btn {

display: inline-block;
margin-right: 15px;

padding: 12px 28px;

color: #121212;

background-color: #f2c800;

border-radius: 30px;

text-decoration: none;

font-weight: bold;

transition: background-color 0.3s, transform 0.3s;

#home-section .buttons .btn:hover {

background-color: #ffffff;

transform: translateY(-3px); /* Elevation effect */

/* Custom Social Links Styling */

#home-section .custom-social-links {

margin-top: 26px;

text-align: center; /* Center-align the icons */

/* General Styling for Social Icons */

#home-section .custom-social-links .custom-social-icon {

display: inline-block;

font-size: 2.1rem; /* Larger icon size */

margin: 0 20px;

color: #f2c800;

opacity: 0;

transform: scale(0.8); /* Initial zoom-out effect */


transition: color 0.3s ease, transform 0.5s ease; /* Smooth transition for transform */

transition-delay: 0.2s; /* Delay to make animation smooth */

/* Hover Effect - Zoom in by 30% */

#home-section .custom-social-links .custom-social-icon:hover {

color: #ffffff; /* Golden color on hover */

transform: scale(1.3); /* Zoom in by 30% */

transition-delay: 0s; /* No delay when hovering */

/* Animation for Social Icons: Slide-in from different directions */

.custom-social-links .custom-social-icon:nth-child(1) {

animation: slideInFromLeft 1s ease-out forwards;

.custom-social-links .custom-social-icon:nth-child(2) {

animation: slideInFromTop 1s ease-out forwards;

.custom-social-links .custom-social-icon:nth-child(3) {

animation: slideInFromRight 1s ease-out forwards;

/* Slide-in Animations */

@keyframes slideInFromLeft {

0% {

opacity: 0;

transform: translateX(-120px); /* Start from left */

100% {
opacity: 1;

transform: translateX(0); /* End at original position */

@keyframes slideInFromTop {

0% {

opacity: 0;

transform: translateY(-120px); /* Start from top */

100% {

opacity: 1;

transform: translateY(0); /* End at original position */

@keyframes slideInFromRight {

0% {

opacity: 0;

transform: translateX(120px); /* Start from right */

100% {

opacity: 1;

transform: translateX(0); /* End at original position */

/* Reduce the font size of typing animation */

#typing-animation {
font-size: 30px; /* Reduced font size */

font-family: 'Arial', sans-serif;

font-weight: bold;

@media (max-width: 768px) {

#home-section .profile-image-container {

margin-top: 40px; /* Added space before profile image */

width: 220px;

height: 220px;

border-radius: 50%;

border: 4px solid #ffffff;

box-shadow: 0 12px 25px rgba(139, 136, 136, 0.488);

margin-bottom: 20px;

#home-section .profile-image-container:hover {

transform: scale(1.1); /* Slight zoom-in effect on hover */

#home-section h1 {

font-size: 45px;

#home-section .text-section {

font-size: 80%;

#home-section .profile-section {
font-size: 80%;

#home-section .buttons .btn {

padding: 16px 30px;

#home-section .buttons .btn:hover {

transform: translateY(-2px);

#typing-animation {

font-size: 28px;

/* Reducing social icon size */

#home-section .custom-social-links .custom-social-icon {

font-size: 1.8rem; /* Decreased size */

margin: 0 12px; /* Decreased spacing */

/* Remove extra space before "Hello" text */

#home-section .text-section span {

margin-bottom: 0px;

margin-top: -40px;

/* LinkedIn button styling */

.btn-linkedin {
background-color: #ffc800;

color: black;

border: 2px solid #ffc800;

border-radius: 30px;

padding: 10px 26px;

font-weight: bold;

transition: all 0.3s ease;

text-decoration: none;

margin-right: 10px;

.btn-linkedin:hover {

background-color: #ffffff;

color: black;

border-color: rgb(255, 255, 255);

/* Resume button styling */

.btn-resume {

background-color: black;

color: white;

border: 2px solid white;

border-radius: 30px;

padding: 10px 26px;

font-weight: bold;

transition: all 0.3s ease;

text-decoration: none;

margin-left: 16px;

}
.btn-resume:hover {

background-color: rgb(255, 200, 0);

color: black;

border-color: rgb(255, 200, 0);

/* For smaller screens, reduce the size of buttons */

@media (max-width: 768px) {

.btn-linkedin, .btn-resume {

padding: 8px 20px; /* Reduce padding */

font-size: 14px; /* Smaller text size */

</style>

<br><br>

<section class="skills-section" id="about-section">

<div class="container">

<div class="row justify-content-center pb-5">

<div class="col-md-10 heading-section text-center ftco-animate">

<p class="light-gray-text">Get To Know More</p>

<h1 class="big big-2">About Me</h1>

<h2 class="mb-4">About Me</h2>

</div>
</div>

<div class="row justify-content-center">

<div class="col-lg-8 col-md-10 col-12 about-card">

<div class="about-content">

<p class="about-text"> &emsp; I am a passionate Data Analyst with a flair for translating
complex datasets into actionable insights. I specialize in statistical analysis, data visualization, and
problem-solving, using tools like Python, SQL, Power BI, and Excel. Over the past years, I have
successfully completed over 15 projects across various industries, including banking, sports, and e-
commerce, delivering meaningful results.</p>

<p class="about-text"> &emsp; With a Data Analytics certification from Digikull and a
Bachelor's degree in Civil Engineering, I bring a unique blend of technical expertise and innovative
thinking to my work. I constantly seek to sharpen my skills through platforms like LeetCode, DataLemur,
and HackerRank, where I solve real-world problems and stay ahead of emerging trends in data
science.</p>

<p class="about-text"> &emsp; Outside of my professional work, I enjoy exploring consumer


behavior patterns, analyzing market trends, and embracing new technologies. When I’m not immersed
in data, you’ll find me enjoying a game of cricket or traveling to serene hill stations to recharge and find
new perspectives.</p>

</div>

</div>

</div>

</div>

<style>

/* About Section Style */

.about-section {

background: linear-gradient(135deg, #2f2f2f, #000);

padding: 80px 0;

border-radius: 20px;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

animation: fadeIn 1s ease-out;

}
/* Title and Subtitle Styling */

.about-section h1, .about-section h2 {

color: #f2c800;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

font-weight: bold;

text-transform: uppercase;

margin-bottom: 20px;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

.about-section p.light-gray-text {

color: #fff;

font-size: 18px;

font-weight: 300;

/* About Card Styling */

.about-card {

background: rgba(255, 255, 255, 0.1);

padding: 40px;

border-radius: 15px;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;

border: 2px solid #f2c800;

animation: slideInUp 1s ease-out;

.about-card:hover {
transform: translateY(-10px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

/* About Text Styling */

.about-text {

font-size: 18px;

line-height: 1.8;

color: #fff;

font-weight: 400;

text-align: justify;

margin-bottom: 20px;

transition: color 0.3s ease;

padding-top: 20px;

opacity: 0;

animation: fadeInText 1s ease-in-out forwards;

.about-text:nth-child(1) {

animation-delay: 0.3s;

.about-text:nth-child(2) {

animation-delay: 0.6s;

.about-text:nth-child(3) {

animation-delay: 0.9s;

}
.about-text:hover {

color: #f2c800;

/* Animations */

@keyframes fadeIn {

0% { opacity: 0; }

100% { opacity: 1; }

@keyframes slideInUp {

0% { transform: translateY(20px); opacity: 0; }

100% { transform: translateY(0); opacity: 1; }

@keyframes fadeInText {

0% { opacity: 0; }

100% { opacity: 1; }

/* Responsive Design */

@media (max-width: 768px) {

.about-section {

padding: 60px 20px;

.about-card {

padding: 25px;
}

.about-section h1, .about-section h2 {

font-size: 28px;

.about-text {

font-size: 16px;

line-height: 1.6;

.about-card {

border-radius: 10px;

.about-content {

text-align: center;

</style>

<br>

<div class="roadmap-section text-center">

<h2 class="yellow-heading">Experience</h2>

<div class="roadmap">

<div class="roadmap-item">

<span class="date">Oct 2024 – Present</span>

<h3>Data Analyst Intern</h3>


<span class="institution">Cognifyz Technologies</span>

</div>

</div>

<h2 class="yellow-heading">Education</h2>

<div class="roadmap">

<div class="roadmap-item">

<span class="date">2018 - 2022</span>

<h3>Bachelor of Engineering</h3>

<span class="institution">Sandip Institute of Technology


and Research Centre, Nashik</span>

<p>Grade: First Class Distinction</p>

</div>

<div class="roadmap-item">

<span class="date">2016 - 2018</span>

<h3>Higher Secondary School</h3>

<span class="institution">K. K. Wagh College,


Pimpalgaon (Baswant)</span>

<p>Grade: First Class Distinction</p>

</div>

</div>

</div>

<div class="text-center mt-5">

<a
href="https://drive.google.com/file/d/17ATzTY4LElw9X_RtAZ002EhXUpJ8Tlua/view" class="btn btn-
primary py-3 px-5">Download CV</a>

</div>
</div>

</section>

<style>

h3 {

font-weight: bold; /* Makes the text bold */

color: #E0E0E0; /* Dark white color */

font-family: 'Poppins', Arial, sans-serif; /* Fancy font */

font-size: 1.5rem; /* Adjusts the size for emphasis */

letter-spacing: 0.5px; /* Adds slight spacing between letters */

.ftco-about {

padding: 60px 0;

background: linear-gradient(135deg, #000000, #000000); /* Gradient


background */

color: #fff; /* White text color */

.yellow-heading {

color: #FFC107; /* Yellow color for headings */

margin-top: 40px;

margin-bottom: 20px;

font-size: 2rem;

font-family: 'Poppins', Arial, sans-serif;

font-weight: 700; /* Bold font weight */

text-transform: uppercase;

position: relative;

letter-spacing: 1.5px; /* Adds some spacing between letters for a fancier look */

text-shadow: 0 0 8px rgba(255, 193, 7, 0.7), 0 0 15px rgba(255, 193, 7, 0.5); /*


Yellow glow effect */
}

.yellow-heading::after {

content: '';

display: block;

width: 100px;

height: 3px;

background-color: #FFC107;

margin: 0 auto;

margin-top: 10px;

.roadmap {

display: flex;

flex-direction: column;

align-items: center; /* Center the roadmap items */

margin-bottom: 30px;

.roadmap-item {

background: linear-gradient(135deg, #2a1818, #00151c);

border-radius: 15px; /* Rounded corners */

padding: 20px;

margin-bottom: 20px;

width: 60%;

position: relative;

overflow: hidden;

transform: scale(1);

transition: all 0.4s ease;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Deeper shadow */

}
.roadmap-item:hover {

transform: scale(1.05); /* Scale on hover */

box-shadow: 0 10px 40px rgba(157, 157, 157, 0.6); /* Glow effect */

.roadmap-item:before {

content: '';

position: absolute;

top: -50px;

left: -50px;

width: 100px;

height: 100px;

background: #FFC107; /* Yellow color for fancy background */

border-radius: 50%; /* Circular shape */

opacity: 0.2;

transition: 0.4s;

.roadmap-item:hover:before {

top: -30px;

left: -30px;

opacity: 0.5;

.date {

font-weight: bold;

color: #d1ac3d; /* Yellow color for dates */

font-size: 0.9rem;

.institution {

font-weight: 700; /* Bold text */

color: #f0e620; /* Deep blue color for contrast on black */


display: block;

margin-top: 8px;

font-size: 1.1rem;

font-family: 'Montserrat', Arial, sans-serif; /* Modern, stylish font */

text-transform: uppercase; /* Uppercase letters for emphasis */

letter-spacing: 0.8px; /* Adds spacing between letters */

position: relative;

padding-left: 15px; /* Adds space for decorative line */

/* Decorative line styling */

.institution:before {

content: '';

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

width: 8px; /* Thickness of the line */

height: 100%;

background-color: #f0e620; /* Matches the blue text color */

border-radius: 3px; /* Rounded edges */

.btn-primary {

background-color: #FFC107; /* Yellow button background */

border-color: #FFC107; /* Button border color */

box-shadow: 0 4px 20px rgba(255, 193, 7, 0.5); /* Glow effect */

.btn-primary:hover {
background-color: #e0a800; /* Darker yellow on hover */

border-color: #e0a800; /* Darker yellow border on hover */

box-shadow: 0 6px 25px rgba(255, 193, 7, 0.7); /* Larger glow effect on hover */

/* Responsive Styles */

@media (max-width: 768px) {

.roadmap-item {

width: 90%; /* Full width on small screens */

padding: 15px; /* Adjust padding for mobile */

.yellow-heading {

font-size: 1.5rem; /* Adjust heading size for smaller screens */

.ftco-about {

padding: 30px 0; /* Adjust padding for smaller screens */

@media (max-width: 576px) {

.roadmap-item {

width: 95%; /* Slightly wider on extra small screens */

.date {

font-size: 0.8rem; /* Smaller date text on extra small screens */

.institution {

font-size: 0.9rem; /* Smaller institution text on extra small screens */

}
}

</style>

<br><br>

<section class="skills-section" id="skills-section">

<div class="container">

<div class="row justify-content-center pb-5">

<div class="col-md-10 heading-section text-center ftco-animate">

<p class="light-gray-text">Explore My</p>

<h1 class="big big-2">Skills</h1>

<h2 class="mb-4">Skills</h2>

<p>I possess a strong foundation in data analysis, visualization,


and programming, with expertise in tools such as SQL,Power BI, and Excel. My skills enable me to extract
insights, solve problems, and drive data-driven decisions effectively.</p>

</div>

</div>

<div class="container">

<!-- Data Analyst Skills Section -->

<div class="skills-container">

<!-- Data Analysis Skills -->

<div class="skill-category">

<h2 class="main-skill">Data Analysis Skills</h2>

<div class="skills">

<div class="skill-box">Data Analysis</div>

<div class="skill-box">EDA</div>
<div class="skill-box">Data Cleaning</div>

<div class="skill-box">Data
Transformation</div>

<div class="skill-box">Data Mining</div>

<div class="skill-box">Statistical Analysis</div>

<div class="skill-box">Outlier Detection</div>

<div class="skill-box">Reporting</div>

</div>

</div>

<!-- Data Visualization Skills -->

<div class="skill-category">

<h2 class="main-skill">Data Visualization</h2>

<div class="skills">

<div class="skill-box">Dashboard
Creation</div>

<div class="skill-box">Interactive Visuals</div>

<div class="skill-box">Data Storytelling</div>

<div class="skill-box">MIS Reporting</div>

<div class="skill-box">Advanced Charting</div>

</div>

</div>

<!-- Power BI Skills -->

<div class="skill-category">

<h2 class="main-skill">Power BI</h2>

<div class="skills">

<div class="skill-box">Data Visualization</div>

<div class="skill-box">Data Modeling</div>


<div class="skill-box">DAX</div>

<div class="skill-box">Dashboard
Creation</div>

<div class="skill-box">Power Query</div>

<div class="skill-box">KPI Development</div>

</div>

</div>

<!-- SQL Skills -->

<div class="skill-category">

<h2 class="main-skill">SQL</h2>

<div class="skills">

<div class="skill-box">Query Optimization</div>

<div class="skill-box">Data Warehousing</div>

<div class="skill-box">Database Design</div>

<div class="skill-box">Stored Procedures</div>

<div class="skill-box">MySQL</div>

</div>

</div>

<!-- Excel & Google Sheets Skills -->

<div class="skill-category">

<h2 class="main-skill">Excel & Google Sheets</h2>

<div class="skills">

<div class="skill-box">Advanced Formulas</div>

<div class="skill-box">Pivot Tables</div>

<div class="skill-box">VLOOKUP</div>

<div class="skill-box">Data Cleaning</div>

</div>
</div>

<!-- Additional Skills -->

<div class="skill-category">

<h2 class="main-skill">Additional Skills</h2>

<div class="skills">

<div class="skill-box">Problem-Solving</div>

<div class="skill-box">Attention to Detail</div>

<div class="skill-box">Time Management</div>

<div class="skill-box">Collaboration</div>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- CSS for styling -->

<style>

.skills-section {

padding: 20px;

text-align: center;

color: white;

.main-skill {

color: #FFC107;

font-size: 1.5em;
font-weight: bold;

margin-bottom: 15px;

letter-spacing: 1.2px;

text-shadow: 1px 1px 5px rgba(255, 193, 7, 0.6);

.main-skill::after {

content: '';

display: block;

width: 40px;

height: 4px;

background-color: #FFC107;

margin: 10px auto 0;

border-radius: 2px;

.skill-category {

margin-bottom: 30px;

.skills {

display: flex;

flex-wrap: wrap; /* Allow wrapping of skill boxes */

gap: 8px;

justify-content: center; /* Center-align items */

padding: 10px;

.skill-box {
border: 2px solid white;

border-radius: 5px;

padding: 8px 15px;

font-size: 0.9em;

color: white;

transition: background-color 0.3s, color 0.3s;

cursor: pointer;

text-align: center;

white-space: nowrap; /* Prevent text from breaking */

.skill-box:hover {

background-color: #FFD700; /* Light yellow */

color: black;

font-weight: bold;

/* Media Queries for Mobile Responsiveness */

/* Media Queries for Mobile Responsiveness */

@media (max-width: 768px) {

.skills {

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

.skill-box {

display: flex; /* Enable flexbox to center the text */

align-items: center; /* Vertically center the text */


justify-content: center; /* Horizontally center the text */

border: 2px solid white;

border-radius: 5px;

padding: 6px 12px; /* Reduced padding */

font-size: 0.85em; /* Reduced font size */

color: white;

transition: background-color 0.3s, color 0.3s;

cursor: pointer;

text-align: center;

white-space: nowrap; /* Ensure text doesn't wrap */

max-width: auto; /* Set max-width for the box */

width: auto; /* Let the width adjust based on content */

height: 35px; /* Set fixed height */

line-height: 1.5; /* Adjust line height for vertical centering */

.skill-box:hover {

background-color: #FFD700; /* Light yellow */

color: black;

font-weight: bold;

.main-skill {

font-size: 1.3em;

.big {

font-size: 1.8em;

}
}

</style>

<br>

<!-- Projects -------------------------------------------------------------------------------------- -->

<section class="skills-section" id="projects-section">

<div class="container">

<div class="row justify-content-center pb-5">

<div class="col-md-10 heading-section text-center ftco-


animate">

<p class="light-gray-text">Browse My
Recent</p>

<h1 class="big big-2">Projects</h1>

<h2 class="mb-4">Projects</h2>

<p>Explore a selection of my key projects, each


demonstrating my expertise in data analysis, visualization, and problem-solving. These projects highlight
my ability to transform complex data into actionable insights, providing innovative solutions to real-
world challenges.</p>

</div>

</div>

<!-- Initial Projects -->

<div class="row project-row mb-5">

<div class="col-lg-4">
<div class="text-container project-item mb-5">

<div class="image-container">

<a href="https://github.com/Bhushan148/Restaurant-Data-Analysis-Insights">

<img class="img-fluid" src="images/P15.jpg" alt="IPL Stats Analysis">

</a>

</div>

<!-- Project Title with hover effect -->

<h3 class="heading text-center project-title">

<a href="https://github.com/Bhushan148/Restaurant-Data-Analysis-Insights">

Restaurant Data Insights and Analytics

</a>

</h3>

<!-- Tools Used -->

<p class="tools text-center">Python (Pandas, Matplotlib, Seaborn, NumPy), SQL</p>

</div>

</div>

<!-- Hidden Projects -->

<div class="hidden-projects row mb-5" style="display:


none;">

</div>

</div>
<!-- More Projects Button -->

<div class="row">

<div class="col-md-12 text-center">

<button id="more-projects-btn" class="btn btn-


primary">Show More Projects</button>

</div>

</div>

</div>

</section>

<script>

document.getElementById('more-projects-btn').addEventListener('click',
function() {

const hiddenProjects = document.querySelector('.hidden-


projects');

hiddenProjects.style.display = hiddenProjects.style.display ===


'none' ? 'flex' : 'none';

this.innerText = hiddenProjects.style.display === 'flex' ? 'Show


Less Projects' : 'Show More Projects';

});

</script>

<script>

function toggleProjects() {

const hiddenProjects = document.querySelector('.hidden-


projects');

const button = document.querySelector('button');

if (hiddenProjects.style.display === "none" ||


hiddenProjects.style.display === "") {

hiddenProjects.style.display = "flex";

button.textContent = "Show Less Projects";

} else {
hiddenProjects.style.display = "none";

button.textContent = "Show More Projects";

</script>

<br><br>

<!-- End -->

<section class="skills-section" id="certification-section">

<div class="container">

<div class="row justify-content-center pb-5">

<div class="col-md-10 heading-section text-center ftco-animate">

<p class="light-gray-text">My</p>

<h1 class="big big-2">Awards & Certificates</h1>

<h2 class="mb-4">Awards & Certificates</h2>

<p>I have earned several awards and certifications that showcase my


expertise in data analysis, programming, and technology. These accomplishments reflect my
commitment to continuous learning and staying ahead in the field of data analytics.</p>

</div>

</div>

<div class="row project-row mb-5">

<!-- First six certificates displayed -->

<div class="col-lg-4">

<div class="text-container project-item mb-5">

<div class="image-container">
<a href="https://certificates.mavenanalytics.io/4edee2ad-d51f-480c-8024-
82ec648cdb8d#gs.holbgw#acc.94mLuw0C">

<img class="img-fluid" src="Certificates/Business Intelligence Analyst_page-0001.jpg"


alt="Power BI Certified">

</a>

</div>

<h3 class="heading text-center" style="color: white; font-weight: bold; font-size: 0.8rem;


margin-top: 15px;">

<a href="https://certificates.mavenanalytics.io/4edee2ad-d51f-480c-8024-
82ec648cdb8d#gs.holbgw#acc.94mLuw0C" style="color: white; text-decoration: none;">

Business Intelligence Analyst

</a>

</h3>

</div>

</div>

</div>

<!-- More Certifications Button -->

<div class="row">

<div class="col-md-12 text-center">

<button id="more-certifications-btn" class="btn btn-primary">Show More


Certifications</button>

</div>

</div>

</div>

</section>

<script>

document.getElementById('more-certifications-btn').addEventListener('click', function() {
const hiddenCertifications = document.querySelector('.hidden-certifications');

hiddenCertifications.style.display = hiddenCertifications.style.display === 'none' ? 'flex' : 'none';

this.innerText = hiddenCertifications.style.display === 'flex' ? 'Show Less Certifications' : 'Show More


Certifications';

});

</script>

<br><br>

<!-- ==================================== -->

<!-- Contact Section -->

<!-- Contact Section -->

<section class="skills-section" id="certification-section">

<div class="container">

<div class="row justify-content-center pb-5">

<div class="col-md-10 heading-section text-center ftco-animate">

<p class="light-gray-text">Get in Touch</p>

<h1 class="big big-2">Contact Me</h1>

<h2 class="mb-4">Contact Me</h2>

<p>Let's create something amazing together. Reach out below!</p>

</div>

</div>

<!-- Contact Info Cards -->

<div class="contact-cards">

<div class="contact-card">

<div class="icon"><span class="icon-map-signs"></span></div>

<h3>Address</h3>
<p><a href="https://maps.app.goo.gl/TDmYkGakXReXgURE9" target="_blank">Nashik,
Maharashtra</a></p>

</div>

<div class="contact-card">

<div class="icon"><span class="icon-phone2"></span></div>

<h3>Phone</h3>

<p><a href="tel:8108091971">+91 8108091971</a></p>

</div>

<div class="contact-card">

<div class="icon"><span class="icon-envelope"></span></div>

<h3>Email</h3>

<p><a href="mailto: [email protected]">[email protected]</a></p>

</div>

<div class="contact-card">

<div class="icon"><span class="icon-whatsapp"></span></div>

<h3>WhatsApp</h3>

<p><a href="http://wa.me/+918108091971" target="_blank">Chat Now</a></p>

</div>

</div>

<br>

<!-- Contact Form -->

<div class="contact-form-container">

<form action="https://api.web3forms.com/submit" method="POST" class="contact-form">

<input type="hidden" name="access_key" value="c41d9f43-be39-4be5-a8a6-797640f9045e">

<input type="text" name="name" placeholder="Your Name" required>

<input type="email" name="email" placeholder="Your Email" required>

<input type="text" name="mobile" placeholder="Mobile Number (Optional)">

<input type="text" name="subject" placeholder="Subject" required>


<textarea name="message" placeholder="Your Message" required></textarea>

<button type="submit" class="submit-btn">Send Message</button>

</form>

</div>

<!-- Social Media Links -->

<div class="social-links">

<p>Connect with me on :</p>

<a href="https://github.com/darsh2282" class="social-icon github"><span class="icon-


github"></span></a>

<a href="https://www.linkedin.com/in/darshan-nikam” target="_blank" class="social-icon


linkedin"><span class="icon-linkedin"></span></a>

<a href="https://www.instagram.com/darshnikam11?igsh=MWl4bXg1ZTlzd2k0cg=="
target="_blank" class="social-icon instagram"><span class="icon-instagram"></span></a>

<a href="http://wa.me/+918108091971" target="_blank" class="social-icon whatsapp"><span


class="icon-whatsapp"></span></a>

<a href="mailto: [email protected]" target="_blank" class="social-icon envelope"><span


class="icon-envelope"></span></a>

</div>

</div>

</section>

<style>

/* General Styling */

.contact-section {

padding: 80px 20px;

background: radial-gradient(circle, #111 0%, #000 100%);

color: #fff;

text-align: center;

}
/* Heading Style */

.heading-container {

margin-bottom: 40px;

.sub-heading {

color: #FFD700;

font-size: 1.2rem;

text-transform: uppercase;

letter-spacing: 4px;

.main-heading {

font-size: 3.5rem;

font-weight: 700;

color: #f2f2f2;

.intro-text {

font-size: 1.2rem;

color: #ccc;

/* Contact Cards Style */

.contact-cards {

display: flex;

justify-content: center;

gap: 30px;
margin-top: 30px;

.contact-card {

background: linear-gradient(135deg, #222, #333);

padding: 20px;

border-radius: 12px;

transition: transform 0.4s, box-shadow 0.4s;

box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);

.contact-card:hover {

transform: translateY(-10px);

box-shadow: 0 10px 20px rgba(255, 215, 0, 0.5);

.contact-card .icon {

font-size: 2rem;

color: #FFD700;

margin-bottom: 10px;

.contact-card h3 {

font-size: 1.3rem;

color: #fff;

.contact-card p a {

color: #FFD700;
text-decoration: none;

font-weight: bold;

/* Contact Form Style */

.contact-form-container {

margin-top: 60px;

.contact-form {

display: flex;

flex-direction: column;

gap: 15px;

background-color: rgba(0, 0, 0, 0.6);

padding: 30px;

border-radius: 15px;

box-shadow: 0 10px 25px rgba(255, 215, 0, 0.5);

width: 100%;

max-width: 600px;

margin: 0 auto;

.contact-form input, .contact-form textarea {

background: #222;

color: #fff;

border: none;

padding: 15px;

border-radius: 5px;

font-size: 1.1rem;
transition: background-color 0.3s ease;

.contact-form input:focus, .contact-form textarea:focus {

background: #333;

box-shadow: 0 0 10px #FFD700;

.submit-btn {

background: linear-gradient(135deg, #f39c12, #e74c3c);

color: #fff;

padding: 15px;

border: none;

border-radius: 5px;

font-size: 1.2rem;

font-weight: bold;

cursor: pointer;

transition: background 0.3s ease, transform 0.3s ease;

margin-top: 10px;

.submit-btn:hover {

background: linear-gradient(135deg, #ff5733, #f39c12);

transform: translateY(-5px);

/* Social Links Styling */

.social-links {

margin-top: 40px;
}

.social-links .social-icon {

display: inline-block;

font-size: 2rem;

margin: 0 15px;

color: #f2f2f2;

transition: color 0.3s ease, transform 0.3s ease;

.social-links .social-icon:hover {

color: #FFD700;

transform: scale(1.3);

/* Responsive Design for Small Screens */

@media (max-width: 768px) {

/* Contact Cards */

.contact-cards {

display: block;

padding: 0;

margin-top: -25px;

.contact-card {

width: 100%;

margin-bottom: 30px;

}
/* Contact Form */

.contact-form {

width: 100%;

padding: 20px;

margin-top: -50px;

.contact-form input, .contact-form textarea {

font-size: 0.9rem; /* Smaller text size */

padding: 10px; /* Smaller padding */

.submit-btn {

font-size: 1.3rem; /* Smaller button text */

padding: 12px; /* Smaller padding */

/* Social Links */

.social-links .social-icon {

font-size: 1.5rem; /* Smaller icon size */

margin: 0 10px; /* Reduced margin */

</style>

<footer class="ftco-footer ftco-section" style="background-color: #000; color: #fff; padding: 20px 0;">

<div class="container">
<div class="row">

<div class="col-md-12 text-center">

<p>

Thank you for visiting my portfolio. This space showcases my skills and experience as a data
analyst,

featuring key projects in SQL, Power BI, and data visualization. I strive to transform data into

actionable insights and am always eager to explore new challenges.

</p>

<hr style="border-top: 1px solid #555; width: 50%; margin: 20px auto;">

<p style="font-size: 0.9rem; color: #aaa;">

Developed by <strong><a href="https://www.linkedin.com/in/darshan-nikam" style="color:


#fff; text-decoration: none;">Darshan Nikam</a></strong> | &copy; <?php echo date("Y"); ?> All rights
reserved.

</p>

</div>

</div>

</div>

</footer>

<!-- loader -->

<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle


class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle
class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00"/></svg></div>

<script src="js/jquery.min.js"></script>

<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.easing.1.3.js"></script>

<script src="js/jquery.waypoints.min.js"></script>

<script src="js/jquery.stellar.min.js"></script>

<script src="js/owl.carousel.min.js"></script>

<script src="js/jquery.magnific-popup.min.js"></script>

<script src="js/aos.js"></script>

<script src="js/jquery.animateNumber.min.js"></script>

<script src="js/scrollax.min.js"></script>

<script src="js/main.js"></script>

</body>

</html>

<!-- ----------------------------------------------- ---------------------------------------------------- -->

You might also like