<!DOCTYPE html>
<html lang="en">
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Arizonia&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
<title>ArtByStephanie</title>
</head>
<body>
<!-- Main navigation -->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand mama" style="color:#D3959B" href="#intro">Stephanie J. Lakin</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#intro">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-offset="90">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects" data-offset="90">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery" data-offset="90">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./resume.html" data-offset="90">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-offset="90">Contact</a>
</li>
</ul>
<!-- Social Icons -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-twitter "></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--End Navbar -->
<!-- Home Page -->
<div id="intro" class="view">
<!-- <video class="video-intro" playsinline autoplay muted loop <source src="./resources/img/GullsVideo.mp4"
type="video/mp4">
</video> -->
<img class="img-fluid Rose" src="./resources/img/FadedRose.jpg" alt="self">
<!-- Mask & flexbox -->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<div class="row wow fadeIn">
<div class="col-md-12 col-lg-6 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 font-weight-bold mb-0 pt-md-5 pt-5">Art by Stephanie</h3>
<hr class="hr-light my-4 w-90">
<h4 class="subtext-header text-center mt-2 mb-4 me"> Fine
Art, Web
Development, Branding and Design Services</h4>
<a href="#contact" class="btn btn-rounded col-sm-offset-4 btn-outline-white">
<i class="fa fa-heart" style="color: #D3959B;"></i> Contact
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!--Main layout-->
<main>
<div class="container-fluid" id="about">
<!--Section: about-->
<section class="py-5 my-5">
<div class="container">
<!-- Section heading -->
<div class="row"></div>
<div class="col-xl-10 col-md-11 col-10">
<h2 class="h2-responsive font-weight-bold text-center me mb-3">About Me</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Currently enrolled full
time
in
BA
Graphic Design and Media Arts w/concentration in Web Design ++ (BA.GDM.WDE) program,
while
continuing to work full time as a Software Engineer. I have been passionate about
Art
and
Technology
most of my life. </p>
<div class="col-xl-10 col-md-11 col-10">
<h5 class="h5-responsive font-weight-bold text-center me mb-3">Fine Art</h5>
<p class="grey-text text-center mb-5">As a toddler, I used to litter the floor with
crumpled
papers
while
drawing endlessly for hours, discarding my imperfect attempts in frustration. As
you
can
see here...I'm still at it. I have a fascination with faces, and the style and
techniques of the great 15th & 16th Century Masters.</p>
</div>
<div class="col-xl-10 col-md-11 col-10">
<h5 class="h5-responsive font-weight-bold mb-3 text-center me">Web Development</h5>
<p class="grey-text text-center mb-5">My lifelong love of art and background in
commercial art,
naturally progressed into web development, once this technology became
available. I
went
back to school in 2014 to bein my career in application and web development. It
is a
constant learning process. It is the learning that keeps me interesting in this
ever
growing
and changing field.</p>
</div>
<div class="col-xl-10 col-md-11 col-10">
<h5 class="h5-responsive font-weight-bold mb-3 text-center">Graphic Design</h5>
<p class="grey-text mb-0 text-center mb-5">Print media is still being used in some
areas, and I
have
enjoyed relearning this process using todays innovative technologies.</p>
</div>
</div>
</div>
</section>
<!--Section: about-->
</div>
<!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">
<div class="container">
<div class="row mb-3 mx-auto">
<section id="projects" class="text-center py-5" style="background-color: #eee;">
<div class="col-xl-10 col-md-11 col-10">
<h2 class="h1-responsive font-weight-bold text-center me mb-5">My Favorite Projects</h2>
<p class="white-text w-responsive mx-auto mb-5">Here are a few of my favorite projects,
created
as part
of the learning process in Web Development and Graphic Design.</p>
<div class="row text-center mx-auto">
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4 ">
<div class="card">
<div class="view overlay rounded z-depth-1" id="galleryApp">
<a>
<div class="mask rgba-white-slight "></div>
</a>
</div>
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Art By Stephanie</h4>
<p class="grey-text">An Angular 6 App that I built to study the framework.
The App Filters Artwork by Medium and Technique, Prismacolor, Oil,
Charcoal,
and Acrylics. All artwork is original.
</p>
<a class="btn btnColor1 white-text btn-sm"
href="https://gallery1-21dc3.firebaseapp.com/dist/gallery"><i
class=""></i>
View
Item</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<div class="card">
<div class="view overlay rounded z-depth-1" id="Paws">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Paws & Claws</h4>
<p class="grey-text">Paws and Claws Holistic Animal Clinic serves all types
of
furry friends. Logo design in black and white and color, font selection,
color palette selection, and stationery items.
</p>
<a class="btn btnColor1 white-text btn-sm"
href="resources\img\LakinS_FInalProjectLogoPortfolio.pdf"
target="_blank"><i class=""></i>
View Item</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<div class="card">
<div class="view overlay rounded z-depth-1" id="town">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3">Town Fine Dining</h4>
<p class="grey-text">TOWN Restaurant Branding.
This was a Print Media Project for a high end Chinese restaraunt.
A complete menu, table tent and brochure were created for this project.
</p>
<a class="btn btnColor1 white-text btn-sm"
href="resources\img\FinalPresentationComplete.pdf" target="_blank"><i
class=""></i> View
Item</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid" id="gallery">
<!--Section: gallery-->
<section id="gallery" class="text-center py-5">
<div class="row">
<div class="col-md-12 mx-auto mt-3 mb-1">
<h2 class="h2 h2-responsive">Gallery</h2>
<p class="section-description mt-5 pt-2">A collage of Art & Photography, Old and New.</p>
</div>
<div class="container">
<div class="row ">
<a href="./resources/img/NativeFlutes.jpg" data-toggle="lightbox" data-gallery="gallery"
class="col-md-4">
<img src="./resources/img/NativeFlutes.jpg" class="img-fluid rounded">
</a>
<a href="./resources/img/frogfull_08.jpg" data-toggle="lightbox" data-gallery="gallery"
class="col-md-4">
<img src="./resources/img/frogfull_08.jpg" class="img-fluid rounded">
</a>
<a href="./resources/img/ArtWithoutColor2.jpg" data-toggle="lightbox" data-gallery="gallery"
class="col-md-4">
<img src="resources/img/ArtWithoutColor2.jpg" class="img-fluid rounded">
</a>
</div>
<div class="row" id="galleryPics">
<a href="./resources/img/Emir_09.jpg.jpg" data-toggle="lightbox" data-gallery="gallery"
class="col-md-4">
<img src="./resources/img/Emir_09.jpg" class="img-fluid rounded">
</a>
<a href="./resources/img/wiseguy_01.jpg" data-toggle="lightbox" data-gallery="gallery"
class="col-md-4">
<img src="./resources/img/wiseguy_01.jpg" class="img-fluid rounded">
</a>
<a href="./resources/img/WorkInProgress_16.jpg" data-toggle="lightbox"
data-gallery="gallery" class="col-md-4">
<img src="./resources/img/WorkInProgress_16.jpg" class="img-fluid rounded">
</a>
</div>
</div>
</div>
</div>
</section>
</div>
<div id="contact">
<!-- contact-->
<section id="contact" class="py-5" <div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center me mb-5">Contact</h2>
<!-- Section description -->
<p class="text-center w-responsive mx-auto mb-5 white-text">If you have any questions regarding
services,
please feel free to contact me using the form below.</br> I look forward to hearing from you!</p>
<div class="row">
<div class="col-md-9 mb-md-0 mb-5">
<form>
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="me ml-2">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class="me ml-2">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0 me">
<input type="text" id="contact-Subject" class="form-control me">
<label for="contact-Subject" class="me ml-2">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="contact-message" class="form-control md-textarea"
rows="3"></textarea>
<label for="contact-message" class="me ml-2">Leave a message.</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a class="btn btnColor1 btn-md " style="color: #D3959B;">Send</a>
</div>
</div>
<div class=" col-md-3 text-center">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x dkgrey"></i>
<p class="white-text">Medina, OH 44256</p>
</li>
<li>
<i class="fa fa-phone fa-2x mt-4 dkgrey"></i>
<p class="white-text">+ 01 330 304 2510</p>
</li>
<li>
<i class="fa fa-envelope fa-2x mt-4 dkgrey"></i>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="page-footer font-small pt-4">
<div class="container">
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fab fa-facebook dkgrey"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter dkgrey"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1" href="www.linkedin.com/in/stephaniejlakin ">
<i class="fab fa-linkedin dkgrey"> </i>
</a>
</li>
</ul>
</div>
<div id="footer" class="footer-copyright text-center py-3">© 2020 Copyright:
<p>Stephanie J. Lakin</p>
</div>
</footer>
</body>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/js/mdb.min.js"></script>
<script src="script.js"></script>
</html>