734 lines
38 KiB
HTML
734 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Laura Bootstrap Template - Index</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="assets/img/favicon.png" rel="icon">
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
<!-- 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|Satisfy"
|
|
rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
|
|
|
<!-- =======================================================
|
|
* Template Name: Laura
|
|
* Updated: Jul 27 2023 with Bootstrap v5.3.1
|
|
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
|
|
* Author: BootstrapMade.com
|
|
* License: https://bootstrapmade.com/license/
|
|
======================================================== -->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
<header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent">
|
|
|
|
<nav id="navbar" class="navbar">
|
|
<ul>
|
|
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
|
|
<li><a class="nav-link scrollto" href="#about">About</a></li>
|
|
<li><a class="nav-link scrollto" href="#resume">Resume</a></li>
|
|
<li><a class="nav-link scrollto" href="#services">Services</a></li>
|
|
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
|
|
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
|
|
</ul>
|
|
<i class="bi bi-list mobile-nav-toggle"></i>
|
|
</nav><!-- .navbar -->
|
|
|
|
</header><!-- End Header -->
|
|
|
|
<!-- ======= Hero Section ======= -->
|
|
<section id="hero">
|
|
<div class="hero-container">
|
|
<h1>Arnaud Fauconnet</h1>
|
|
<h2>I'm a Computer Science student</h2>
|
|
<a href="#about" class="btn-scroll scrollto" title="Scroll Down"><i class="bx bx-chevron-down"></i></a>
|
|
</div>
|
|
</section><!-- End Hero -->
|
|
|
|
<main id="main">
|
|
|
|
<!-- ======= About Me Section ======= -->
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>About Me</span>
|
|
<h2>About Me</h2>
|
|
<p> Passionate about computer science and love to have lengthy conversations
|
|
about it.<br>
|
|
Autonomous but also capable of communicating and
|
|
handling people.<br>
|
|
Overall flexible, adaptable and always curious by new experiences.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div
|
|
class="image col-lg-4 d-flex align-items-stretch justify-content-center justify-content-lg-start">
|
|
</div>
|
|
<div class="col-lg-8 d-flex flex-column align-items-stretch">
|
|
<div class="content ps-lg-4 d-flex flex-column justify-content-center">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><i class="bi bi-chevron-right"></i>
|
|
<strong>Name:</strong>
|
|
<span>Arnaud Fauconnet</span>
|
|
</li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong>
|
|
<a href="https://karma-riuk.com">karma-riuk.com</a>
|
|
</li>
|
|
<li><i class="bi bi-chevron-right"></i>
|
|
<strong>City:</strong>
|
|
<span>Lugano, CH</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>30</span>
|
|
</li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in
|
|
Software and Data
|
|
Engineering </span>
|
|
</li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Email:</strong>
|
|
<a
|
|
href="mailto:arnaud.fauconnet.pro@gmail.com">arnaud.fauconnet.pro@gmail.com</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End .content-->
|
|
|
|
<div class="skills-content ps-lg-4">
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End About Me Section -->
|
|
|
|
<!-- ======= My Resume Section ======= -->
|
|
<section id="resume" class="resume">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>My Resume</span>
|
|
<h2>My Resume</h2>
|
|
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h3 class="resume-title">Sumary</h3>
|
|
<div class="resume-item pb-0">
|
|
<h4>Alice Barkley</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>
|
|
<p>
|
|
<ul>
|
|
<li>Portland par 127,Orlando, FL</li>
|
|
<li>(123) 456-7891</li>
|
|
<li>alice.barkley@example.com</li>
|
|
</ul>
|
|
</p>
|
|
</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>
|
|
<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>
|
|
</p>
|
|
</div>
|
|
<div class="resume-item">
|
|
<h4>Graphic design specialist</h4>
|
|
<h5>2017 - 2018</h5>
|
|
<p><em>Stepping Stone Advertising, New York, NY</em></p>
|
|
<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>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End My Resume Section -->
|
|
|
|
<!-- ======= My Services Section ======= -->
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>My Services</span>
|
|
<h2>My Services</h2>
|
|
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
|
<div class="icon-box">
|
|
<div class="icon"><i class="bx bxl-dribbble"></i></div>
|
|
<h4 class="title"><a href="">Lorem Ipsum</a></h4>
|
|
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
|
|
excepturi sint occaecati cupiditate non provident</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
|
<div class="icon-box">
|
|
<div class="icon"><i class="bx bx-file"></i></div>
|
|
<h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
|
|
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
|
<div class="icon-box">
|
|
<div class="icon"><i class="bx bx-tachometer"></i></div>
|
|
<h4 class="title"><a href="">Magni Dolores</a></h4>
|
|
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
|
<div class="icon-box">
|
|
<div class="icon"><i class="bx bx-world"></i></div>
|
|
<h4 class="title"><a href="">Nemo Enim</a></h4>
|
|
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
|
|
blanditiis praesentium voluptatum deleniti atque</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End My Services Section -->
|
|
|
|
<!-- ======= Testimonials Section ======= -->
|
|
<section id="testimonials" class="testimonials">
|
|
<div class="container position-relative">
|
|
|
|
<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
|
|
<h3>Saul Goodman</h3>
|
|
<h4>Ceo & Founder</h4>
|
|
<p>
|
|
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
|
|
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit
|
|
rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam,
|
|
risus at semper.
|
|
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
|
|
<h3>Sara Wilsson</h3>
|
|
<h4>Designer</h4>
|
|
<p>
|
|
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
|
|
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid
|
|
cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet
|
|
legam anim culpa.
|
|
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
|
|
<h3>Jena Karlis</h3>
|
|
<h4>Store Owner</h4>
|
|
<p>
|
|
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
|
|
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem
|
|
veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint
|
|
minim.
|
|
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
|
|
<h3>Matt Brandon</h3>
|
|
<h4>Freelancer</h4>
|
|
<p>
|
|
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
|
|
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim
|
|
fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem
|
|
dolore labore illum veniam.
|
|
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
|
|
<h3>John Larson</h3>
|
|
<h4>Entrepreneur</h4>
|
|
<p>
|
|
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
|
|
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster
|
|
veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam
|
|
culpa fore nisi cillum quid.
|
|
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End Testimonials Section -->
|
|
|
|
<!-- ======= My Portfolio Section ======= -->
|
|
<section id="portfolio" class="portfolio">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>My Portfolio</span>
|
|
<h2>My Portfolio</h2>
|
|
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
|
</div>
|
|
|
|
<ul id="portfolio-flters" class="d-flex justify-content-center">
|
|
<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 class="row portfolio-container">
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>App 1</h4>
|
|
<p>App</p>
|
|
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Web 3</h4>
|
|
<p>Web</p>
|
|
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>App 2</h4>
|
|
<p>App</p>
|
|
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Card 2</h4>
|
|
<p>Card</p>
|
|
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Web 2</h4>
|
|
<p>Web</p>
|
|
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>App 3</h4>
|
|
<p>App</p>
|
|
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Card 1</h4>
|
|
<p>Card</p>
|
|
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Card 3</h4>
|
|
<p>Card</p>
|
|
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
|
|
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid"
|
|
alt=""></div>
|
|
<div class="portfolio-info">
|
|
<h4>Web 3</h4>
|
|
<p>Web</p>
|
|
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery"
|
|
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
|
|
<a href="portfolio-details.html" class="details-link" title="More Details"><i
|
|
class="bx bx-link"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End My Portfolio Section -->
|
|
|
|
<!-- ======= Pricing Section ======= -->
|
|
<section id="pricing" class="pricing">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>Pricing</span>
|
|
<h2>Pricing</h2>
|
|
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="box">
|
|
<h3>Free</h3>
|
|
<h4><sup>$</sup>0<span> / month</span></h4>
|
|
<ul>
|
|
<li>Aida dere</li>
|
|
<li>Nec feugiat nisl</li>
|
|
<li>Nulla at volutpat dola</li>
|
|
<li class="na">Pharetra massa</li>
|
|
<li class="na">Massa ultricies mi</li>
|
|
</ul>
|
|
<div class="btn-wrap">
|
|
<a href="#" class="btn-buy">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-4 mt-md-0">
|
|
<div class="box featured">
|
|
<h3>Business</h3>
|
|
<h4><sup>$</sup>19<span> / month</span></h4>
|
|
<ul>
|
|
<li>Aida dere</li>
|
|
<li>Nec feugiat nisl</li>
|
|
<li>Nulla at volutpat dola</li>
|
|
<li>Pharetra massa</li>
|
|
<li class="na">Massa ultricies mi</li>
|
|
</ul>
|
|
<div class="btn-wrap">
|
|
<a href="#" class="btn-buy">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-4 mt-lg-0">
|
|
<div class="box">
|
|
<h3>Developer</h3>
|
|
<h4><sup>$</sup>29<span> / month</span></h4>
|
|
<ul>
|
|
<li>Aida dere</li>
|
|
<li>Nec feugiat nisl</li>
|
|
<li>Nulla at volutpat dola</li>
|
|
<li>Pharetra massa</li>
|
|
<li>Massa ultricies mi</li>
|
|
</ul>
|
|
<div class="btn-wrap">
|
|
<a href="#" class="btn-buy">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mt-4 mt-lg-0">
|
|
<div class="box">
|
|
<span class="advanced">Advanced</span>
|
|
<h3>Ultimate</h3>
|
|
<h4><sup>$</sup>49<span> / month</span></h4>
|
|
<ul>
|
|
<li>Aida dere</li>
|
|
<li>Nec feugiat nisl</li>
|
|
<li>Nulla at volutpat dola</li>
|
|
<li>Pharetra massa</li>
|
|
<li>Massa ultricies mi</li>
|
|
</ul>
|
|
<div class="btn-wrap">
|
|
<a href="#" class="btn-buy">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End Pricing Section -->
|
|
|
|
<!-- ======= Contact Me Section ======= -->
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<span>Contact Me</span>
|
|
<h2>Contact Me</h2>
|
|
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="info-box">
|
|
<i class="bx bx-share-alt"></i>
|
|
<h3>Social Profiles</h3>
|
|
<div class="social-links">
|
|
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
|
|
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
|
|
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
|
|
<a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
|
|
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="info-box mt-4">
|
|
<i class="bx bx-envelope"></i>
|
|
<h3>Email Me</h3>
|
|
<p>contact@example.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="info-box mt-4">
|
|
<i class="bx bx-phone-call"></i>
|
|
<h3>Call Me</h3>
|
|
<p>+1 5589 55488 55</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<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" required>
|
|
</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" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<input type="text" class="form-control" name="subject" id="subject"
|
|
placeholder="Subject" required>
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<textarea class="form-control" name="message" rows="6" placeholder="Message"
|
|
required></textarea>
|
|
</div>
|
|
<div class="my-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><!-- End Contact Me Section -->
|
|
|
|
</main><!-- End #main -->
|
|
|
|
<!-- ======= Footer ======= -->
|
|
<footer id="footer">
|
|
<div class="container">
|
|
<h3>Arnaud Fauconnet</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>Laura</span></strong>. All Rights Reserved
|
|
</div>
|
|
<div class="credits">
|
|
<!-- All the links in the footer should remain intact. -->
|
|
<!-- You can delete the links only if you purchased the pro version. -->
|
|
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
|
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
|
|
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
|
|
</div>
|
|
</div>
|
|
</footer><!-- End Footer -->
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
|
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|