How To Make A Website Using HTML CSS & Bootstrap | Personal Portfolio Website Design Tutorial
SOURCE CODE
HTML SOURCE_CODE:-
index .html
👇
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="style2.css" rel="stylesheet">
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<button type="button" class="mobile-nav-toggle d-xl-none"><i class="icofont-navigation-menu"></i></button>
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><a href="#hero"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#resume"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#services"><i class="bx bx-server"></i> <span>Services</span></a></li>
<li><a href="#contact"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</header> <!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="" data-aos-delay="100">
<h1>Artspider Designer (Sandip)</h1>
<p>I'm <span class="typed" data-typed-items="Designer, Developer, Freelancer, Photographer"></span></p>
<div class="social-links">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>About</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="assets/img/hero2.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>UI/UX Designer & Web Developer.</h3>
<p class="font-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="icofont-rounded-right"></i> <strong>Birthday:</strong> 20 May 1990</li>
<li><i class="icofont-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="icofont-rounded-right"></i> <strong>Phone:</strong> 8589 22444 25</li>
<li><i class="icofont-rounded-right"></i> <strong>City:</strong> Kolkata, West Bengal, India</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="icofont-rounded-right"></i> <strong>Age:</strong> 25</li>
<li><i class="icofont-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="icofont-rounded-right"></i> <strong>PhEmailone:</strong> demo@example.com</li>
<li><i class="icofont-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Facts</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="icofont-simple-smile"></i>
<span data-toggle="counter-up">232</span>
<p>Happy Clients</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-md-0">
<div class="count-box">
<i class="icofont-document-folder"></i>
<span data-toggle="counter-up">521</span>
<p>Projects</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="icofont-live-support"></i>
<span data-toggle="counter-up">1,463</span>
<p>Hours Of Support</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="icofont-users-alt-5"></i>
<span data-toggle="counter-up">15</span>
<p>Hard Workers</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">HTML <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">CSS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">JavaScript <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">PHP <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">55%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Resume</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-6">
<h3 class="resume-title">Sumary</h3>
<div class="resume-item pb-0">
<h4>Artspider Designer (Sandip)</h4>
<p><em>Innovative and deadline-driven Graphic Designer with 3+ years of experience designing and developing user-centered digital/print marketing material from initial concept to final, polished deliverable.</em></p>
<ul>
<li>Portland par 127,Orlando, FL</li>
<li>(+333) 562-8695</li>
<li>ArtspiderDesigner@example.com</li>
</ul>
</div>
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4>Master of Fine Arts & Graphic Design</h4>
<h5>2015 - 2016</h5>
<p><em>Rochester Institute of Technology, Rochester, NY</em></p>
<p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>
</div>
<div class="resume-item">
<h4>Bachelor of Fine Arts & Graphic Design</h4>
<h5>2010 - 2014</h5>
<p><em>Rochester Institute of Technology, Rochester, NY</em></p>
<p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>
</div>
</div>
<div class="col-lg-6">
<h3 class="resume-title">Professional Experience</h3>
<div class="resume-item">
<h4>Senior graphic design specialist</h4>
<h5>2019 - Present</h5>
<p><em>Experion, New York, NY </em></p>
<ul>
<li>Lead in the design, development, and implementation of the graphic, layout, and production communication materials</li>
<li>Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the project. </li>
<li>Supervise the assessment of all graphic materials in order to ensure quality and accuracy of the design</li>
<li>Oversee the efficient use of production project budgets ranging from $2,000 - $25,000</li>
</ul>
</div>
<div class="resume-item">
<h4>Graphic design specialist</h4>
<h5>2017 - 2018</h5>
<p><em>Stepping Stone Advertising, New York, NY</em></p>
<ul>
<li>Developed numerous marketing programs (logos, brochures,infographics, presentations, and advertisements).</li>
<li>Managed up to 5 projects or tasks at a given time while under pressure</li>
<li>Recommended and consulted with clients on the most appropriate graphic design</li>
<li>Created 4+ design presentations and proposals a month for clients and account managers</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Portfolio</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 2</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gall="portfolioGallery" class="venobox" title="App 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 2</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-4.jpg" data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 2</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.jpg" data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 3</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-6.jpg" data-gall="portfolioGallery" class="venobox" title="App 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 1</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-7.jpg" data-gall="portfolioGallery" class="venobox" title="Card 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 3</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-8.jpg" data-gall="portfolioGallery" class="venobox" title="Card 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-9.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Portfolio Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Services</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box iconbox-blue">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174"></path>
</svg>
<i class="bx bxl-dribbble"></i>
</div>
<h4><a href="">Lorem Ipsum</a></h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box iconbox-orange ">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,582.0697525312426C382.5290701553225,586.8405444964366,449.9789794690241,525.3245884688669,502.5850820975895,461.55621195738473C556.606425686781,396.0723002908107,615.8543463187945,314.28637112970534,586.6730223649479,234.56875336149918C558.9533121215079,158.8439757836574,454.9685369536778,164.00468322053177,381.49747125262974,130.76875717737553C312.15926192815925,99.40240125094834,248.97055460311594,18.661163978235184,179.8680185752513,50.54337015887873C110.5421016452524,82.52863877960104,119.82277516462835,180.83849132639028,109.12597500060166,256.43424936330496C100.08760227029461,320.3096726198365,92.17705696193138,384.0621239912766,124.79988738764834,439.7174275375508C164.83382741302287,508.01625554203684,220.96474134820875,577.5009287672846,300,582.0697525312426"></path>
</svg>
<i class="bx bx-file"></i>
</div>
<h4><a href="">Sed Perspiciatis</a></h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,541.5067337569781C382.14930387511276,545.0595476570109,479.8736841581634,548.3450877840088,526.4010558755058,480.5488172755941C571.5218469581645,414.80211281144784,517.5187510058486,332.0715597781072,496.52539010469104,255.14436215662573C477.37192572678356,184.95920475031193,473.57363656557914,105.61284051026155,413.0603344069578,65.22779650032875C343.27470386102294,18.654635553484475,251.2091493199835,5.337323636656869,175.0934190732945,40.62881213300186C97.87086631185822,76.43348514350839,51.98124368387456,156.15599469081315,36.44837278890362,239.84606092416172C21.716077023791087,319.22268207091537,43.775223500013084,401.1760424656574,96.891909868211,461.97329694683043C147.22146801428983,519.5804099606455,223.5754009179313,538.201503339737,300,541.5067337569781"></path>
</svg>
<i class="bx bx-tachometer"></i>
</div>
<h4><a href="">Magni Dolores</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box iconbox-yellow">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,503.46388370962813C374.79870501325706,506.71871716319447,464.8034551963731,527.1746412648533,510.4981551193396,467.86667711651364C555.9287308511215,408.9015244558933,512.6030010748507,327.5744911775523,490.211057578863,256.5855673507754C471.097692560561,195.9906835881958,447.69079081568157,138.11976852964426,395.19560036434837,102.3242989838813C329.3053358748298,57.3949838291264,248.02791733380457,8.279543830951368,175.87071277845988,42.242879143198664C103.41431057327972,76.34704239035025,93.79494320519305,170.9812938413882,81.28167332365135,250.07896920659033C70.17666984294237,320.27484674793965,64.84698225790005,396.69656628748305,111.28512138212992,450.4950937839243C156.20124167950087,502.5303643271138,231.32542653798444,500.4755392045468,300,503.46388370962813"></path>
</svg>
<i class="bx bx-layer"></i>
</div>
<h4><a href="">Nemo Enim</a></h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box iconbox-red">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,532.3542879108572C369.38199826031484,532.3153073249985,429.10787420159085,491.63046689027357,474.5244479745417,439.17860296908856C522.8885846962883,383.3225815378663,569.1668002868075,314.3205725914397,550.7432151929288,242.7694973846089C532.6665558377875,172.5657663291529,456.2379748765914,142.6223662098291,390.3689995646985,112.34683881706744C326.66090330228417,83.06452184765237,258.84405631176094,53.51806209861945,193.32584062364296,78.48882559362697C121.61183558270385,105.82097193414197,62.805066853699245,167.19869350419734,48.57481801355237,242.6138429142374C34.843463184063346,315.3850353017275,76.69343916112496,383.4422959591041,125.22947124332185,439.3748458443577C170.7312796277747,491.8107796887764,230.57421082200815,532.3932930995766,300,532.3542879108572"></path>
</svg>
<i class="bx bx-slideshow"></i>
</div>
<h4><a href="">Dele Cardo</a></h4>
<p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-teal">
<div class="icon">
<svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,566.797414625762C385.7384707136149,576.1784315230908,478.7894351017131,552.8928747891023,531.9192734346935,484.94944893311C584.6109503024035,417.5663521118492,582.489472248146,322.67544863468447,553.9536738515405,242.03673114598146C529.1557734026468,171.96086150256528,465.24506316201064,127.66468636344209,395.9583748389544,100.7403814666027C334.2173773831606,76.7482773500951,269.4350130405921,84.62216499799875,207.1952322260088,107.2889140133804C132.92018162631612,134.33871894543012,41.79353780512637,160.00259165414826,22.644507872594943,236.69541883565114C3.319112789854554,314.0945973066697,72.72355303640163,379.243833228382,124.04198916343866,440.3218312028393C172.9286146004772,498.5055451809895,224.45579914871206,558.5317968840102,300,566.797414625762"></path>
</svg>
<i class="bx bx-arch"></i>
</div>
<h4><a href="">Divera Don</a></h4>
<p>Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur</p>
</div>
</div>
</div>
</div>
</section><!-- End Testimonials Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Contact</h2>
</div>
<div class="row mt-1">
<div class="col-lg-4">
<div class="info">
<div class="address">
<i class="icofont-google-map"></i>
<h4>Location:</h4>
<p>Kolkata, West Bengal, India</p>
</div>
<div class="email">
<i class="icofont-envelope"></i>
<h4>Email:</h4>
<p>demo@example.com</p>
</div>
<div class="phone">
<i class="icofont-phone"></i>
<h4>Call:</h4>
<p>+1 8589 22444 25</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section>
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<h3>Artspider Designer </h3>
<p>Et aut eum quis fuga eos sunt ipsa nihil. Labore corporis magni eligendi fuga maxime saepe commodi placeat.</p>
<div class="social-links">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
<div class="copyright">
© Copyright <strong><span>MyResume</span></strong>. All Rights Reserved
</div>
<div class="credits">
Designed by <a href="#">ArtspiderDesigner</a>
</div>
</div>
</footer>
<a href="#" class="back-to-top"><i class="bx bx-up-arrow-alt"></i></a>
<div id="preloader"></div>
</body>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src='mine2.js'></script>
</html>
CSS SOURCE_CODE:-
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #1c1d1d;
text-decoration: none;
}
a:hover {
color: #1c1d1d;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: auto;
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
@media (max-width: 992px) {
#header {
width: 300px;
background: #fff;
border-right: 1px solid #e6e9ec;
left: -300px;
}
}
@media (min-width: 992px) {
#main {
margin-left: 100px;
}
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
}
.nav-menu a {
display: flex;
align-items: center;
color: #45505b;
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
transition: 0.3s;
}
.nav-menu a i {
font-size: 20px;
}
.nav-menu a span {
padding: 0 5px 0 7px;
color: #45505b;
}
@media (min-width: 992px) {
.nav-menu a {
width: 56px;
}
.nav-menu a span {
display: none;
color: #fff;
}
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #fff;
background: #1c1d1d;
}
.nav-menu a:hover span, .nav-menu .active > a span, .nav-menu li:hover > a span {
color: #fff;
}
.nav-menu a:hover, .nav-menu li:hover > a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span, .nav-menu li:hover > a span {
display: block;
}
/* Mobile Navigation */
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #45505b;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active #header {
left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #1c1d1d;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 100vh;
background: url("./assets/img/hero-bg.jpg") top right no-repeat;
background-size: cover;
position: relative;
}
@media (min-width: 992px) {
#hero {
padding-left: 160px;
}
}
#hero:before {
content: "";
background: rgba(26, 25, 26, 0.562);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: #c7c7ca;
}
#hero p {
color: #697683;
margin: 15px 0 0 0;
font-size: 26px;
font-family: "Poppins", sans-serif;
}
#hero p span {
color:#ffffff;
letter-spacing: 1px;
}
#hero .social-links {
margin-top: 30px;
}
@media (max-width: 992px) {
#hero {
text-align: center;
}
#hero h1 {
font-size: 32px;
line-height: 36px;
}
#hero p {
margin-top: 10px;
font-size: 20px;
line-height: 24px;
}
}
#hero .social-links a {
font-size: 24px;
display: inline-block;
color: #45505b;
line-height: 1;
margin-right: 20px;
transition: 0.3s;
}
#hero .social-links a:hover {
color: #1c1d1d;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
font-weight: 700;
font-size: 26px;
color: #636566;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
padding-bottom: 10px;
}
.about .content ul i {
font-size: 20px;
padding-right: 2px;
color:#1c1d1d;
}
.about .content p:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: rgb(184, 184, 184);
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #1c1d1d;
bottom: 0;
left: calc(50% - 20px);
}
.section-title p {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Facts
--------------------------------------------------------------*/
.facts .count-box {
padding: 30px 30px 25px 30px;
margin-top: 30px;
width: 100%;
position: relative;
text-align: center;
background: #fff;
}
.facts .count-box i {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
background: #1c1d1d;
padding: 12px;
color: #fff;
border-radius: 50px;
}
.facts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #011426;
}
.facts .count-box p {
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-size: 14px;
}
/*--------------------------------------------------------------
# Akills
--------------------------------------------------------------*/
.skills .progress {
height: 50px;
display: block;
background: none;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #45505b;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #f2f3f5;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color:#1c1d1d;
}
/*--------------------------------------------------------------
# Resume
--------------------------------------------------------------*/
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #45505b;
}
.resume .resume-item {
padding: 0 0 20px 20px;
margin-top: -2px;
border-left: 2px solid #1c1d1d;
position: relative;
}
.resume .resume-item h4 {
line-height: 18px;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
color: #1c1d1d;
margin-bottom: 10px;
}
.resume .resume-item h5 {
font-size: 16px;
background: #f7f8f9;
padding: 5px 15px;
display: inline-block;
font-weight: 600;
margin-bottom: 10px;
}
.resume .resume-item ul {
padding-left: 20px;
}
.resume .resume-item ul li {
padding-bottom: 10px;
}
.resume .resume-item:last-child {
padding-bottom: 0;
}
.resume .resume-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50px;
left: -9px;
top: 0;
background: #fff;
border: 2px solid #1c1d1d;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
background: #fff;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #272829;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
color: #b4b3b6;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(69, 80, 91, 0.8);
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(255, 255, 255, 0.7);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info::before {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid #d7dce1;
border-left: 3px solid #d7dce1;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
right: 35px;
border-bottom: 3px solid #d7dce1;
border-right: 3px solid #d7dce1;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px;
color: #45505b;
font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: #45505b;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #45505b;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
color: #1c1d1d;
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px;
right: 15px;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
text-align: center;
padding: 70px 20px 80px 20px;
transition: all ease-in-out 0.3s;
background: #fff;
box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05);
}
.services .icon-box .icon {
margin: 0 auto;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
transition: ease-in-out 0.3s;
position: relative;
}
.services .icon-box .icon i {
font-size: 36px;
transition: 0.5s;
position: relative;
}
.services .icon-box .icon svg {
position: absolute;
top: 0;
left: 0;
}
.services .icon-box .icon svg path {
transition: 0.5s;
fill: #f5f5f5;
}
.services .icon-box h4 {
font-weight: 600;
margin: 10px 0 15px 0;
font-size: 22px;
}
.services .icon-box h4 a {
color: #45505b;
transition: ease-in-out 0.3s;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
border-color: #fff;
box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);
}
.services .iconbox-blue i {
color: #1c1d1d;
}
.services .iconbox-blue:hover .icon i {
color: #fff;
}
.services .iconbox-blue:hover .icon path {
fill: #1c1d1d;
}
.services .iconbox-orange i {
color: #ffa76e;
}
.services .iconbox-orange:hover .icon i {
color: #fff;
}
.services .iconbox-orange:hover .icon path {
fill: #ffa76e;
}
.services .iconbox-pink i {
color: #e80368;
}
.services .iconbox-pink:hover .icon i {
color: #fff;
}
.services .iconbox-pink:hover .icon path {
fill: #e80368;
}
.services .iconbox-yellow i {
color: #ffbb2c;
}
.services .iconbox-yellow:hover .icon i {
color: #fff;
}
.services .iconbox-yellow:hover .icon path {
fill: #ffbb2c;
}
.services .iconbox-red i {
color: #ff5828;
}
.services .iconbox-red:hover .icon i {
color: #fff;
}
.services .iconbox-red:hover .icon path {
fill: #ff5828;
}
.services .iconbox-teal i {
color: #11dbcf;
}
.services .iconbox-teal:hover .icon i {
color: #fff;
}
.services .iconbox-teal:hover .icon path {
fill: #11dbcf;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
width: 100%;
background: #fff;
}
.contact .info i {
font-size: 20px;
color: #1c1d1d;
float: left;
width: 44px;
height: 44px;
background: #eef7ff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}
.contact .info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #45505b;
}
.contact .info p {
padding: 0 0 0 60px;
margin-bottom: 0;
font-size: 14px;
color: #728394;
}
.contact .info .email, .contact .info .phone {
margin-top: 40px;
}
.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
background: #1c1d1d;
color: #fff;
}
.contact .php-email-form {
width: 100%;
background: #fff;
}
.contact .php-email-form .form-group {
padding-bottom: 8px;
}
.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;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
border-radius: 4px;
box-shadow: none;
font-size: 14px;
}
.contact .php-email-form input {
height: 44px;
}
.contact .php-email-form textarea {
padding: 10px 12px;
}
.contact .php-email-form button[type="submit"] {
background: #434444;
border: 0;
padding: 10px 35px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
outline-style: none;
}
.contact .php-email-form button[type="submit"]:hover {
background: #181818;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding: 40px 0;
}
.portfolio-details .portfolio-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots {
margin-top: 5px;
text-align: center;
}
.portfolio-details .portfolio-details-carousel .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd !important;
}
.portfolio-details .portfolio-details-carousel .owl-dot.active {
background-color:#1c1d1d !important;
}
.portfolio-details .portfolio-info {
padding-top: 45px;
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 400;
margin-bottom: 20px;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
.portfolio-details .portfolio-info p {
font-size: 15px;
padding: 15px 0 0 0;
}
@media (max-width: 992px) {
.portfolio-details .portfolio-info {
padding-top: 20px;
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
background: #f7f8f9;
color: #45505b;
font-size: 14px;
text-align: center;
padding: 30px 0;
}
#footer h3 {
font-size: 36px;
font-weight: 700;
position: relative;
font-family: "Poppins", sans-serif;
padding: 0;
margin: 0 0 15px 0;
}
#footer p {
font-size: 15;
font-style: italic;
padding: 0;
margin: 0 0 40px 0;
}
#footer .social-links {
margin: 0 0 40px 0;
}
#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #1c1d1d;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .social-links a:hover {
background: #1c1d1d;
color: #fff;
text-decoration: none;
}
#footer .copyright {
margin: 0 0 5px 0;
}
#footer .credits {
font-size: 13px;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
display: none;
width: 40px;
height: 40px;
border-radius: 50px;
right: 15px;
bottom: 15px;
background: #1c1d1d;
color: #fff;
transition: display 0.5s ease-in-out;
z-index: 99999;
}
.back-to-top i {
font-size: 24px;
position: absolute;
top: 7px;
left: 8px;
}
.back-to-top:hover {
color: #fff;
background: #5f5f5f;
transition: background 0.2s ease-in-out;
}
Javascript (.js file) SOURCE_CODE:-
!(function($) {
"use strict";
// Preloader
$(window).on('load', function() {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function() {
$(this).remove();
});
}
});
// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Hero typed
if ($('.typed').length) {
var typed_strings = $(".typed").data('typed-items');
typed_strings = typed_strings.split(',')
new Typed('.typed', {
strings: typed_strings,
loop: true,
typeSpeed: 100,
backSpeed: 50,
backDelay: 2000
});
}
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
}
return false;
}
}
});
// Activate smooth scroll on page load with hash links in the url
$(document).ready(function() {
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
var scrollto = $(initial_nav).offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
}
}
});
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
});
$(document).click(function(e) {
var container = $(".mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
}
}
});
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.nav-menu, #mobile-nav');
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop() + 300;
nav_sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
if (cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
}
main_nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
}
if (cur_pos < 200) {
$(".nav-menu ul:first li:first").addClass('active');
}
});
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
// Skills section
$('.skills-content').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, {
offset: '80%'
});
// Init AOS
function aos_init() {
AOS.init({
duration: 1000,
once: true
});
}
// Porfolio isotope and filter
$(window).on('load', function() {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on('click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
aos_init();
});
// Initiate venobox (lightbox feature used in portofilo)
$('.venobox').venobox({
'share': false
});
// Initiate aos_init() function
aos_init();
});
})(jQuery);
Comments
Post a Comment