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.

128 lines
6.8 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-items-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"/>
<!--<img width="150" src="images/logo-heroku.png"/>-->
</div>
<div id="tools-2" class="flex-md-column align-items-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>
<!-- 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>