Untitled
unknown
plain_text
a year ago
15 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/portfolio.css">
<link rel="stylesheet" href="./css/aos.css">
<link rel="stylesheet" href="./theme/bootstrap.css">
<!-- Scripts-->
<script src="./js/bootstrap.js"></script>
<script src="./js/aos.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>John Doe Portfolio Website</title>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<script src="./js/exe.js"></script>
<!--navigation bar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top">
<div class="container">
<a href="#" class="navbar-brand">INSPIREFOLIO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!--Top Navbar-->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#Home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#Portfolio" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#Experience" class="nav-link">Resume</a>
</li>
<li class="nav-item">
<a href="#Education" class="nav-link">Education</a>
</li>
<li class="nav-item">
<a href="#Contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--home-->
<div id="Home" class="padding">
<div class="container">
<div class="row align-items-center justify-content-center gy-5">
<div class="col-md-6 text-center text-sm-start">
<h1 class="fw-bold display-4 mt-5" data-aos="fade-up">I AM A <br><span class="text-info"
data-aos="fade-up" data-aos-delay="100">FREELANCER</span></h1>
<p data-aos="fade-up" data-aos-delay="200">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Incidunt distinctio, aut doloremque
atque beatae quaerat.</p>
<a href="#Portfolio" class="btn btn-outline-info me-2" data-aos="fade-up" data-aos-delay="300">My
portfolio</a>
<a href="#Contact" class="btn btn-info me-2" data-aos="fade-up" data-aos-delay="300">Contact me</a>
<div class="social-icons my-3" data-aos="fade-up" data-aos-delay="1400">
<a href="#"><i class="bi bi-twitter icon mx-2"></i></a>
<a href="#"><i class="bi bi-instagram icon mx-2"></i></a>
<a href="#"><i class="bi bi-facebook icon mx-2"></i></a>
<a href="#"><i class="bi bi-linkedin icon mx-2"></i></a>
</div>
</div>
<div class="col-lg-5">
<img class="image-fluid w-100 mt-5 mb-0" data-aos="fade-up" data-aos-delay="100"
src="./img/man_port11.png" alt="">
</div>
</div>
</div>
</div>
<!--portfolio-->
<div id="Portfolio" class="padding">
<div class="container">
<div class="row" data-aos="fade-up">
<div class="col-12">
<h5 class="display-4 text-center text-dark">MY <span class="text-info">PORTFOLIO</span></h5>
<p class="text-dark text-center mb-3">ut enim ad minim veniam quis nostrud exercitation</p>
</div>
</div>
<div class="row gy-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="p-4 shadow rounded-5 work">
<img src="./img/w1.jpg" class="img-fluid rounded-5 mb-3" alt="">
<span class="badge bg-info">#Wordpress</span>
<span class="badge bg-info">#Bootstrap5</span>
<span class="badge bg-info">#HTML5</span>
<h5 class="fw-bold text-white mt-2">Project Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel soluta unde, commodi,
distinctio, vero eius dolorum rerum doloremque modi nostrum quae iusto quod alias nesciunt
culpa!</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="p-4 shadow rounded-5 work">
<img src="./img/w2.jpg" class="img-fluid rounded-5 mb-3" alt="">
<span class="badge bg-info">#HTML5</span>
<span class="badge bg-info">#TailWindCSS</span>
<h5 class="fw-bold text-white mt-2">Project Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel soluta unde, commodi,
distinctio, vero eius dolorum rerum doloremque modi nostrum quae iusto quod alias nesciunt
culpa!</p>
</div>
</div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="p-4 shadow rounded-5 work">
<img src="./img/w3.jpg" class="img-fluid rounded-5 mb-3" alt="">
<span class="badge bg-info">#ReactJS</span>
<span class="badge bg-info">#NodeJS</span>
<span class="badge bg-info">#PostgreSQL</span>
<h5 class="fw-bold text-white mt-2">Project Heading</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel soluta unde, commodi,
distinctio, vero eius dolorum rerum doloremque modi nostrum quae iusto quod alias nesciunt
culpa!</p>
</div>
</div>
</div>
</div>
</div>
<!--experience-->
<div id="Experience" class="padding">
<div class="container">
<div class="row">
<div class="col-12" data-aos="fade-up">
<div class="intro-section text-center mb-5">
<h5 class="display-4 text-center text-white">MY <span class="text-info">RESUME</span></h5>
<p class="mx-auto">There are many variations of passages of Lorem Ipsum available but the
majority have suffered alteration in some form by injected humour</p>
</div>
</div>
</div>
<div class="row mt-4 gx-0 gy-4 p-5 justify-content-center rounded-5 shadow work border-hover"
data-aos="fade-up" data-aos-delay="200">
<div class="col-md-3">
<h2 class="text-info">Facebook</h2>
</div>
<div class="col-md-3">
<h5>UX Designer</h5>
<small class="text-info">2012-2014</small>
</div>
<div class="col-md-6">
<p class="mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt id ipsa fugit
dolores ullam sunt! Amet, veniam quam.</p>
</div>
</div>
<div class="row mt-4 gx-0 gy-4 p-5 justify-content-center rounded-5 shadow work border-hover"
data-aos="fade-up" data-aos-delay="300">
<div class="col-md-3">
<h2 class="text-info">Amazon</h2>
</div>
<div class="col-md-3">
<h5>UX Designer</h5>
<small class="text-info">2012-2014</small>
</div>
<div class="col-md-6">
<p class="mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt id ipsa fugit
dolores ullam sunt! Amet, veniam quam.</p>
</div>
</div>
<div class="row mt-4 mb-5 gx-0 gy-4 p-5 justify-content-center rounded-5 shadow work border-hover"
data-aos="fade-up" data-aos-delay="400">
<div class="col-md-3">
<h2 class="text-info">Google</h2>
</div>
<div class="col-md-3">
<h5>UX Designer</h5>
<small class="text-info">2012-2014</small>
</div>
<div class="col-md-6">
<p class="mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt id ipsa fugit
dolores ullam sunt! Amet, veniam quam.</p>
</div>
</div>
</div>
</div>
</div>
<!--education-->
<div id="Education" class="padding">
<div class="container">
<div class="row text-dark" data-aos="fade-up">
<div class="col-12">
<h5 class="display-4 text-center text-dark">MY <span class="text-info">EDUCATION</span></h5>
<p class="mb-5 text-center">ut enim ad minim veniam quis nostrud exercitation</p>
</div>
</div>
<div class="row g-3">
<div class="col-lg-6">
<div class="row text-dark gy-4">
<div class="col-12" data-aos="fade-right" data-aos-delay="100">
<div class="p-4 rounded-4 text-white work border2-hover">
<h4 class="text-info">Master of Software Engineering</h4>
<p class="mb-2">De Mars University Venston Bay (2015 - 2020)</p>
<p class="mb-0">All we are more and design lorem ipsum dolor creativity sit amet
consectetur adipisicing elit</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row text-dark gy-4">
<div class="col-12" data-aos="fade-left" data-aos-delay="100">
<div class="p-4 rounded-4 text-white work border2-hover">
<h4 class="text-info">Master of Software Engineering</h4>
<p class="text-brand mb-2">De Mars University Venston Bay (2015 - 2020)</p>
<p class="mb-0">All we are more and design lorem ipsum dolor creativity sit amet
consectetur adipisicing elit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--contact-->
<div id="Contact" class="padding">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-8 pb-4" data-aos="fade-up">
<h5 class="display-4 text-center text-white">CONTACT <span class="text-info">ME</span></h5>
<h1>Interested in working together? Let's talk
</h1>
</div>
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
<form action="#" class="row g-lg-3 gy-3">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<div class="form-group col-12">
<input type="text" class="form-control" placeholder="Enter subject">
</div>
<div class="form-group col-12">
<textarea name="" rows="4" class="form-control" placeholder="Enter your message"></textarea>
</div>
<div class="form-group col-12">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer class="p-5 bg-dark text-white">
<div class="container">
<div class="row g-4 justify-content-between">
<div class="col-auto">
<div class="Contact Info">
<h2 class="mx-4 mb-4">Contact Info</h2>
<p><i class="bi bi-envelope-at-fill mx-3"></i></i><span class="fw-bold">Email :</span>
mejohndoe.com</p>
<p><i class="bi bi-geo-alt-fill mx-3"></i><span class="fw-bold">Location:</span>50 Main
st New York</p>
<p><i class="bi bi-telephone-fill mx-3"></i><span class="fw-bold">Phone:</span> (555)
555-5555</p>
</div>
</div>
<div class="col-auto">
<div class="social-icons mb-5">
<a href="#"><i class="bi bi-twitter icon mx-2"></i></a>
<a href="#"><i class="bi bi-instagram icon mx-2"></i></a>
<a href="#"><i class="bi bi-facebook icon mx-2"></i></a>
<a href="#"><i class="bi bi-linkedin icon mx-2"></i></a>
</div>
<p>© Copyright 2023 John Doe. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>