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
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> |