frontend-dorset/index.html

191 lines
7.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Aurelien Rebourg Web Designer</title>
<meta name="description" content="I create digital experiences to promote products, services and events.">
<link href="assets/css/resets.css" rel="stylesheet">
<link href="assets/css/menus.css" rel="stylesheet">
<link href="assets/css/header.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link href="assets/css/footer.css" rel="stylesheet">
<!-- Link to Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome 5 icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
</head>
<body>
<!-- Begin desktop menu -->
<div class="container-menu-desktop menu-dark menu-sticky">
<!-- first child item -->
<a href="index.html"><img src="assets/img/website-logo.png" alt="website logo"></a>
<!-- second child item -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="exercises.html">All my works</a></li>
<li><a href="contact/index.html" class="btn-cta">Contact &nbsp;<i class="fas fa-arrow-right"></i></a></li>
</ul>
</div>
<!-- End desktop menu -->
<!-- Begin mobile menu bar -->
<div class="container-menu-bar-mobile menu-dark menu-sticky">
<!-- first child -->
<a href="index.html"><img src="assets/img/website-logo.png" alt="website logo"></a>
<!-- second child -->
<div class="item-icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!-- End mobile menu bar -->
<!-- Begin mobile menu slide-out options -->
<div class="flyout-menu flyout-menu-is-closed menu-dark">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="contact/index.html" class="btn-cta">Contact &nbsp;<i class="fas fa-arrow-right"></i></a></li>
</ul>
<hr>
<h4>About Me</h4>
<div class="fly-out-profile-box">
<img src="assets/img/profile-pic.jpg" alt="Aurelien Rebourg, web designer">
<p>Hi, I'm <b>Aurelien Rebourg</b>, a web Front-end and Back-end Developer.</p>
</div>
<h4>Contact</h4>
<p>Have a project you'd like to discuss? Let's make something great together!</p>
<h5><a href="mailto:aurelien.rebourg@gmail.com" target="_blank">aurelien.rebourg@gmail.com</a></h5>
<h4>Social Links</h4>
<div class="fly-out-social-icons">
<a href="https://github.com/AurelReb/" target="_blank"><i class="fab fa-github-square fa-fw"></i></a>
<a href="#" target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<!-- End mobile menu slide-out options -->
<!-- Begin hero block -->
<div class="hero-block-two-columns unhide-content-under-sticky-menu">
<div class="item-2 fade-in">
<h1>Welcome to my website</h1>
<h2>Hi, I'm <b>Aurelien Rebourg</b>. a web Front-end and Back-end Developer.</h2>
<div class="container-btn">
<a href="portfolio/index.html" class="btn btn-gradient btn-rounded"><i class="fas fa-arrow-right"></i> Portfolio</a>
<a href="contact/index.html" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Contact</a>
</div>
</div>
<div class="item-2 fade-in">
<img src="assets/img/home-pic.jpg" alt="hero image" style="box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.75);">
</div>
</div>
<!-- End hero block -->
<!-- Begin single-column container -->
<!-- Begin parent flexbox container for one column layout (.item-1) on all screens -->
<div class="container-flexbox bg-light-slate">
<div class="item-1">
<h2>Recent Projects</h2>
<p>Below you can see some examples of my recent work. Check out my complete <a href="portfolio/index.html" class="fancy-link">portfolio</a>. Have a project you'd like to discuss? <a href="contact/index.html" class="fancy-link">Let's make something great together!</a></p>
</div>
</div><!-- End parent flexbox container -->
<div class="container-flexbox bg-light-slate">
<div class="item-3" style="left: 50%;">
<a href="exercises.html"><img src="assets/img/exercises.png" alt="Project: Ireland Tourism"></a>
<h3>All my exercises</h3>
<p>Here you can find all my exercises done.</p>
<a href="exercises.html" class="button button-solid btn-rounded">View Project &nbsp;<i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="container-flexbox bg-light-slate">
<div class="item-3">
<a href="portfolio/van-gogh/index.html"><img src="assets/img/project-van-gogh.png" alt="Project: Vincent Van Gogh"></a>
<h3>Vincent Van Gogh</h3>
<p>Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.</p>
<a href="portfolio/van-gogh/index.html" class="button button-solid btn-rounded">View Project &nbsp;<i class="fas fa-arrow-right"></i></a>
</div>
<div class="item-3">
<a href="portfolio/smoothies/index.html"><img src="assets/img/project-smoothie.jpg" alt="Project: Smooth Smoothies"></a>
<h3>Smooth Smoothies</h3>
<p>Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.</p>
<a href="portfolio/smoothies/index.html" class="button button-solid btn-rounded">View Project &nbsp;<i class="fas fa-arrow-right"></i></a>
</div>
<div class="item-3">
<a href="portfolio/ireland/index.html"><img src="assets/img/project-ireland.jpg" alt="Project: Ireland Tourism"></a>
<h3>Ireland's Attractions</h3>
<p>On-page navigation with a looped background video that includes a tinted overlay.</p>
<a href="portfolio/ireland/index.html" class="button button-solid btn-rounded">View Project &nbsp;<i class="fas fa-arrow-right"></i></a>
</div>
</div><!-- End parent flexbox container -->
<footer>
<h4>Aurelien Rebourg, web designer</h4>
<h5>Excellence in digital creation</h5>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio/index.html">Portfolio</a></li>
<li><a href="contact/index.html">Contact</a></li>
</ul>
<ul class="footer-icons">
<li>
<a href="#" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/AurelReb/" target="_blank">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</footer>
<script src="assets/js/menus.js"></script>
</body>
</html>