Added S16 Capstone1
parent
334ca750aa
commit
657604445e
@ -1,137 +0,0 @@
|
||||
/*
|
||||
Member 1: Josua
|
||||
Member 2: Chris
|
||||
Member 3: Ron
|
||||
Member 4: JP
|
||||
Member 5: Ron
|
||||
*/
|
||||
|
||||
/* Member 1 & 2 */
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
height: auto;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
padding: 15px;
|
||||
width: 9rem;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
}
|
||||
nav {
|
||||
padding: 5px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
.right-nav {
|
||||
float: right;
|
||||
}
|
||||
nav li {
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.nav, .nav-logo {
|
||||
margin: 8px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/* Ron - Member 3 */
|
||||
#logo {
|
||||
padding: 8px 5px 0 0;
|
||||
}
|
||||
#nav-button {
|
||||
background-color: #c2195b;
|
||||
}
|
||||
#bg-image {
|
||||
background-image: url(https://d3ojsfl21hfxhc.cloudfront.net/assets/zuitt/programdetails2_w.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
height: 50vh;
|
||||
}
|
||||
.container {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
height: 50vh;
|
||||
float: right;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 5rem;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
.title, .subtitle {
|
||||
width: 50%;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
#apply-button {
|
||||
width: 8%;
|
||||
float: right;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 4.3%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .container {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 30vh;
|
||||
} */
|
||||
.title {
|
||||
font: 'Zilla Slab', sans-serif;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
margin-left: 9rem;
|
||||
}
|
||||
#apply-button {
|
||||
margin-top: 2rem;
|
||||
background-color: #c2195b;
|
||||
}
|
||||
|
||||
|
||||
/* Ron - Member 5 */
|
||||
#main {
|
||||
text-align: center;
|
||||
}
|
||||
.title-2 {
|
||||
font-family: 'Zilla Slab', serif;
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
#description, #book-description {
|
||||
margin: 3rem auto;
|
||||
font-weight: 500;
|
||||
width: 50%;
|
||||
}
|
||||
#book-button {
|
||||
background-color: #336589;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
footer {
|
||||
margin-top: 10rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
footer span {
|
||||
margin: auto 5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Add mobile responsive meta tag. -->
|
||||
<!-- Mobile Responsive Meta Tag -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Add bootstrap css -->
|
||||
<!-- Bootstrap Link -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<title>Developer Portfolio</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<!-- This div/nav element contains 3 links to home, aboutme and projects section -->
|
||||
<!-- Add a bootstrap class to fix the nav element at the top of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the navbar element-->
|
||||
<!-- Add padding to the navbar element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the links in the navbar -->
|
||||
<!-- Add a bootstrap class to the links that will remove the text-decoration of each link. -->
|
||||
<!-- Add margin on the left-side of the links -->
|
||||
<div id="navbar" class="bg-primary text-center fixed-top p-1"> <!-- MEMBER 1 - JP -->
|
||||
|
||||
<a href="" class="text-white text-decoration-none mx-5">
|
||||
Home
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none mx-5">
|
||||
About Me
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none mx-5">
|
||||
Projects
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- End of Navbar -->
|
||||
<!-- MEMBER 2 - chris -->
|
||||
<!-- About Me -->
|
||||
<!-- Add a bootstrap class to the aboutme section which will center all the text/inline elements inside it. -->
|
||||
<div id="about-me" class="text-center">
|
||||
<!-- Add a bootstrap class to center the div that contains the picture and developer name.-->
|
||||
<div id="profile" class="text-center" style="width: 25%; margin: auto;">
|
||||
<!-- Add a bootstrap class to the profilePicture element to round the picture. -->
|
||||
<!-- Add a bootstrap class to the profilePicture to disallow it from overflowing. -->
|
||||
<img id="profilePicture"src="https://i.guim.co.uk/img/media/3656ae6ea2209d4561caf04fa9f172a519908ca3/0_28_2318_1391/master/2318.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=afcc355f47876bc495cdc3c902639bae" class="rounded-circle w-75 img-fluid mt-5"/>
|
||||
<!-- Add a margin at the top of the profileText div element -->
|
||||
<div id="profileTex">
|
||||
<!-- Add a blue border at the bottom of the h2 inside the profileText div using bootstrap classes. -->
|
||||
<h2 class="border-bottom border-primary">
|
||||
Ada Lovelace
|
||||
</h2>
|
||||
<!-- Add a margin at the top of the h4 inside the profileText div. -->
|
||||
<!-- Add a bootstrap class to the h4 inside the profileText div to tranform the text to uppercase. -->
|
||||
<h4 class="text-uppercase mt-2">Full-Stack Web Developer</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Add a bootstrap class to center the introduction paragraph element.-->
|
||||
<!-- Add bootstrap class to add a margin at the top of the introduction paragraph element. -->
|
||||
<p id="introduction"style="width: 50%;" class="mx-auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- End of About Me -->
|
||||
|
||||
<!-- Projects -->
|
||||
<!-- Add a bootstrap class to the projects section which will center all the text/inline elements inside it. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a gray background color. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a padding inside the element. -->
|
||||
<div id="projects" style="padding: 3rem; margin-bottom: 3rem;" class="text-center bg-secondary p-5">
|
||||
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will display each as inline-block. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will round the corners of the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add a padding inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the text light or white inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the background dark inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add margins between each divs. -->
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<!-- Add a bootstrap class to the img element inside each div to disallow it from overflowing. -->
|
||||
<!-- Add a bootstrap class to the h3 element inside each div add a margin at the top of the element. -->
|
||||
<!-- Add a bootstrap class to the p element inside each div add a margin at the top of the element. -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/album.png" class="img-fluid">
|
||||
<h3>My First Project</h3>
|
||||
<p>A simple project made from HTML</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron.png" class="img-fluid">
|
||||
<h3>My Second Project</h3>
|
||||
<p>A simple project made from CSS</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/carousel.png" class="img-fluid">
|
||||
<h3>My Third Project</h3>
|
||||
<p>A simple Bootstrap project.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of Projects -->
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Add a bootstrap class to fix the footer element at the bottom of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the footer element-->
|
||||
<!-- Add padding to the footer element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the text in the footer -->
|
||||
<!-- Add a bootstrap class to color the text as light/white in the footer -->
|
||||
|
||||
<!-- Member 4 josua-->
|
||||
<div id="footer" class="text-center bg-primary p-3 text-white fixed-bottom" >
|
||||
<p>All assets are used for educational purposes only.</p>
|
||||
</div>
|
||||
<!-- End of Footer -->
|
||||
<!-- end member 4-->
|
||||
<!-- Add bootstrap js -->
|
||||
<!-- 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
<!-- End of Bootstrap Script -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Mobile Responsive Meta Tag -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Bootstrap Link -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
<title>Bootstrap Introduction and Simple Styles</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<!-- This div/nav element contains 3 links to home, aboutme and projects section -->
|
||||
<!-- Add a bootstrap class to fix the nav element at the top of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the navbar element-->
|
||||
<!-- Add padding to the navbar element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the links in the navbar -->
|
||||
<!-- Add a bootstrap class to the links that will remove the text-decoration of each link. -->
|
||||
<!-- Add margin on the left-side of the links -->
|
||||
<div id="navbar" class="bg-primary position-fixed text-center w-100 p-2">
|
||||
|
||||
<a href="" class="text-white text-decoration-none p-3">
|
||||
Home
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none p-3">
|
||||
About Me
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none p-3">
|
||||
Projects
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- End of Navbar -->
|
||||
|
||||
<!-- About Me -->
|
||||
<!-- Add a bootstrap class to the aboutme section which will center all the text/inline elements inside it. -->
|
||||
<div id="about-me" class="text-center">
|
||||
<!-- Add a bootstrap class to center the div that contains the picture and developer name.-->
|
||||
<div id="profile" class="text-center" style="width: 25%; margin: auto;">
|
||||
<!-- Add a bootstrap class to the profilePicture element to round the picture. -->
|
||||
<!-- Add a bootstrap class to the profilePicture to disallow it from overflowing. -->
|
||||
<img id="profilePicture"src="https://i.guim.co.uk/img/media/3656ae6ea2209d4561caf04fa9f172a519908ca3/0_28_2318_1391/master/2318.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=afcc355f47876bc495cdc3c902639bae" class="rounded-circle w-75 img-fluid mt-5"/>
|
||||
<!-- Add a margin at the top of the profileText div element -->
|
||||
<div id="">
|
||||
<!-- Add a blue border at the bottom of the h2 inside the profileText div using bootstrap classes. -->
|
||||
<h2 class="border-bottom border-primary">
|
||||
Ada Lovelace
|
||||
</h2>
|
||||
<!-- Add a margin at the top of the h4 inside the profileText div. -->
|
||||
<!-- Add a bootstrap class to the h4 inside the profileText div to tranform the text to uppercase. -->
|
||||
<h4>Full-Stack Web Developer</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Add a bootstrap class to center the introduction paragraph element.-->
|
||||
<!-- Add bootstrap class to add a margin at the top of the introduction paragraph element. -->
|
||||
<p id="introduction" class="mx-auto mt-5 text-center" style="width: 40%;">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- End of About Me -->
|
||||
|
||||
<!-- Projects -->
|
||||
<!-- Add a bootstrap class to the projects section which will center all the text/inline elements inside it. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a gray background color. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a padding inside the element. -->
|
||||
<div id="projects" class="text-center bg-secondary mt-5" style="padding: 3rem; margin-bottom: 3rem;">
|
||||
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will display each as inline-block. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will round the corners of the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add a padding inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the text light or white inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the background dark inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add margins between each divs. -->
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<!-- Add a bootstrap class to the img element inside each div to disallow it from overflowing. -->
|
||||
<!-- Add a bootstrap class to the h3 element inside each div add a margin at the top of the element. -->
|
||||
<!-- Add a bootstrap class to the p element inside each div add a margin at the top of the element. -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/album.png" class="img-fluid">
|
||||
<h3>My First Project</h3>
|
||||
<p>A simple project made from HTML</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron.png" class="img-fluid">
|
||||
<h3>My Second Project</h3>
|
||||
<p>A simple project made from CSS</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/carousel.png" class="img-fluid">
|
||||
<h3>My Third Project</h3>
|
||||
<p>A simple Bootstrap project.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of Projects -->
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Add a bootstrap class to fix the footer element at the bottom of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the footer element-->
|
||||
<!-- Add padding to the footer element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the text in the footer -->
|
||||
<!-- Add a bootstrap class to color the text as light/white in the footer -->
|
||||
<div id="footer" class="text-center">
|
||||
<p>All assets are used for educational purposes only.</p>
|
||||
</div>
|
||||
<!-- End of Footer -->
|
||||
|
||||
<!-- Add bootstrap js -->
|
||||
<!-- Bootstrap Script -->
|
||||
|
||||
<!-- End of Bootstrap Script -->
|
||||
|
||||
<!-- 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
<!-- End of Bootstrap Script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,100 @@
|
||||
<!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: Projects</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="projects" class="container-fluid text-center p-4">
|
||||
|
||||
<h3>Projects</h3>
|
||||
|
||||
<!--Ron Web API Ecommerce Start -->
|
||||
<div id="api" class="row my-4">
|
||||
<div class="col-12 order-2 col-md-6 order-md-1">
|
||||
<h5>Web API (Ecommerce)</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-12 order-1 col-md-6 order-md-2">
|
||||
<img class="img-fluid w-100" id="apiImg" src="https://www.cloudways.com/blog/wp-content/uploads/Rest-API-introduction.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Ron Web API Ecommerce End -->
|
||||
|
||||
<!-- React Frontend Ecommerce Start -->
|
||||
<div id="react" class="row my-4">
|
||||
<div class="col-12 order-2 col-md-6 order-md-2">
|
||||
<h5>React Frontend (Ecommerce)</h5>
|
||||
<p >Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-12 order-1 col-md-6 order-md-1">
|
||||
<img class="img-fluid" id="reactImg" src="https://d6vdma9166ldh.cloudfront.net/media/images/1455b5c8-4887-43a8-8214-de77543414c9.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- React Frontend Ecommerce End -->
|
||||
|
||||
<h3>Other Projects</h3>
|
||||
|
||||
<!-- Other Projects Start -->
|
||||
<div id="other-projects" class="container-fluid d-inline-block d-flex mx-auto flex-wrap">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="col-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg">
|
||||
<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 class="col-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png">
|
||||
<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 -->
|
||||
|
||||
<!-- Nose JS Server Card Start -->
|
||||
<div class="col-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" 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">
|
||||
<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 -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,126 @@
|
||||
<!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 flex-row bg-primary text-white">
|
||||
<div id="brand" class="mr-auto p-2">Ada Lovelace</div>
|
||||
<div id="navlinks" class="d-flex flex-row p-2">
|
||||
<div class="px-2">About Me</div>
|
||||
<div class="px-2">Projects</div>
|
||||
<div class="px-2">Tools</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar Section End -->
|
||||
|
||||
<!-- Main Content Section Start -->
|
||||
<div id="main" class="container-fluid p-4">
|
||||
|
||||
<h3>Other Projects</h3>
|
||||
|
||||
<!-- Other Projects Start -->
|
||||
<div id="other-projects" class="row p-1 text-center d-flex flex-md-row-reverse">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="col-12 col-md-4 p-4" id="html">
|
||||
<img class="img-fluid" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg">
|
||||
<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 class="col-12 col-md-4 p-4" id="bootstrap">
|
||||
<img class="img-fluid" src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png">
|
||||
<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 class="col-12 col-md-4 p-4" id="nodejs">
|
||||
<img class="img-fluid" 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">
|
||||
<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 class="text-center mt-3">Core Tools</h3>
|
||||
|
||||
<div id="core-tools" class="d-flex flex-column">
|
||||
<div id="html" class="d-flex justify-content-center align-items-center">
|
||||
<img width="150" src="images/logo-html5.png"/>
|
||||
</div>
|
||||
<div id="css-js" class="d-flex justify-content-center align-items-center">
|
||||
<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 -->
|
||||
<h3 class="text-center mt-3">Other Tools</h3>
|
||||
|
||||
<div id="other-tools" class="d-md-flex flex-column">
|
||||
<div id="tools-1" class="d-md-flex justify-content-center 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"/>
|
||||
</div>
|
||||
<div id="tools-2" class="d-md-flex justify-content-center 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>
|
||||
@ -0,0 +1,99 @@
|
||||
<!--s14 assigning
|
||||
1-chris
|
||||
2- ron
|
||||
3- josua
|
||||
4-jp
|
||||
5-chris
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
||||
|
||||
<title>S14 - Activity</title>
|
||||
|
||||
</head>
|
||||
<!-- member 1 -->
|
||||
<body class="">
|
||||
<!-- Navbar -->
|
||||
<nav class="d-flex justify-content-between d-grid gap-5 bg-dark text-white p-2">
|
||||
<div class="px-4">My Website</div>
|
||||
<div class="d-flex d-inline justify-content-center">
|
||||
<div class="px-4">About</div>
|
||||
<div class="px-4">Services</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Banner Section -->
|
||||
<section class="p-5 bg-danger text-white">
|
||||
<div>
|
||||
<h1>Welcome to My Website</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- About Section -->
|
||||
<!-- josua -->
|
||||
<section class="container mt-5 mb-5 mx-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 order-1">
|
||||
<h2>About Us</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
||||
</div>
|
||||
<div class="col-lg-6 order-2" >
|
||||
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--end josua-->
|
||||
|
||||
<!-- member 4 -->
|
||||
<!-- Services Section -->
|
||||
<section class="container text-center flex-wrap mx-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Web Development</h3>
|
||||
<p>We provide professional web development services.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Graphic Design</h3>
|
||||
<p>Our talented designers create stunning graphics for your brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Digital Marketing</h3>
|
||||
<p>We help businesses grow their online presence.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--end member 4-->
|
||||
|
||||
|
||||
<!-- member 5 -->
|
||||
<!-- Footer -->
|
||||
<footer class="d-flex justify-content-center d-grid gap-3 p-2 text-white bg-dark">
|
||||
<div>© 2023 My Website.</div>
|
||||
<div>|</div>
|
||||
<div>All rights reserved.</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Mobile Responsive Meta Tag -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<!-- Bootstrap Link -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<title>Bootstrap Introduction and Simple Styles</title>
|
||||
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body class="text-center bg-secondary">
|
||||
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<h1>Bootstrap Introduction and Simple Styles</h1>
|
||||
|
||||
|
||||
<div class="d-none d-lg-inline-block w-25 mt-4">
|
||||
<img class="rounded-circle bg-white img-fluid" src="https://www.drupal.org/files/project-images/bootstrap-stack.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End of Header -->
|
||||
|
||||
<!-- Bootstrap Utility Classes -->
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2>Boostrap Color Classes</h2>
|
||||
|
||||
<table class="table table-dark table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Text</th>
|
||||
<th>Background</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-primary">Primary link</a>
|
||||
</td>
|
||||
<td class="bg-primary text-white">
|
||||
Primary
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-secondary">Secondary link</a>
|
||||
</td>
|
||||
<td class="bg-secondary text-white">
|
||||
Secondary
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-success">Success link</a>
|
||||
</td>
|
||||
<td class="bg-success text-white">
|
||||
Success
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-danger">Danger link</a>
|
||||
</td>
|
||||
<td class="bg-danger text-white">
|
||||
Danger
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-warning">Warning link</a>
|
||||
</td>
|
||||
<td class="bg-warning text-white">
|
||||
Warning
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-info">Info link</a>
|
||||
</td>
|
||||
<td class="bg-info text-white">
|
||||
Info
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-light">Light link</a>
|
||||
</td>
|
||||
<td class="bg-light text-dark">
|
||||
Light
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-dark">Dark link</a>
|
||||
</td>
|
||||
<td class="bg-dark text-white">
|
||||
Dark
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-muted">Muted link</a>
|
||||
</td>
|
||||
<td class="bg-transparent text-white">
|
||||
Transparent
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" class="text-white">White link</a>
|
||||
</td>
|
||||
<td class="bg-white text-dark">
|
||||
White
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- End of Bootstrap Color Classes Table -->
|
||||
|
||||
<!-- Bootstrap Text Alignment Classes Table -->
|
||||
<h2>Bootstrap Text Classes</h2>
|
||||
|
||||
<table class="table table-dark text-light table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Alignment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-left">Left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">Center</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-right">Right</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- For extra samll screens or small mobile phones, we can avoid using breakpoints -->
|
||||
<!-- All mobile views in Google Chrome browser are considered small screen sizes -->
|
||||
<!-- Screen size is greater than or equal to 576px -->
|
||||
<!-- Larger mobile phones -->
|
||||
<td class="text-sm-center">Small Center</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- Screen size is greater than or equal to 786 px -->
|
||||
<!-- Tablets -->
|
||||
<td class="text-right text-md-left">Others Right/Medium Left</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- Screen size is greater than or equal to 992px -->
|
||||
<!-- Desktop -->
|
||||
<td class="text-lg-right">Large Right</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- Screen size is greater than or equal to 1200px -->
|
||||
<!-- TV and other large screens -->
|
||||
<td class="text-xl-center">Extra Large Center</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
<!-- End of Bootstrap Script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Add mobile responsive meta tag. -->
|
||||
<!-- Mobile Responsive Meta Tag -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Add bootstrap css -->
|
||||
<!-- Bootstrap Link -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<title>Developer Portfolio</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<!-- This div/nav element contains 3 links to home, aboutme and projects section -->
|
||||
<!-- Add a bootstrap class to fix the nav element at the top of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the navbar element-->
|
||||
<!-- Add padding to the navbar element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the links in the navbar -->
|
||||
<!-- Add a bootstrap class to the links that will remove the text-decoration of each link. -->
|
||||
<!-- Add margin on the left-side of the links -->
|
||||
<div id="navbar" class="bg-primary text-center fixed-top p-1"> <!-- MEMBER 1 - JP -->
|
||||
|
||||
<a href="" class="text-white text-decoration-none">
|
||||
Home
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none">
|
||||
About Me
|
||||
</a>
|
||||
<a href="" class="text-white text-decoration-none">
|
||||
Projects
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- End of Navbar -->
|
||||
<!-- MEMBER 2 - chris -->
|
||||
<!-- About Me -->
|
||||
<!-- Add a bootstrap class to the aboutme section which will center all the text/inline elements inside it. -->
|
||||
<div id="about-me" class="d-inline text-center mx-auto">
|
||||
<!-- Add a bootstrap class to center the div that contains the picture and developer name.-->
|
||||
<div id="profile" style="width: 25%;" class="mx-auto">
|
||||
<!-- Add a bootstrap class to the profilePicture element to round the picture. -->
|
||||
<!-- Add a bootstrap class to the profilePicture to disallow it from overflowing. -->
|
||||
<img id="profilePicture"src="https://i.guim.co.uk/img/media/3656ae6ea2209d4561caf04fa9f172a519908ca3/0_28_2318_1391/master/2318.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=afcc355f47876bc495cdc3c902639bae"/ class="rounded-circle img-fluid mt-5">
|
||||
<!-- Add a margin at the top of the profileText div element -->
|
||||
<div id="profileText">
|
||||
<!-- Add a blue border at the bottom of the h2 inside the profileText div using bootstrap classes. -->
|
||||
<h2 class="border-bottom border-primary">
|
||||
Ada Lovelace
|
||||
</h2>
|
||||
<!-- Add a margin at the top of the h4 inside the profileText div. -->
|
||||
<!-- Add a bootstrap class to the h4 inside the profileText div to tranform the text to uppercase. -->
|
||||
<h4>Full-Stack Web Developer</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Add a bootstrap class to center the introduction paragraph element.-->
|
||||
<!-- Add bootstrap class to add a margin at the top of the introduction paragraph element. -->
|
||||
<p id="introduction"style="width: 50%;" class="mx-auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- End of About Me -->
|
||||
|
||||
<!-- Projects -->
|
||||
<!-- Add a bootstrap class to the projects section which will center all the text/inline elements inside it. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a gray background color. -->
|
||||
<!-- Add a bootstrap class to the projects section which will add a padding inside the element. -->
|
||||
<div id="projects" style="padding: 3rem; margin-bottom: 3rem;" class="text-center bg-secondary p-5">
|
||||
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will display each as inline-block. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will round the corners of the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add a padding inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the text light or white inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will make the background dark inside the element. -->
|
||||
<!-- Add a bootstrap class to the divs inside the projects section which will add margins between each divs. -->
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<!-- Add a bootstrap class to the img element inside each div to disallow it from overflowing. -->
|
||||
<!-- Add a bootstrap class to the h3 element inside each div add a margin at the top of the element. -->
|
||||
<!-- Add a bootstrap class to the p element inside each div add a margin at the top of the element. -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/album.png" class="img-fluid">
|
||||
<h3>My First Project</h3>
|
||||
<p>A simple project made from HTML</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron.png" class="img-fluid">
|
||||
<h3>My Second Project</h3>
|
||||
<p>A simple project made from CSS</p>
|
||||
</div>
|
||||
<div style="width: 25%;" class="d-inline-block rounded p-3 text-white bg-dark mx-5"> <!-- MEMBER 5 - JP -->
|
||||
<img src="https://getbootstrap.com/docs/4.0/examples/screenshots/carousel.png" class="img-fluid">
|
||||
<h3>My Third Project</h3>
|
||||
<p>A simple Bootstrap project.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of Projects -->
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Add a bootstrap class to fix the footer element at the bottom of the page. -->
|
||||
<!-- Add a bootstrap class to add a blue bg color to the footer element-->
|
||||
<!-- Add padding to the footer element using bootstrap classes-->
|
||||
<!-- Add a bootstrap class to center the text in the footer -->
|
||||
<!-- Add a bootstrap class to color the text as light/white in the footer -->
|
||||
|
||||
<!-- Member 4 josua-->
|
||||
<div id="footer" class="text-center bg-primary p-3 text-white" >
|
||||
<p>All assets are used for educational purposes only.</p>
|
||||
</div>
|
||||
<!-- End of Footer -->
|
||||
<!-- end member 4-->
|
||||
<!-- Add bootstrap js -->
|
||||
<!-- 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
<!-- End of Bootstrap Script -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,111 @@
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Bootstrap Font */
|
||||
body {
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: lightslategray;
|
||||
}
|
||||
.text-light {
|
||||
color: white;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.border-dark {
|
||||
border-color: black;
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Columns */
|
||||
.col-1 {
|
||||
width: calc((100% / 12))
|
||||
}
|
||||
.col-2 {
|
||||
width: calc((100% / 12)*2)
|
||||
}
|
||||
.col-3 {
|
||||
width: calc((100% / 12)*3)
|
||||
}
|
||||
.col-4 {
|
||||
width: calc((100% / 12)*4)
|
||||
}
|
||||
.col-5 {
|
||||
width: calc((100% / 12)*5)
|
||||
}
|
||||
.col-6 {
|
||||
width: calc((100% / 12)*6)
|
||||
}
|
||||
.col-7 {
|
||||
width: calc((100% / 12)*7)
|
||||
}
|
||||
.col-8 {
|
||||
width: calc((100% / 12)*8)
|
||||
}
|
||||
.col-9 {
|
||||
width: calc((100% / 12)*9)
|
||||
}
|
||||
.col-10 {
|
||||
width: calc((100% / 12)*10)
|
||||
}
|
||||
.col-11 {
|
||||
width: calc((100% / 12)*11)
|
||||
}
|
||||
.col-12 {
|
||||
width: calc((100% / 12)*12)
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
body {
|
||||
background-color: lightyellow;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
body {
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<title>Bootstrap Grid System</title>
|
||||
</head>
|
||||
<body class="text-center">
|
||||
<h1> Bootstrap Grid System</h1>
|
||||
|
||||
<!-- Two Columns Start -->
|
||||
<h2>Two Columns</h2>
|
||||
<div class="container-fluid">
|
||||
<h3>1:1 Ratio</h3>
|
||||
|
||||
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-6">6 Col</div>
|
||||
<div class="bg-secondary pt-3 border border-dark col-6">6 Col</div>
|
||||
</div>
|
||||
|
||||
<h3>1:2 Ratio</h3>
|
||||
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-4">4 Col</div>
|
||||
<div class="bg-secondary pt-3 pb-3 border border-dark col-8">8 Col</div>
|
||||
</div>
|
||||
|
||||
<h3>1:3 Ratio</h3>
|
||||
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-3">3 Col</div>
|
||||
<div class="bg-secondary pt-3 pb-3 border border-dark col-9">9 Col</div>
|
||||
</div>
|
||||
<!-- Two Columns End -->
|
||||
</div>
|
||||
|
||||
<!-- Three Columns Start -->
|
||||
<h2>Three Columns</h2>
|
||||
<div class="container-fluid">
|
||||
<h3>1:1:1 Ratio</h3>
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-4">4 Col</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-4">4 Col</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-4">4 Col</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Row with three columns divided in an uneven ratio -->
|
||||
<h3>Uneven Ratio</h3>
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-7">7 Col</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-3">3 Col</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col-2">2 Col</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Three columns End -->
|
||||
|
||||
<!-- Automatic Sizing Start -->
|
||||
<h2>Automatic Sizing</h2>
|
||||
<div class="container-fluid">
|
||||
<div class="text-light row">
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col">Auto</div>
|
||||
<div class="bg-secondary pt-3 pb-3 border border-dark col">Auto</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col">Auto</div>
|
||||
<div class="bg-secondary pt-3 pb-3 border border-dark col">Auto</div>
|
||||
<div class="bg-primary pt-3 pb-3 border border-dark col">Auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
<!-- End of Bootstrap Script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,102 @@
|
||||
<!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: Projects</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="projects" class="container-fluid text-center">
|
||||
|
||||
<h3 class="my-4">Projects</h3>
|
||||
|
||||
<!--Ron Web API Ecommerce Start -->
|
||||
<div id="api" class="row m-4">
|
||||
<div class="row flex-sm-row-reverse flex-wrap-reverse">
|
||||
<div class="col-sm-12 col-md-6 text-md-left order-md-2">
|
||||
<h5>Web API (Ecommerce)</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-md-6 col-sm text-md-right order-md-1 flex-nowrap">
|
||||
<img class="img-fluid w-100" id="apiImg" src="https://www.cloudways.com/blog/wp-content/uploads/Rest-API-introduction.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Ron Web API Ecommerce End -->
|
||||
|
||||
<!-- React Frontend Ecommerce Start -->
|
||||
<div id="react" class="row m-4 d-flex">
|
||||
<div class="row flex-lg-row-reverse flex-wrap-reverse">
|
||||
<div class="col-sm-12 col-md-6 text-md-left order-md-2 order-lg-1">
|
||||
<h5>React Frontend (Ecommerce)</h5>
|
||||
<p >Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-md-6 col-sm text-md-left order-md-first order-lg-2 flex-nowrap">
|
||||
<img class="img-fluid w-100" id="reactImg" src="https://d6vdma9166ldh.cloudfront.net/media/images/1455b5c8-4887-43a8-8214-de77543414c9.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- React Frontend Ecommerce End -->
|
||||
|
||||
<h3>Other Projects</h3>
|
||||
|
||||
<!-- Other Projects Start -->
|
||||
<div id="other-projects" class="container-fluid d-inline-block d-flex mx-auto justify-content-center flex-wrap">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg">
|
||||
<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 class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png">
|
||||
<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 -->
|
||||
|
||||
<!-- Nose JS Server Card Start -->
|
||||
<div class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" 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">
|
||||
<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 -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,102 @@
|
||||
<!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: Projects</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="projects" class="container-fluid text-center">
|
||||
|
||||
<h3 class="my-4">Projects</h3>
|
||||
|
||||
<!--Ron Web API Ecommerce Start -->
|
||||
<div id="api" class="row m-4">
|
||||
<div class="row flex-row-reverse">
|
||||
<div class="col-12 col-md-6 text-md-left order-2 order-md-2">
|
||||
<h5 class="text-center">Web API (Ecommerce)</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-12 col-md-6 text-md-left order-1 flex-nowrap">
|
||||
<img class="img-fluid w-100" id="apiImg" src="https://www.cloudways.com/blog/wp-content/uploads/Rest-API-introduction.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Ron Web API Ecommerce End -->
|
||||
|
||||
<!-- React Frontend Ecommerce Start -->
|
||||
<div id="react" class="row m-4 d-flex">
|
||||
<div class="row flex-row-reverse">
|
||||
<div class="col-12 col-md-6 text-md-left order-2 order-md-1">
|
||||
<h5 class="text-center">React Frontend (Ecommerce)</h5>
|
||||
<p >Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
||||
<div class="col-12 col-md-6 text-md-left order-1 order-md-2">
|
||||
<img class="img-fluid w-100" id="reactImg" src="https://d6vdma9166ldh.cloudfront.net/media/images/1455b5c8-4887-43a8-8214-de77543414c9.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- React Frontend Ecommerce End -->
|
||||
|
||||
<h3>Other Projects</h3>
|
||||
|
||||
<!-- Other Projects Start -->
|
||||
<div id="other-projects" class="container-fluid d-inline-block d-flex mx-auto justify-content-center flex-wrap">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg">
|
||||
<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 class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" src="https://www.10bestdesign.com/blog/content/images/2018/03/14.png">
|
||||
<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 -->
|
||||
|
||||
<!-- Nose JS Server Card Start -->
|
||||
<div class="col-sm-12 col-md-4 col-lg-4 my-4">
|
||||
<img class="img-fluid" 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">
|
||||
<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 -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,128 @@
|
||||
<!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>
|
||||
@ -0,0 +1,53 @@
|
||||
|
||||
/*CSS Reset*/
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*Bootstrap Font*/
|
||||
body {
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h-25 {
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: forestgreen;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: darkred;
|
||||
}
|
||||
/* CSS and Bootstrap Flexbox */
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>CSS and Bootstrap Flex</title>
|
||||
|
||||
<!-- Bootstrap Link -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- CSS link -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="container-fluid text-center">
|
||||
|
||||
|
||||
<h1>Bootstrap Flex</h1>
|
||||
<p>Use the d-flex class to create a flex container and transform direct children into flex items.</p>
|
||||
|
||||
|
||||
<h2>Centering elements</h2>
|
||||
<div style="height: 500px;" class="bg-secondary p-3 d-flex justify-content-center align-items-center flex-column">
|
||||
<div class="h-25 p-3 bg-success">Flex Item A</div>
|
||||
<div class="h-25 p-3 bg-warning">FLex Item B</div>
|
||||
<div class="h-25 p-3 bg-danger">Flex Item C</div>
|
||||
</div>
|
||||
|
||||
<h2>Flex Row</h2>
|
||||
<div class="bg-dark p-3 d-flex flex-row">
|
||||
<div class="p-3 bg-success">Flex Item A</div>
|
||||
<div class="p-3 bg-warning">Flex Item B</div>
|
||||
<div class="p-3 bg-danger">Flex Item C</div>
|
||||
</div>
|
||||
|
||||
<h2>Flex Row Reverse</h2>
|
||||
<div class="bg-dark p-3 d-flex flex-row-reverse">
|
||||
<div class="p-3 bg-success">Flex Item A</div>
|
||||
<div class="p-3 bg-warning">Flex Item B</div>
|
||||
<div class="p-3 bg-danger">Flex Item C</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bootstrap Bundle -->
|
||||
<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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,185 @@
|
||||
<!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>
|
||||
@ -0,0 +1,101 @@
|
||||
<!--s14 assigning
|
||||
1-chris
|
||||
2- ron
|
||||
3- josua
|
||||
4-jp
|
||||
5-chris
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
||||
|
||||
<title>S14 - Activity</title>
|
||||
|
||||
</head>
|
||||
<!-- member 1 -->
|
||||
<body class="container">
|
||||
<!-- Navbar -->
|
||||
<nav class="d-flex justify-content-between d-grid gap-5 bg-dark text-white p-2">
|
||||
<div class="px-4">My Website</div>
|
||||
<div class="d-flex d-inline justify-content-center">
|
||||
<div class="px-4">About</div>
|
||||
<div class="px-4">Services</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Banner Section -->
|
||||
<section class="p-5 bg-danger text-white">
|
||||
<div>
|
||||
<h1>Welcome to My Website</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- About Section -->
|
||||
<!-- josua -->
|
||||
<section class="container">
|
||||
<div class= "mt-5 mb-5">
|
||||
<div class="row row-cols-6">
|
||||
<div class="col-6 order-1 px-5">
|
||||
<h2>About Us</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
||||
</div>
|
||||
<div class="col-6 order-2" >
|
||||
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--end josua-->
|
||||
|
||||
<!-- member 4 -->
|
||||
<!-- Services Section -->
|
||||
<section class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Web Development</h3>
|
||||
<p>We provide professional web development services.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Graphic Design</h3>
|
||||
<p>Our talented designers create stunning graphics for your brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="border border-secondary m-3 p-5">
|
||||
<h3>Digital Marketing</h3>
|
||||
<p>We help businesses grow their online presence.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--end member 4-->
|
||||
|
||||
|
||||
<!-- member 5 -->
|
||||
<!-- Footer -->
|
||||
<footer class="d-flex justify-content-center d-grid gap-3 p-2 text-white bg-dark">
|
||||
<div>© 2023 My Website.</div>
|
||||
<div>|</div>
|
||||
<div>All rights reserved.</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
||||
|
||||
<title>S14 - Activity</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="d-flex flex-row justify-content-between align-items-center bg-dark text-white py-3 px-5 fs-5">
|
||||
<div class="">My Website</div>
|
||||
<div class="d-inline d-flex">
|
||||
<div class="me-4">About</div>
|
||||
<div>Services</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Banner Section -->
|
||||
<section class="p-5 bg-danger text-white">
|
||||
<div class="px-5">
|
||||
<h1>Welcome to My Website</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="row mt-5 d-grid mx-auto" style="width: 90%;">
|
||||
<div class="container d-flex d-grid gap-5 text-md-left" style="height: 400px;">
|
||||
<div class="col-5">
|
||||
<h2>About Us</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<img src="https://place-puppy.com/550x350" class="img-fluid w-100">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="row mt-5 text-center d-flex">
|
||||
<div class="col-lg-4 col-md-6 mt-5">
|
||||
<div class="p-5 border">
|
||||
<h3>Web Development</h3>
|
||||
<p>We provide professional web development services</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 mt-5">
|
||||
<div class="p-5 border">
|
||||
<h3>Graphic Design</h3>
|
||||
<p>Our talented designers create stunning graphics for your brand</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-12 mt-5">
|
||||
<div class="p-5 border">
|
||||
<h3>Digital Marketing</h3>
|
||||
<p>We help business grow their online presence</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white mt-5 d-flex d-inline p-5 justify-content-center fs-5 d-grid gap-3">
|
||||
<div>© 2023 My Website.</div>
|
||||
<div>|</div>
|
||||
<div>All rights reserved.</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Title</title>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<title>Bootstrap - Layout and Best Practices</title>
|
||||
|
||||
<!-- Style -->
|
||||
<style>
|
||||
.sample-image {
|
||||
background-image: url("https://place-puppy.com/450x450");
|
||||
background-size: cover;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sample-image"></div>
|
||||
<div class="d-grid gap-3 m-5 mx-auto" style="width: 500px;">
|
||||
<div class="p-2 border bg-light ms-5">Item 1</div>
|
||||
<div class="p-2 border bg-light me-5">Item 2</div>
|
||||
<div class="p-2 border bg-light mx-5">Item 3</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
@ -0,0 +1,299 @@
|
||||
<!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>Bootstrap Components</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar Section Start -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#">Ada Lovelace</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-lnk" href="#">About Me<span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Projects</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Tools</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Navbar Section End -->
|
||||
|
||||
<!-- Main Content Section Start -->
|
||||
<div class="container-fluid text-center">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- Side Navbar Section Start -->
|
||||
<div class="card col-xl-2 d-none d-xl-block p-0">
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
<!-- Services Section Start-->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Services
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">Frontend Design</a></li>
|
||||
<li><a href="">Backend Server</a></li>
|
||||
<li><a href="">Full-Stack Development</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Services Section End-->
|
||||
|
||||
<!-- Projects Section Start-->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Projects
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">HTML</a></li>
|
||||
<li><a href="">Bootstrap</a></li>
|
||||
<li><a href="">Node JS Server</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Projects Section End -->
|
||||
|
||||
<!-- Tools Section Start -->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Tools
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">Core Tools</a></li>
|
||||
<li><a href="">Other Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tools Section End -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Side Navbar Section End -->
|
||||
|
||||
<!-- Side Content Section Start -->
|
||||
<div class="col-xl-10 p-0">
|
||||
|
||||
<!-- Profile Section Start -->
|
||||
<div class="container-fluid bg-dark text-light min-vh-100 p-3 p-md-5">
|
||||
|
||||
<img class="mt-5 mt-md-0 rounded-circle" src="./images/ada.jpg" width="250">
|
||||
<!-- <img class="mt-5 mt-md-0 rounded-circle" src="https://i.guim.co.uk/img/media/3656ae6ea2209d4561caf04fa9f172a519908ca3/0_28_2318_1391/master/2318.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=afcc355f47876bc495cdc3c902639bae" width="250"> -->
|
||||
|
||||
<h1>Ada Lovelace</h1>
|
||||
<h3>Full-Stack Developer</h3>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Carousel Section Start -->
|
||||
<div class="row d-none d-md-block mt-md-5">
|
||||
<div class="offset-xl-3 col-xl-6">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="https://place-puppy.com/500x300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://placekitten.com/500/300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://placebear.com/500/300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel Section End -->
|
||||
|
||||
</div>
|
||||
<!-- Profile Section End -->
|
||||
|
||||
<!-- Other Projects Section Start -->
|
||||
<div class="bg-secondary text-light min-vh-100 p-5">
|
||||
|
||||
<h2 class="mb-3">Other Projects</h2>
|
||||
|
||||
<!-- Other Projects Container Start -->
|
||||
<div class="d-lg-flex justify-content-center p-md-5">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<img src="./images/html.jpg" class="card-img-top" alt="...">
|
||||
<!-- <img src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" class="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">HTML</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Programming Basics</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HTML Card End -->
|
||||
|
||||
<!-- Bootstrap Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0 mr-xl-5 ml-xl-5">
|
||||
<div class="card-body">
|
||||
<img src="./images/bootstrap-illustration.png" class="card-img-top" alt="...">
|
||||
<!-- <img src="https://ezywebbuilding.com/wp-content/uploads/2020/11/bootstrap-img.png" class="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">Bootstrap</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Rapid Prototyping</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap Card End -->
|
||||
|
||||
<!-- Node JS Server Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<img src="./images/nodejs.png" class="card-img-top" alt="...">
|
||||
<!-- <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="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">Node JS Server</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Backend Basics</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node JS Server Card End -->
|
||||
|
||||
</div>
|
||||
<!-- Other Projects Container End -->
|
||||
|
||||
</div>
|
||||
<!-- Other Projects Section End -->
|
||||
|
||||
<!-- Activity -->
|
||||
<!-- Contact Form Section Start-->
|
||||
<div class="container-fluid bg-dark text-light p-5 " id="contact-section">
|
||||
|
||||
<h2>Contact Me</h2>
|
||||
<!-- Member 3 - Ron -->
|
||||
<div class="row mt-5 text-center justify-content-center d-flex col col-xl-4 col-md-8 col-sm-12">
|
||||
<div class="col">
|
||||
<!-- Member 3 End - Ron -->
|
||||
<form>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="getName">Name</label>
|
||||
<input id="getName" class="form-control form-control-lg" type="text" placeholder="e.g Juan dela Cruz">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="getEmail">Email address</label>
|
||||
<input id="getEmail" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="e.g. juandelacruz@gmail.com ">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="getNumber">Contact Number</label>
|
||||
<input id="getNumber" class="form-control form-control-lg" type="number" placeholder="09123456789">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlSelect1">Concern</label>
|
||||
<select class="form-control" id="exampleFormControlSelect1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap Script -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,308 @@
|
||||
<!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>Bootstrap Components</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navbar Section Start -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#">Ada Lovelace</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">About Me<span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Projects</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Tools</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Navbar Section End -->
|
||||
|
||||
<!-- Main Content Section Start -->
|
||||
<div class="container-fluid text-center">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- Side Navbar Section Start -->
|
||||
<div class="card col-xl-2 d-none d-xl-block p-0">
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
<!-- Services Section Start-->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Services
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">Frontend Design</a></li>
|
||||
<li><a href="">Backend Server</a></li>
|
||||
<li><a href="">Full-Stack Development</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Services Section End-->
|
||||
|
||||
<!-- Projects Section Start-->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Projects
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">HTML</a></li>
|
||||
<li><a href="">Bootstrap</a></li>
|
||||
<li><a href="">Node JS Server</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Projects Section End -->
|
||||
|
||||
<!-- Tools Section Start -->
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Tools
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
<ul class="text-justify" style="list-style: none;">
|
||||
<li><a href="">Core Tools</a></li>
|
||||
<li><a href="">Other Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tools Section End -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Side Navbar Section End -->
|
||||
|
||||
<!-- Side Content Section Start -->
|
||||
<div class="col-xl-10 p-0">
|
||||
|
||||
<!-- Profile Section Start -->
|
||||
<div class="container-fluid bg-dark text-light min-vh-100 p-3 p-md-5">
|
||||
|
||||
<img class="mt-5 mt-md-0 rounded-circle" src="./images/ada.jpg" width="250">
|
||||
<!-- <img class="mt-5 mt-md-0 rounded-circle" src="https://i.guim.co.uk/img/media/3656ae6ea2209d4561caf04fa9f172a519908ca3/0_28_2318_1391/master/2318.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=afcc355f47876bc495cdc3c902639bae" width="250"> -->
|
||||
|
||||
<h1>Ada Lovelace</h1>
|
||||
<h3>Full-Stack Developer</h3>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Carousel Section Start -->
|
||||
<div class="row d-none d-md-block mt-md-5">
|
||||
<div class="offset-xl-3 col-xl-6">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="http://placekitten.com/500/300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://placekitten.com/500/300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://placebear.com/500/300" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel Section End -->
|
||||
|
||||
</div>
|
||||
<!-- Profile Section End -->
|
||||
|
||||
<!-- Other Projects Section Start -->
|
||||
<div class="bg-secondary text-light min-vh-100 p-5">
|
||||
|
||||
<h2 class="mb-3">Other Projects</h2>
|
||||
|
||||
<!-- Other Projects Container Start -->
|
||||
<div class="d-lg-flex justify-content-center p-md-5">
|
||||
|
||||
<!-- HTML Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<img src="./images/html.jpg" class="card-img-top" alt="...">
|
||||
<!-- <img src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" class="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">HTML</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Programming Basics</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HTML Card End -->
|
||||
|
||||
<!-- Bootstrap Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0 mr-xl-5 ml-xl-5">
|
||||
<div class="card-body">
|
||||
<img src="./images/bootstrap-illustration.png" class="card-img-top" alt="...">
|
||||
<!-- <img src="https://ezywebbuilding.com/wp-content/uploads/2020/11/bootstrap-img.png" class="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">Bootstrap</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Rapid Prototyping</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap Card End -->
|
||||
|
||||
<!-- Node JS Server Card Start -->
|
||||
<div class="card bg-dark col-xl-4 mb-5 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<img src="./images/nodejs.png" class="card-img-top" alt="...">
|
||||
<!-- <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="card-img-top" alt="..."> -->
|
||||
<h5 class="card-title mt-3">Node JS Server</h5>
|
||||
<h6 class="card-subtitle text-muted mb-2">Backend Basics</h6>
|
||||
<p class="card-text">
|
||||
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>
|
||||
<a href="#" class="card-link">Link To Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node JS Server Card End -->
|
||||
|
||||
</div>
|
||||
<!-- Other Projects Container End -->
|
||||
|
||||
</div>
|
||||
<!-- Other Projects Section End -->
|
||||
|
||||
<!-- Activity -->
|
||||
<!-- Contact Form Section Start-->
|
||||
<div class="container-fluid bg-dark min-vh-100 text-white p-5" id="contact-section">
|
||||
<h2>Contact me</h1>
|
||||
<div class="container bg-primary d-grid mt-3 rounded col-xl-4 col-md-8 col-sm-12">
|
||||
<form id="form-col">
|
||||
<div class="row mt-5 justify-content-center p-3">
|
||||
<div class="col">
|
||||
<!-- Name -->
|
||||
<div class="form-group">
|
||||
<label for="textInput">Name</label>
|
||||
<input type="text" class="form-control" id="textInput" placeholder="Your Name" required>
|
||||
</div>
|
||||
<!-- Email Address -->
|
||||
<div class="form-group">
|
||||
<label for="textInput">Email Address</label>
|
||||
<input type="text" class="form-control" id="textInput" placeholder="Enter text" required>
|
||||
</div>
|
||||
<!-- Contact Number -->
|
||||
<div class="form-group">
|
||||
<label for="numberInput">Contact Number</label>
|
||||
<input type="number" class="form-control" id="numberInput" placeholder="+63" required>
|
||||
</div>
|
||||
<!-- Concern -->
|
||||
<div class="form-group">
|
||||
<label for="selectInput">Concern</label>
|
||||
<select class="form-control" id="selectInput" required>
|
||||
<option>Quotation</option>
|
||||
<option>Null</option>
|
||||
<option>Null</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Text Area -->
|
||||
<div class="form-group">
|
||||
<label for="textareaInput">Message</label>
|
||||
<textarea class="form-control" id="textareaInput" rows="4" placeholder="Enter text"></textarea>
|
||||
</div>
|
||||
<!-- Button -->
|
||||
<button type="button" class="btn btn-primary bg-dark text-white px-5 py-2 round" data-toggle="modal" data-target="#modalDiv">Open Modal</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade text-secondary" id="modalDiv">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Thank you for contacting us!</h4>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p>Message Successfully sent.</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap Script -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"capstone": {
|
||||
"liveLink":
|
||||
"name": "Ron",
|
||||
"ismulti": false
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.footer {
|
||||
background-color: var(--bg-primary);
|
||||
color: white;
|
||||
padding: 30px 0;
|
||||
}
|
||||
#awesome i{
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
#awesome i:hover {
|
||||
color: var(--clr-font-primary);
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
:root {
|
||||
/* Branding Color */
|
||||
--bg-primary: blue;
|
||||
--bg-secondary: #fff;
|
||||
--clr-neutral-100: rgb(236, 236, 236);
|
||||
--clr-font-primary: rgb(131, 131, 131);
|
||||
|
||||
--box-shadow: 1px 1px 10px #ececec,
|
||||
-1px -1px 10px #ffffff;
|
||||
|
||||
/* Font Styles */
|
||||
--fs-primary: 'Open Sans', sans-serif;
|
||||
--fs-secondary: 'Poppins', sans-serif;
|
||||
|
||||
/* Font Weight */
|
||||
--ff-sz-300: 300;
|
||||
--ff-sz-400: 500;
|
||||
--ff-sz-600: 600;
|
||||
--ff-sz-900: 900;
|
||||
/* Font Size */
|
||||
--fs-ld1: 3.875rem;
|
||||
--fs-h1: 2.875rem;
|
||||
--fs-h2: 2rem;
|
||||
--fs-h6: 1.5rem;
|
||||
--fs-p: 1.125rem;
|
||||
--fs-p1: 1.25rem;
|
||||
--fs-lp: 1rem;
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: var(--bg-primary) !important;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
}
|
||||
.box-shadow {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.hd-1 {
|
||||
font-size: var(--fs-ld1);
|
||||
font-weight: var(--ff-sz-900);
|
||||
}
|
||||
.h1 {
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: var(--ff-sz-600);
|
||||
}
|
||||
.h2 {
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: var(--ff-sz-600);
|
||||
}
|
||||
.p-1 {
|
||||
font-size: var(--fs-p);
|
||||
}
|
||||
span {
|
||||
font-weight: var(--ff-sz-600);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
.p {
|
||||
font-size: var(--fs-p1);
|
||||
font-style: var(--fs-primary);
|
||||
color: var(--clr-font-primary);
|
||||
}
|
||||
.navbar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.py-cus {
|
||||
margin-top: 8rem;
|
||||
width: 400px;
|
||||
}
|
||||
.py-cus-mobile {
|
||||
margin: 5rem 0;
|
||||
width: 350px;
|
||||
}
|
||||
.py-cus-mobile h1{
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: var(--ff-sz-600);
|
||||
}
|
||||
.skills-container span {
|
||||
color: var(--clr-font-primary);
|
||||
|
||||
}
|
||||
.html,.css,.javascript,.shopify,.wordpress,.github,.sqlbasics,.linux,.figma,.graphicdesign,.photoshop,.illustrator,.premiere {
|
||||
color: rgb(103, 103, 103);
|
||||
font-size: var(--fs-p);
|
||||
line-height: 6rem;
|
||||
padding: 18px;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
box-shadow: 1px 1px 10px #ececec,
|
||||
-1px -1px 10px #ffffff;
|
||||
margin: 10px 10px 10px 0px;
|
||||
border: 3px solid blue;
|
||||
}
|
||||
@media (max-width: 567px) {
|
||||
.navbar {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
.navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
.navbar-toggler.collapsed + .navbar-collapse {
|
||||
display: block;
|
||||
}
|
||||
#landing {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
.logo {
|
||||
padding: 0;
|
||||
width: 70px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.logo-container {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.logo-container strong,
|
||||
.logo-container p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.logo-container strong {
|
||||
top: -16px;
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: var(--ff-sz-600);
|
||||
font-family: var(--fs-secondary);
|
||||
}
|
||||
.logo-container p {
|
||||
bottom: -22px;
|
||||
font-size: var(--fs-h1);
|
||||
font-family: var(--fs-secondary);
|
||||
font-weight: var(--ff-sz-300);
|
||||
}
|
||||
ul li {
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
transition: 0.5s;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
ul li:hover {
|
||||
background-color: var(--clr-neutral-100);
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.logo-container strong {
|
||||
top: -5px;
|
||||
font-size: var(--fs-h2);
|
||||
}
|
||||
.logo-container p {
|
||||
bottom: -5px;
|
||||
font-size: var(--fs-h2);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
.navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
.navbar-toggler.collapsed + .navbar-collapse {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,230 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ron - Full Stack Web Developer</title>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Icons -->
|
||||
<script src="https://kit.fontawesome.com/2ad21aaa5c.js" crossorigin="anonymous"></script>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&family=Poppins:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="header.css">
|
||||
<link rel="stylesheet" href="general.css">
|
||||
<link rel="stylesheet" href="footer.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-xl bg-secondary border-bottom box-shadow">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<div class="logo-container row">
|
||||
<img src="images/logo.png" class="logo" alt="Ron Reciproco">
|
||||
<div class="col d-none d-sm-inline-block">
|
||||
<strong>John</strong>
|
||||
<p>Carter</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Resume</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href=".#about">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Projects</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Fire me an email</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<!-- Landing Page-->
|
||||
<section id="landing" class="container-fluid box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<div class="py-cus text-start">
|
||||
<h1 class="hd-1">Designer</h1>
|
||||
<p class="p p-1">Graphic designer specialize, UI design and design systems</p>
|
||||
</div>
|
||||
<div class="py-cus text-end">
|
||||
<h1 class="hd-1"><Coder></h1>
|
||||
<p class="p p-1">Frontend developer who writes clean, elegant and efficient codes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="landing-mobile" class="container container-fluid">
|
||||
<div class="container">
|
||||
<div class="py-cus-mobile text-center mx-auto">
|
||||
<h1>HEY, IM RON RECIPROCO</h1>
|
||||
<p class="p p-1">A Frontend focused Web Developer building the Frontend of Websites and Design systems that leads to the success of the overall product.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About me -->
|
||||
<section id="about" class="text-center">
|
||||
<div class="container col-md-6 col-lg-8 py-5">
|
||||
<h1 class="h1">ABOUT ME</h1>
|
||||
<p class="p p-1">Here you will find more information about me, what I do, and my current skills mostly in terms of programming and technology</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="row container d-inline-block d-flex justify-content-center flex-wrap mx-auto border rounded box-shadow">
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-3">
|
||||
<h2 class="h2 py-3">Get to know me!</h2>
|
||||
<p class="p p-1">As a versatile creative professional, I wear multiple hats to bring impactful digital experiences to life. As a <span>Frontend Web Developer</span>, I craft functional and responsive websites that engage users.</p>
|
||||
<p class="p p-1">My expertise as a <span>Graphic Designer</span> merges aesthetics and user experience, ensuring visually appealing and intuitive interfaces. I have a knack for graphic design, creating captivating branding, logos, and packaging that resonate with the target audience.</p>
|
||||
<p class="p p-1">My skills extend to producing engaging social media content, crafting compelling visual narratives through video editing, and breathing life into designs with animations. I ensure that each project is not just aesthetically pleasing, but also strategically aligned to achieve business goals.</p>
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-4">
|
||||
<div>
|
||||
<h2 class="h2">Skills</h2>
|
||||
<span class="html">HTML</span>
|
||||
<span class="css">CSS</span>
|
||||
<span class="javascript">JavaScript</span>
|
||||
<span class="shopify">Shopify</span>
|
||||
<span class="wordpress">Wordpress</span>
|
||||
<span class="github">Github</span>
|
||||
<span class="sqlbasics">SQL</span>
|
||||
<span class="linux">Linux</span>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<h2 class="h2 py-3">Tools</h2>
|
||||
<span class="photoshop">Photoshop</span>
|
||||
<span class="illustrator">Illustrator</span>
|
||||
<span class="premiere">PremierePro</span>
|
||||
<span class="figma">Figma</span>
|
||||
<span class="figma">Canva</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Projects -->
|
||||
<section id="projects">
|
||||
<div class="container col-md-6 col-lg-8 py-5 text-center">
|
||||
<h1 class="h1">PROJECTS</h1>
|
||||
<p class="p p-1">Here you will find more information about me, what I do, and my current skills mostly in terms of programming and technology.</p>
|
||||
</div>
|
||||
<div class="row container d-inline-block d-flex justify-content-center flex-wrap mx-auto border rounded box-shadow">
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-3">
|
||||
<img src="https://irp-cdn.multiscreensite.com/b58f31a3c41e4c408c4d824970f16db0/dms3rep/multi/iconfinder_Google_1298745.png" class="img-fluid d-flex w-75 mx-auto my-5" style="padding: 10px;">
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-4 mb-5">
|
||||
<h2 class="h2">Google</h2>
|
||||
<p class="p p-1 pt-4">As a full-stack web developer at Google, I am responsible for designing, building, and maintaining web applications that support various Google products and services. My role involves both front-end and back-end development, collaborating with teams, and ensuring optimal user experiences. I contribute to Google's web ecosystem, serving a global user base.</p>
|
||||
<a href="https://google.com/" target="_blank">
|
||||
<button>View Website</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-3">
|
||||
<img src="https://logos-download.com/wp-content/uploads/2016/02/Twitter_Logo_new.png" class="img-fluid d-flex w-75 mx-auto my-5" style="padding: 10px;">
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-4 mb-5">
|
||||
<h2 class="h2">Twitter</h2>
|
||||
<p class="p p-1 pt-4">As a full-stack web developer at Twitter, I focus on crafting and enhancing web-based features and services for Twitter's platform. My responsibilities span front-end and back-end development, working closely with cross-functional teams to deliver a seamless user experience. I contribute to Twitter's dynamic social media landscape, connecting users worldwide in real time.</p>
|
||||
<a href="https://Twitter.com/" target="_blank">
|
||||
<button>View Website</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-3">
|
||||
<img src="https://www.freeiconspng.com/uploads/facebook-transparent-pics-18.png" class="img-fluid d-flex w-75 mx-auto my-5" style="padding: 10px;">
|
||||
</div>
|
||||
<div class="container col-sm-12 col-md-6 col-lg-5 py-4">
|
||||
<h2 class="h2">Facebook</h2>
|
||||
<p class="p p-1 pt-4">
|
||||
As a full-stack web developer at Facebook, my role centers on creating and improving web applications to support Facebook's vast array of features and services. I engage in front-end and back-end development, collaborating across teams to deliver an exceptional user experience. I play a part in Facebook's global social networking platform..</p>
|
||||
<a href="https://fb.com/" target="_blank">
|
||||
<button>View Website</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Contact Form Section Start-->
|
||||
<section id="contact" class="section-3 text-center py-5">
|
||||
<!-- Contact Form Section Start-->
|
||||
<div class="container-fluid min-vh-50 text-white p-5" id="contact-section">
|
||||
<h2 class="text-dark">Contact me</h2>
|
||||
<p class="p p-1">Feel free to Contact me by submitting the form below and I will get back to you as soon as possible</p>
|
||||
<div class="container d-grid mt-3 rounded col-xl-4 col-md-8 col-sm-12">
|
||||
<form id="form-col">
|
||||
<div class="row mt-5 justify-content-center p-3">
|
||||
<div class="col">
|
||||
<!-- Name -->
|
||||
<div class="form-group">
|
||||
<label for="textInput">Name</label>
|
||||
<input type="text" class="form-control" id="textInput" placeholder="Your Name" required>
|
||||
</div>
|
||||
<!-- Email Address -->
|
||||
<div class="form-group">
|
||||
<label for="textInput">Email Address</label>
|
||||
<input type="text" class="form-control" id="textInput" placeholder="Enter text" required>
|
||||
</div>
|
||||
<!-- Text Area -->
|
||||
<div class="form-group">
|
||||
<label for="textareaInput">Message</label>
|
||||
<textarea class="form-control" id="textareaInput" rows="4" placeholder="Enter text"></textarea>
|
||||
</div>
|
||||
<!-- Button -->
|
||||
<button type="button" class="m-5" data-toggle="modal" data-target="#modalDiv">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade text-secondary" id="modalDiv">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Thank you for contacting us!</h4>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p>Message Successfully sent.</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer" class="footer mt-5">
|
||||
<p class="footer-end text-center">© Copyright 2023. Made by Ron Reciproco</p>
|
||||
<div id="awesome" class="text-center py-1">
|
||||
<a href="https://fb.com/"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
|
||||
<a href="https://linkedin.com/"><i class="fab fa-linkedin"></i></a>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
|
||||
<!-- Hamburger -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.navbar-toggler').click(function() {
|
||||
$('.navbar-collapse').toggleClass('show');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,75 @@
|
||||
#landing {
|
||||
min-height: 87vh;
|
||||
background-image: url('images/background.gif');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
@media (max-width: 1920px) {
|
||||
.py-cus {
|
||||
margin-top: 13rem !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
#landing {
|
||||
min-height: 77vh;
|
||||
}
|
||||
.py-cus {
|
||||
margin-top: 11rem !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
#landing {
|
||||
min-height: 67vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
#landing {
|
||||
min-height: 55vh;
|
||||
}
|
||||
.p-1 {
|
||||
font-size: var(--fs-lp) !important;
|
||||
}
|
||||
.py-cus {
|
||||
margin-top: 9rem !important;
|
||||
width: 300px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
#landing {
|
||||
min-height: 45vh;
|
||||
}
|
||||
.hd-1 {
|
||||
font-size: var(--fs-h1) !important;
|
||||
}
|
||||
.p-1 {
|
||||
font-size: var(--fs-lp) !important;
|
||||
}
|
||||
.py-cus {
|
||||
margin-top: 6rem !important;
|
||||
width: 250px !important;
|
||||
}
|
||||
}
|
||||
/* Tablet Display Settings */
|
||||
/* Display None =< Medium Screen */
|
||||
@media (min-width: 768px) {
|
||||
#landing-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
font-size: var(--fs-p);
|
||||
font-weight: 500;
|
||||
padding: 10px 2rem 10px 2rem;
|
||||
border: 2px solid blue;
|
||||
background: blue;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: white;
|
||||
color: blue;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Subproject commit 90e19e664877e7a1d4c8278fbc5119c599a22b85
|
||||
Loading…
Reference in New Issue