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.

138 lines
6.6 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>
<!-- Navbar Section Start -->
<div id="navbar" class="d-flex justify-content-between align-items-center bg-primary pt-3 pb-3 text-white px-2">
<div id="brand" class="mr-auto">Ada Lovelace</div>
<div id="navlinks" class="d-flex">
<div class="px-3">About Me</div>
<div class="px-3">Projects</div>
<div class="px-3">Tools</div>
</div>
</div>
<!-- Navbar Section End -->
<!-- Main Content Section Start -->
<div id="main" class="container-fluid p-3">
<h3 class="pt-3 d-flex justify-content-center align-items-center">Other Projects</h3>
<!-- Other Projects Start -->
<div id="other-projects" class="row d-flex justify-content-between flex-md-row-reverse flex-md-column">
<!-- HTML Card Start -->
<div id="html" class="col-lg-4 col-md-4 col-sm-12 mb-4 text-center order-3">
<img src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" class="img-fluid" alt="HTML Image">
<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="col-lg-4 col-md-4 col-sm-12 mb-4 text-center order-2">
<img src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png" class="img-fluid" alt="Bootstrap Image">
<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="col-lg-4 col-md-4 col-sm-12 mb-4 text-center order-1">
<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" alt="Node.js Image">
<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 class="text-center">
<!-- Core Tools Section Start -->
<h3>Core Tools</h3>
<div id="core-tools" class="d-flex justify-content-center align-items-center flex-column">
<div id="html">
<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 -->
<!-- Other Tools Section Start -->
<div class="text-center">
<h3>Other Tools</h3>
<div id="other-tools" class="d-md-flex flex-md-column justify-content-center align-items-center">
<div id="tools-1 d-md-flex justify-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 d-md-flex justify-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"/>
</div>
</div>
</div>
<!-- Other Tools Section End -->
</div>
<!-- Tools Section End -->
</div>
<!-- Main Content Section End -->
<!-- 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>