You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
9.2 KiB
HTML
185 lines
9.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
|
|
<!-- Mobile Responsive Meta Tag -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap Link -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>
|
|
|
|
<title>Developer Portfolio: Other Projects and Tools</title>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!--Ron Navbar Section Start -->
|
|
<div id="navbar" class="d-flex flex-row justify-content-between pl-3 pr-3 bg-primary text-white align-items-center">
|
|
<div id="brand">Ada Lovelace</div>
|
|
<div id="navlinks" class="d-flex d-inline justify-content-center">
|
|
<div class="p-3">About Me</div>
|
|
<div class="p-3">Projects</div>
|
|
<div class="p-3">Tools</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navbar Section End -->
|
|
|
|
<!-- Main Content Section Start -->
|
|
<div id="main" class="container-fluid p-5 text-center">
|
|
|
|
<h3>Other Projects</h3>
|
|
|
|
<!-- Other Projects Start -->
|
|
<div id="other-projects" class="row d-inline-block d-flex justify-content-center flex-wrap">
|
|
|
|
<!-- HTML Card Start -->
|
|
<div id="html" class="container-fluid col-sm-12 col-md-4 col-lg-4 my-4">
|
|
<img src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" class="img-fluid w-100">
|
|
<h5>HTML</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
<!-- HTML Card End -->
|
|
|
|
<!-- Bootstrap Card Start -->
|
|
<div id="bootstrap" class="container-fluid col-sm-12 col-md-4 col-lg-4 my-4">
|
|
<img src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png" class="img-fluid w-100">
|
|
<h5>Bootstrap</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
<!-- Bootstrap Card End -->
|
|
|
|
<!-- Node JS Server Card Start -->
|
|
<div id="nodejs" class="container-fluid col-sm-12 col-md-4 col-lg-4 my-4">
|
|
<img src="https://clever-solution.com/wp-content/uploads/2020/04/5625%D0%9C%D0%BE%D0%BD%D1%82%D0%B0%D0%B6%D0%BD%D0%B0%D1%8F-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C-1-1280x720.png" class="img-fluid w-100">
|
|
<h5>Node JS Server</h5>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
<!-- Node JS Server Card End -->
|
|
|
|
</div>
|
|
<!-- Other Projects End -->
|
|
|
|
<!-- Tools Section Start -->
|
|
<div>
|
|
|
|
<!-- Core Tools Section Start -->
|
|
<h3>Core Tools</h3>
|
|
|
|
<div id="core-tools" class="row d-flex justify-content-center mx-auto">
|
|
<div id="html" class="col-12">
|
|
<img width="150" src="images/logo-html5.png"/>
|
|
</div>
|
|
<div id="css-js">
|
|
<img width="150" src="images/logo-css3.png"/>
|
|
<img width="150" src="images/logo-javascript.png"/>
|
|
</div>
|
|
</div>
|
|
<!-- Core Tools Section End -->
|
|
|
|
<!--Ron Other Tools Section Start -->
|
|
<h3 class="text-center mt-3">Other Tools</h3>
|
|
|
|
<div id="other-tools" class="row col-md-6 d-flex justify-content-center mx-auto">
|
|
<div id="tools-1" class="flex-md-column align-content-center">
|
|
<img width="150" src="images/logo-mongodb.png"/>
|
|
<img width="150" src="images/logo-nodejs.png"/>
|
|
<img width="150" src="images/logo-expressjs.png"/>
|
|
<img width="150" src="images/logo-react.png"/>
|
|
<!--<img width="150" src="images/logo-heroku.png"/>-->
|
|
|
|
</div>
|
|
<div id="tools-2" class="flex-md-column align-content-center">
|
|
<img width="150" src="images/logo-git.png"/>
|
|
<img width="150" src="images/logo-sublime-text-3.png"/>
|
|
<img width="150" src="images/logo-postman.png"/>
|
|
<img width="150" src="images/logo-gitlab-ci-cd.png"/>
|
|
<img width="150" src="images/logo-heroku.png"/>
|
|
</div>
|
|
</div>
|
|
<!-- Other Tools Section End -->
|
|
|
|
</div>
|
|
<!-- Tools Section End -->
|
|
|
|
</div>
|
|
<!-- Main Content Section End -->
|
|
<main class="container">
|
|
<header class="row mt-5">
|
|
<div class="col-12">
|
|
<h1 class="text-center">Welcome to My Website</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="d-flex justify-content-center d-grid gap-5 bg-warning p-2">
|
|
<div>Home</div>
|
|
<div>About</div>
|
|
<div>Contact</div>
|
|
</nav>
|
|
|
|
<section class="row mt-5">
|
|
<figure class="col-lg-6">
|
|
<div>
|
|
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
|
</div>
|
|
</figure>
|
|
<figcaption class="col-lg-6">
|
|
<h2>About Us</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum risus sed arcu commodo, at cursus magna porttitor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</figcaption>
|
|
</section>
|
|
|
|
<section class="row mt-5 text-center">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="p-5 border">
|
|
<h3>Feature 1</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="p-5 border">
|
|
<h3>Feature 2</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="p-5 border">
|
|
<h3>Feature 3</h3>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="d-flex justify-content-center d-grid gap-3 m-5">
|
|
<div>Footer</div>
|
|
<div>|</div>
|
|
<div>Terms of Use</div>
|
|
<div>|</div>
|
|
<div>Copyright 2023</div>
|
|
</footer>
|
|
</main>
|
|
<!-- Bootstrap Script -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
|
<!-- End of Bootstrap Script -->
|
|
|
|
</body>
|
|
</html> |