S32 Activity
parent
6600096eba
commit
8adc66c8ff
@ -1,303 +0,0 @@
|
||||
------------------------------> 1. Use effective search terms: <---------------------------------------------------
|
||||
1. How to create a self auto-scrolling image in applications that displays multiple pictures in website?
|
||||
- How to do scrollable Image Gallery in HTML AND CSS?
|
||||
- How to create slideshow using HTML & CSS?
|
||||
- Automatic image slider in html and css
|
||||
- HTML AND CSS Image Carousel Scripts
|
||||
2. How to create of self auto-scrolling in HTML Structure?
|
||||
3. How to create of self auto-scrolling in CSS Styles?
|
||||
4. How to create of self auto-scrolling in JavaScript?
|
||||
5.
|
||||
|
||||
------------------------------> 2. Read official documentation or look for reliable sources of information <---------------------------------------------------
|
||||
for reference - https://www.geeksforgeeks.org/programming-a-slideshow-with-html-and-css/
|
||||
|
||||
- https://www.w3schools.com/howto/howto_css_image_gallery_scroll.asp
|
||||
- https://stackoverflow.com/questions/15485694/auto-scrolling-with-css
|
||||
- https://www.youtube.com/watch?v=MaRmAmFI3Sc&ab_channel=WinterwindInc.
|
||||
|
||||
HTML
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML and CSS Slideshow</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: 5%;
|
||||
text-align: center;
|
||||
font-size: 50;
|
||||
}
|
||||
|
||||
/* Styling the area of the slides */
|
||||
|
||||
#slideshow {
|
||||
overflow: hidden;
|
||||
height: 510px;
|
||||
width: 728px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Style each of the sides
|
||||
with a fixed width and height */
|
||||
|
||||
.slide {
|
||||
float: left;
|
||||
height: 510px;
|
||||
width: 728px;
|
||||
}
|
||||
|
||||
/* Add animation to the slides */
|
||||
|
||||
.slide-wrapper {
|
||||
|
||||
/* Calculate the total width on the
|
||||
basis of number of slides */
|
||||
width: calc(728px * 4);
|
||||
|
||||
/* Specify the animation with the
|
||||
duration and speed */
|
||||
animation: slide 10s ease infinite;
|
||||
}
|
||||
|
||||
/* Set the background color
|
||||
of each of the slides */
|
||||
|
||||
.slide:nth-child(1) {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.slide:nth-child(2) {
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.slide:nth-child(3) {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.slide:nth-child(4) {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
/* Define the animation
|
||||
for the slideshow */
|
||||
|
||||
@keyframes slide {
|
||||
|
||||
/* Calculate the margin-left for
|
||||
each of the slides */
|
||||
20% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
40% {
|
||||
margin-left: calc(-728px * 1);
|
||||
}
|
||||
60% {
|
||||
margin-left: calc(-728px * 2);
|
||||
}
|
||||
80% {
|
||||
margin-left: calc(-728px * 3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Define the slideshow container -->
|
||||
<div id="slideshow">
|
||||
<div class="slide-wrapper">
|
||||
|
||||
<!-- Define each of the slides
|
||||
and write the content -->
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
GeeksforGeeks
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
A computer science portal
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
This is an example of
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
Slideshow with HTML and CSS only
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
------------------------------> 3. Scanning and Reading <---------------------------------------------------
|
||||
|
||||
Building a Bootstrap carousel is a great way to display a rotating set of images or content on your website.
|
||||
Bootstrap provides a simple and flexible framework for building carousels.
|
||||
|
||||
Here's a step-by-step approach to building a Bootstrap carousel:
|
||||
|
||||
1. Include Bootstrap:
|
||||
First, make sure you include Bootstrap in your HTML document. You can either download Bootstrap and include it locally or use a content delivery network (CDN).
|
||||
|
||||
Here's an example using the CDN:
|
||||
|
||||
<!-- Add these links in the <head> of your HTML file -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
|
||||
2. Structure your HTML:
|
||||
Create the basic HTML structure for your carousel. You'll need an outer container and a set of slide elements.
|
||||
|
||||
Here's an example:
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
|
||||
<!-- Slides -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="image1.jpg" alt="Image 1">
|
||||
<div class="carousel-caption">
|
||||
<h3>Slide 1</h3>
|
||||
<p>Description for Slide 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="image2.jpg" alt="Image 2">
|
||||
<div class="carousel-caption">
|
||||
<h3>Slide 2</h3>
|
||||
<p>Description for Slide 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add more slides as needed -->
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
3. Customize as needed:
|
||||
- Replace the src attributes in the <img> tags with the paths to your images.
|
||||
- Modify the content and styles inside the <div class="carousel-caption"> to match your design.
|
||||
|
||||
4. Add CSS and Js (Optional)
|
||||
- If you want to apply custom styles to your carousel, you can add your own CSS rules to override Bootstrap's default styles.
|
||||
- Bootstrap's carousel should work without any additional JavaScript. However, if you want to add custom functionality, such as controlling the carousel programmatically, you can write JavaScript code accordingly.
|
||||
|
||||
5. Test and Preview:
|
||||
Save your HTML file and open it in a web browser to preview your Bootstrap carousel. Make sure it's functioning as expected and looks good.
|
||||
|
||||
That's it! You've created a Bootstrap carousel. You can further customize it by exploring Bootstrap's documentation and adding additional features like autoplay, interval timing, and more.
|
||||
|
||||
|
||||
|
||||
------------------------------> 4. Test your understanding <---------------------------------------------------
|
||||
|
||||
<!-- HTML code -->
|
||||
<div class="image-gallery">
|
||||
<ul>
|
||||
<li><img src="image1.jpg" alt="Image 1"></li>
|
||||
<li><img src="image2.jpg" alt="Image 2"></li>
|
||||
<li><img src="image3.jpg" alt="Image 3"></li>
|
||||
<!-- Add more images as needed -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CSS code -->
|
||||
.image-gallery {
|
||||
width: 300px; /* Adjust the width as needed */
|
||||
height: 200px; /* Adjust the height as needed */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-gallery ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex; /* Display images in a horizontal row */
|
||||
animation: scrollImages 10s linear infinite; /* Adjust the animation duration */
|
||||
}
|
||||
|
||||
.image-gallery li {
|
||||
margin-right: 10px; /* Adjust spacing between images */
|
||||
}
|
||||
|
||||
.image-gallery img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@keyframes scrollImages {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%); /* Move the images to the left */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<!-- Another HTML Code -->
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML and CSS Slideshow</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Define the slideshow container -->
|
||||
<div id="slideshow">
|
||||
<div class="slide-wrapper">
|
||||
|
||||
<!-- Define each of the slides
|
||||
and write the content -->
|
||||
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
GeeksforGeeks
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
A computer science portal
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
This is an example of
|
||||
</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1 class="slide-number">
|
||||
Slideshow with HTML and CSS only
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
/*Task: Ron START*/
|
||||
* {
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.external {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
/*Type selector*/
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/*ID selector*/
|
||||
#sub-header{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*Class selector*/
|
||||
.text-green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
/*Task: JP START*/
|
||||
li[class*="border-blue"] {
|
||||
border: solid;
|
||||
border-color: blue;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
img + ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
section img {
|
||||
height: 20vh;
|
||||
width: 20vh;
|
||||
border-radius: 100px;
|
||||
}
|
||||
/*Task: JP END*/
|
||||
|
||||
/*Task: JOSHUA START*/
|
||||
ul + p{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
ul li{
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
/*Task: JOSHUA END*/
|
||||
@ -1,63 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Activity: CSS Introduction</title>
|
||||
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<style>
|
||||
#internal {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Task: Ron START-->
|
||||
<!-- Different ways to include CSS -->
|
||||
<p style="color: red;">Apply inline styling here.</p>
|
||||
<p id="internal">Apply internal styling here.</p>
|
||||
<p class="external">Apply external styling here.</p>
|
||||
<!-- Task: Ron END-->
|
||||
|
||||
<!-- Task: Chris START-->
|
||||
<!-- CSS Selectors -->
|
||||
<h1>CSS Introduction Activity</h1>
|
||||
|
||||
<h2 id="sub-header">The following are things you will learn in this bootcamp:</h2>
|
||||
|
||||
<h3>Languages to be Learned</h3>
|
||||
<ol>
|
||||
<li class="text-green">Hypertext Markup Language</li>
|
||||
<li class="text-green">Cascading Style Sheet</li>
|
||||
<li class="text-green">JavaScript</li>
|
||||
</ol>
|
||||
<!-- Task: Chris END-->
|
||||
|
||||
<!-- Task: JP START-->
|
||||
<h3>Tools to be Used</h3>
|
||||
<ol>
|
||||
<li class="border-blue">Sublime Text</li>
|
||||
<li class="border-blue">Postman</li>
|
||||
<li class="border-blue">Heroku</li>
|
||||
<li class="border-blue">GitLab</li>
|
||||
</ol>
|
||||
|
||||
<!-- Combinator Selectors -->
|
||||
<section>
|
||||
<h4>Other Things to be Learned</h4>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/480px-Unofficial_JavaScript_logo_2.svg.png">
|
||||
<ul>
|
||||
<li>Node.js</li>
|
||||
<li>Express.js</li>
|
||||
<li>React.js</li>
|
||||
<li>MongoDB</li>
|
||||
</ul>
|
||||
<!-- Task: JP END-->
|
||||
|
||||
<!-- Task: Joshua START-->
|
||||
<p>Web development is a continuous process. Never stop learning and always look for ways to innovate.</p>
|
||||
</section>
|
||||
<!-- Task: Joshua END-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
/* CSS Reset Rule */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
/* Ron Task (Member 1 & 2 */
|
||||
#pre-footer {
|
||||
/* 2. Member 1 */
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
background-color: #002540;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Chris ( Member 3 )*/
|
||||
|
||||
#pre-footer div {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#pre-footer div p,
|
||||
#pre-footer div h3 {
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
/* JP ( Member 4 )*/
|
||||
|
||||
footer {
|
||||
padding-top: 0.7rem;
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 0.7rem;
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
/* Josua (Member 5) */
|
||||
/*task #5*/
|
||||
footer span{
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
/* Member 1 */
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
body {
|
||||
height: auto;
|
||||
}
|
||||
/* JP - Member 2 Start*/
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Titillium Web", sans-serif;
|
||||
}
|
||||
nav {
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 5px;
|
||||
text-align: center;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
/* JP - Member 2 End*/
|
||||
/* Josua Member 3 Start */
|
||||
nav > ul > li{
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding-top:3px;
|
||||
padding-bottom:3px;
|
||||
padding-left:3px;
|
||||
}
|
||||
#container {
|
||||
z-index: 99;
|
||||
}
|
||||
#landing {
|
||||
background-image: url(https://images.unsplash.com/photo-1683009427660-b38dea9e8488?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 1rem;
|
||||
}
|
||||
.info {
|
||||
padding: 10rem;
|
||||
}
|
||||
.landing-container {
|
||||
top: 3.1rem;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
}
|
||||
#landing h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
#landing h3 {
|
||||
font-size: 2rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
/*Josua - Member 3 End*/
|
||||
|
||||
/* Ron - Member 4 Start*/
|
||||
#landing button {
|
||||
cursor: pointer;
|
||||
padding: 1rem 2rem;
|
||||
background-color: blue;
|
||||
border: 2px solid white;
|
||||
border-radius: 50px;
|
||||
transition: 0.5s;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
#landing button:hover {
|
||||
background-color: white;
|
||||
color: blue;
|
||||
}
|
||||
.landing h1 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
/* Ron - Member 4 End*/
|
||||
|
||||
/* Ron - Member 5 Start*/
|
||||
#hot {
|
||||
text-align: center;
|
||||
}
|
||||
#hot h2 {
|
||||
margin: 5rem 0;
|
||||
}
|
||||
#hot li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
border: 3px solid blue;
|
||||
border-radius: 10px;
|
||||
padding: 3rem;
|
||||
margin: auto .5rem;
|
||||
}
|
||||
/* Ron - Member 5 End*/
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Activity CSS Styling Properties</title>
|
||||
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" href="./index.css"/>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul id="navMenu">
|
||||
<li class="nav-link" href="#">Home</li>
|
||||
<li class="nav-link" href="#">Products</li>
|
||||
<li class="nav-link" href="#">Cart</li>
|
||||
<li class="nav-lnk" href="#">Orders</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- landing page -->
|
||||
<section id="landing">
|
||||
<div class="landing-container">
|
||||
<div class="info">
|
||||
<h1>Welcome to our E-Commerce Website!</h1>
|
||||
<h3>Affordable Products for Everyone, Everywhere!</h3>
|
||||
<button>Check out our Latest Products!</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end of landing page -->
|
||||
|
||||
<section id="hot">
|
||||
<h2>Our Hottest Categories!</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h4>Retro Consoles</h4>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Current Consoles</h4>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Video Games</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stretch Goals -->
|
||||
<!-- footer -->
|
||||
<footer>
|
||||
<span>For Educational Purposes Only.</span>
|
||||
<span>© 2022 Zuitt. All Rights Reserved.</span>
|
||||
</footer>
|
||||
<!-- end of footer -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,143 +0,0 @@
|
||||
/*
|
||||
Member 1: Josua
|
||||
Member 2: Chris
|
||||
Member 3: Ron
|
||||
Member 4: JP
|
||||
Member 5: Ron
|
||||
*/
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
/*member 1 josua*/
|
||||
/*button styling*/
|
||||
button{
|
||||
color: white;
|
||||
padding: 10px;
|
||||
width:9em;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-color: transparent;
|
||||
border-radius: 25px;
|
||||
|
||||
}
|
||||
/*end member 1 */
|
||||
|
||||
/*member 2 */
|
||||
|
||||
nav {
|
||||
padding: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.right-nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav, .nav-logo {
|
||||
margin: 8px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/*end member 2 */
|
||||
|
||||
/* Ron - Member 3 */
|
||||
#logo {
|
||||
padding: 8px 5px 0 0;
|
||||
}
|
||||
#nav-button {
|
||||
background-color: #c2195b;
|
||||
}
|
||||
.bg-container {
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
|
||||
height: 50vh;
|
||||
z-index: 2;
|
||||
}
|
||||
#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;
|
||||
z-index: 1;
|
||||
}
|
||||
/*Member 4 - JP Start*/
|
||||
.container {
|
||||
padding-top: 4rem;
|
||||
text-align: right;
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
left: 55%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: Zilla Slab;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
width: 75%;
|
||||
margin-left: 9rem;
|
||||
margin-top: 15px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#apply-button {
|
||||
margin-top: 50px;
|
||||
background-color: #c2195b;
|
||||
}
|
||||
|
||||
/*Member 4 - JP End*/
|
||||
|
||||
|
||||
/* Ron - Member 5 */
|
||||
#main {
|
||||
padding: 1rem;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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=Zilla+Slab:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<title>S10 Group Activity</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="nav-logo">
|
||||
<img src="https://d3ojsfl21hfxhc.cloudfront.net/assets/zuitt/zuittlogo.png" id="logo">
|
||||
</li>
|
||||
<div class="right-nav">
|
||||
<li class="nav">Home</li>
|
||||
<li class="nav">Bootcamp Program</li>
|
||||
<li class="nav">Companies</li>
|
||||
<li class="nav">Bootcamp FAQ</li>
|
||||
<li class="nav">Blog</li>
|
||||
<li class="nav">
|
||||
<button id="nav-button">APPLY NOW</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- landing page -->
|
||||
<section id="bg-image">
|
||||
<div class="bg-container">
|
||||
<div class="container">
|
||||
<h1 class="title">Our Training Options That Fit Your Coding Needs</h1>
|
||||
<h2 class="subtitle">
|
||||
Offering a workable and carefully curated curriculum to cater to a variety of students and equip them the necessary web development skills they need to become a coding literate.
|
||||
</h2>
|
||||
<button id="apply-button">Apply Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end of landing page -->
|
||||
<!-- main section -->
|
||||
<section id="main">
|
||||
<h2 class="title-2">What is a Developer Career Program?</h2>
|
||||
<p id="description">
|
||||
The Developer Career Program is inclusive of in-depth modules on static and dynamic web applications, with emphasis on the development of well-designed integrated software. The course covers key concepts on full-stack web development, including Responsive Web Design, Rapid Prototyping and Product Deployments.
|
||||
</p>
|
||||
<h2 class="title-2">STILL HAVE A QUESTION?</h2>
|
||||
<p id="book-description">
|
||||
Our career advisors are here to answer any questions you may have. Meet with them by booking one of our free seminars, and learn all the finer details of our web development course.
|
||||
</p>
|
||||
<button id="book-button">Book Now</button>
|
||||
</section>
|
||||
<!-- end of pre-footer section -->
|
||||
<!-- footer -->
|
||||
<footer>
|
||||
<!-- Creates an inline element -->
|
||||
<span>Terms of Service</span>
|
||||
<span>|</span>
|
||||
<span>Privacy Policy</span>
|
||||
<span>|</span>
|
||||
<span>© 2022 Zuitt. All Rights Reserved</span>
|
||||
</footer>
|
||||
<!-- end of footer -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,123 +0,0 @@
|
||||
<!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>
|
||||
@ -1,120 +0,0 @@
|
||||
<!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>
|
||||
@ -1,100 +0,0 @@
|
||||
<!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.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,126 +0,0 @@
|
||||
<!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>
|
||||
@ -1,99 +0,0 @@
|
||||
<!--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>
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 608 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 598 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 367 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 625 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
@ -1,229 +0,0 @@
|
||||
/*CSS Reset*/
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#nav-b {
|
||||
background: #765C3D;
|
||||
}
|
||||
|
||||
/*navlinks*/
|
||||
nav a {
|
||||
text-align: center;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: normal;
|
||||
|
||||
/*!important is used to prioritize a css rule*/
|
||||
color: #F2D2AE !important;
|
||||
}
|
||||
|
||||
/* lannding page*/
|
||||
|
||||
#landing {
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 0, 0, 0.61),
|
||||
rgba(0, 0, 0, 0.61)
|
||||
|
||||
),
|
||||
url("images/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
min-height: 51rem;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
.title{
|
||||
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 72px; /* 112.5% */
|
||||
letter-spacing: -1.28px;
|
||||
}
|
||||
|
||||
#landing p{
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.wrap-landing{
|
||||
display: flex;
|
||||
width: 493px;
|
||||
height: 124px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lp-layout{
|
||||
width: 413px;
|
||||
height: 124px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wrap-size{
|
||||
width: 493px;
|
||||
height: 290px;
|
||||
|
||||
}
|
||||
|
||||
.p-wrap-size{
|
||||
width: 413px;
|
||||
height: 124px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.button-1{
|
||||
display: flex;
|
||||
padding: 12px 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
background: #B59066;
|
||||
}
|
||||
|
||||
#but-text {
|
||||
height: 48px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
#but-text a {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-1:hover{
|
||||
background: blue;
|
||||
}
|
||||
/*end landing*/
|
||||
|
||||
/* Carousel */
|
||||
.h1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 2.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.p1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
padding: 10rem 0 7rem 0;
|
||||
}
|
||||
.container-info {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16.44rem;
|
||||
margin-top: 9.63rem;
|
||||
width: 500px;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 77.8125rem;
|
||||
height: 47.75rem;
|
||||
flex-shrink: 0;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
|
||||
padding: 0 90px;
|
||||
}
|
||||
.container-info-1 {
|
||||
margin-top: 4.6rem;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.carousel-container {
|
||||
|
||||
height: 25.0625rem;
|
||||
flex-shrink: 0;
|
||||
margin: 6.81rem auto;
|
||||
}
|
||||
#carousel-1 {
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.carousel-inner, .carousel-item, #carouselExampleControls {
|
||||
width: 400px;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: transparent;
|
||||
box-shadow: none;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
.carousel-container {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.container-carousel-1 .container {
|
||||
margin: auto !important;
|
||||
padding: auto !important;
|
||||
}
|
||||
.container-footer {
|
||||
margin-top: 5rem !important;
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
.contact-container-2 {
|
||||
width: 90vw;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.landing-container {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
/* Carousel End*/
|
||||
|
||||
/*Contact Us - CSS*/
|
||||
form ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#build-img {
|
||||
width: 808px;
|
||||
height: 1088px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#cnt-us {
|
||||
display: flex;
|
||||
width: 501.751px;
|
||||
height: 49px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
|
||||
font-family: "Montserrat";
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600
|
||||
line-height: normal;
|
||||
color: #765C3D;
|
||||
}
|
||||
@ -1,199 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Activity S18 Wireframes, Mockup and Prototypes</title>
|
||||
|
||||
<!-- bootstrap css -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- external css -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--navbar-->
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid py-2" id="nav-b">
|
||||
<a class="navbar-brand" href="#" id="logo">
|
||||
<img src="./images/Logo.png" class=" px-5 img-fluid">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav ml-auto">
|
||||
<a class="nav-link pd-5" href="#">HOME</a>
|
||||
<a class="nav-link pd-3" href="#">GALLERY</a>
|
||||
<a class="nav-link pd-3" href="#">CONTACT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- landing -->
|
||||
<div class="py-5 container-fluid" id="landing">
|
||||
<div class="row my-5 py-5 justify-content-center">
|
||||
<div class="col-md-8 pt-md-5 text-left ">
|
||||
<h1 class="title">Replace This </h1>
|
||||
<h1 class="title">With Your Title</h1>
|
||||
|
||||
<div class="col-md-7 text-left p-wrap-size">
|
||||
<p class=" text-left">You can use this section to narrate a short description for the title or page.</p>
|
||||
<div id="but-text">
|
||||
<a href="" class="button-1">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end landing -->
|
||||
|
||||
|
||||
<!-- Gallery -->
|
||||
<section id="gallery" class="text-center mt-cus">
|
||||
<div>
|
||||
<h1 class="h1-cus">GALLERY</h1>
|
||||
<p class="col col-md-8 col-lg-7 mx-auto p1-cus mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Carousel -->
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 1</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container container-fluid">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album1-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 2</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album2-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls1" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls1" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 3</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album3-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls2" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls2" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Contact US -->
|
||||
<div class="container-fluid" id="contact-us">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<img src="./images/building.png" id="build-img">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<h1 id="cnt-us">CONTACT US</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
|
||||
<!-- FORM DETAILS -->
|
||||
<form action="./index.html">
|
||||
<ul>
|
||||
<li><label for="nameInput">Name</label></li>
|
||||
<li><input type="text" id="nameInput"></li>
|
||||
|
||||
<li><label for="emailInput">Email Address</label></li>
|
||||
<li><input type="text" id="emailInput"></li>
|
||||
|
||||
<li><label for="msgInput">Message</label></li>
|
||||
<li><textarea rows="4" id="msgInput"></textarea></li>
|
||||
|
||||
<li><button type="submit" id="submit-btn">Submit</button></li>
|
||||
</ul>
|
||||
</form>
|
||||
<!-- End of Form -->
|
||||
|
||||
|
||||
<!-- bootstrap js -->
|
||||
<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>
|
||||
@ -1,205 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
}
|
||||
:root {
|
||||
--bg-primary: #765C3D;
|
||||
|
||||
--bg-button: #B59066;
|
||||
|
||||
--box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
#navbar {
|
||||
background: var(--bg-primary) !important;
|
||||
}
|
||||
.navbar-brand, #navbarNav .nav-collapse, ul, li, a {
|
||||
color: #FFF !important;
|
||||
}
|
||||
.h1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 2.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.p1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
#landing {
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 0, 0, 0.61),
|
||||
rgba(0, 0, 0, 0.61)
|
||||
|
||||
),
|
||||
url("images/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
min-height: 51rem;
|
||||
min-width: 100vw;
|
||||
}
|
||||
.container-info {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16.44rem;
|
||||
margin-top: 9.63rem;
|
||||
width: 500px;
|
||||
}
|
||||
.container-info h1 {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 4rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 4.5rem; /* 112.5% */
|
||||
letter-spacing: -0.08rem;
|
||||
}
|
||||
.container-info p {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.5rem !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem; /* 125% */
|
||||
}
|
||||
.btn-1, .btn-end{
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 62.4375rem;
|
||||
background-color: var(--bg-button) !important;
|
||||
color: var(--button-text-button-primary-text, #FFF);
|
||||
text-align: center;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.25rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem !important;/* 120% */
|
||||
border:none;
|
||||
}
|
||||
.btn-end {
|
||||
display: flex !important;
|
||||
float: right;
|
||||
}
|
||||
#gallery {
|
||||
padding: 10rem 0 7rem 0;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 77.8125rem;
|
||||
height: 47.75rem;
|
||||
flex-shrink: 0;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
|
||||
padding: 0 90px;
|
||||
}
|
||||
.container-info-1 {
|
||||
margin-top: 4.6rem;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.carousel-container {
|
||||
|
||||
height: 25.0625rem;
|
||||
flex-shrink: 0;
|
||||
margin: 6.81rem auto;
|
||||
}
|
||||
#carousel-1 {
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
.footer, .footer p {
|
||||
background: #B59066;
|
||||
margin: 0 !important;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.image-container {
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 0, 0, 0.61),
|
||||
rgba(0, 0, 0, 0.61)
|
||||
|
||||
),
|
||||
url("images/footer-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
min-height: 51rem;
|
||||
min-width: 50vw;
|
||||
}
|
||||
.contact-container {
|
||||
width: 100vw;
|
||||
background-color: hsla(32, 100%, 95%, 1);
|
||||
}
|
||||
.container-footer {
|
||||
margin-top: 10rem !important;
|
||||
margin-left: 7.81rem !important;
|
||||
}
|
||||
.form-group {
|
||||
color: hsla(32, 32%, 35%, 1);
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
/* Landing */
|
||||
#landing {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.container-info {
|
||||
margin-left: 2rem;
|
||||
width: 400px;
|
||||
}
|
||||
.container-info h1{
|
||||
font-size: 4rem;
|
||||
}
|
||||
.container-info-1 {
|
||||
margin-left: 1rem;
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
/* Carousel */
|
||||
.carousel-inner, .carousel-item, #carouselExampleControls {
|
||||
width: 400px;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: transparent;
|
||||
box-shadow: none;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
.carousel-container {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.container-carousel-1 .container {
|
||||
margin: auto !important;
|
||||
padding: auto !important;
|
||||
}
|
||||
.container-footer {
|
||||
margin-top: 5rem !important;
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
.contact-container-2 {
|
||||
width: 90vw;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.landing-container {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
<!-- Font -->
|
||||
<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=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid mx-5">
|
||||
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></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 justify-content-end" id="navbarNav">
|
||||
<ul class="navbar-nav" id="navbar-col">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<section id="landing">
|
||||
<div class="landing-container row">
|
||||
<div class="container-info">
|
||||
<h1 class="">Replace This With Your Title</h1>
|
||||
<p class="mt-4">You can use this section to narrate a short description for the title or page.</p>
|
||||
<button class="btn-1 mt-5">Get Started</button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="gallery" class="text-center mt-cus">
|
||||
<div>
|
||||
<h1 class="h1-cus">GALLERY</h1>
|
||||
<p class="col col-md-8 col-lg-7 mx-auto p1-cus mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Carousel -->
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 1</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container container-fluid">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album1-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 2</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album2-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls1" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls1" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 3</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album3-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls2" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls2" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div class="contact-container row">
|
||||
<div class="image-container d-none d-lg-block">
|
||||
</div>
|
||||
<div class="contact-container-2">
|
||||
<form id="form">
|
||||
<div class="container-footer container col-md-6 col-lg-10">
|
||||
<h1 class="h1-cus">CONTACT US</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlInput1">Name</label>
|
||||
<input type="name" class="form-control" id="exampleFormControlInput1" placeholder="Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlInput1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1">Message</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-end mt-5">Get Started</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<p class="text-white text-center">2023 | All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<!-- Add Bootstrap JavaScript and jQuery -->
|
||||
<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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
|
||||
// console.log("Hello World");
|
||||
|
||||
|
||||
//Objective 1
|
||||
//Add code here
|
||||
//Note: function name is numberLooper
|
||||
|
||||
function numberLooper(number) {
|
||||
let message = '';
|
||||
|
||||
for (let count = number; count >= 0; count--) {
|
||||
if (count <= 50) {
|
||||
message = "The current value is at " + count + " Terminating the loop.";
|
||||
break;
|
||||
}
|
||||
|
||||
if (count % 10 === 0) {
|
||||
console.log('The number is divisible by 10. Skipping the number.');
|
||||
continue;
|
||||
}
|
||||
|
||||
if (count % 5 === 0) {
|
||||
console.log(count);
|
||||
}
|
||||
}
|
||||
|
||||
return message;
|
||||
}
|
||||
//let loopCount = parseInt(prompt("Enter number of loops"));
|
||||
//console.log("numberLooper(" + loopCount + ")");
|
||||
//let numLooper = numberLooper(loopCount);
|
||||
|
||||
console.log("numberLooper(65)");
|
||||
let numLooper = numberLooper(65);
|
||||
console.log(numLooper);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Objective 2
|
||||
let string = 'supercalifragilisticexpialidocious';
|
||||
console.log(string);
|
||||
let filteredString = '';
|
||||
|
||||
|
||||
for(let i = 0; i < string.length; i++){
|
||||
|
||||
if (
|
||||
string[i].toLowerCase() == "a" ||
|
||||
string[i].toLowerCase() == "i" ||
|
||||
string[i].toLowerCase() == "u" ||
|
||||
string[i].toLowerCase() == "e" ||
|
||||
string[i].toLowerCase() == "o"
|
||||
){
|
||||
// If the letter in the name is a vowel, it will print the number 3
|
||||
continue;
|
||||
} else {
|
||||
// Print in the console all non-vowel characters in the name
|
||||
filteredString = filteredString + string[i];
|
||||
}
|
||||
}
|
||||
console.log(filteredString);
|
||||
|
||||
|
||||
|
||||
|
||||
//Add code here
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//Do not modify
|
||||
//For exporting to test.js
|
||||
//Note: Do not change any variable and function names. All variables and functions to be checked are listed in the exports.
|
||||
try{
|
||||
module.exports = {
|
||||
|
||||
filteredString: typeof filteredString !== 'undefined' ? filteredString : null,
|
||||
numberLooper: typeof numberLooper !== 'undefined' ? numberLooper : null
|
||||
}
|
||||
} catch(err){
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,181 @@
|
||||
// console.log("Hello World");
|
||||
|
||||
// [Section] While Loop
|
||||
/*
|
||||
- A while loop takes in an expression/condition
|
||||
- Expressions are any unit of code that can be evaluated to a value
|
||||
- If the condition evaluates to true, the statements inside the code block will be executed
|
||||
- A statement is a command that the programmer gives to the computer
|
||||
- A loop will iterate a certain number of times until an expression/condition is met
|
||||
- "Iteration" is the term given to the repetition of statements
|
||||
- Syntax
|
||||
while(expression/condition) {
|
||||
statement
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
let count = 5;
|
||||
|
||||
// While the value of count is not equal to 0
|
||||
while(count !== 0) {
|
||||
|
||||
// The current value of count is printed out
|
||||
console.log("While: " + count);
|
||||
|
||||
// Decreases the value of count by 1 after every iteration to stop the loop when it reaches 0
|
||||
// Loops occupy a significant amount of memory space in our devices
|
||||
// Make sure that expressions/conditions in loops have their corresponding increment/decrement operators to stop the loop
|
||||
// Forgetting to include this in loops will make our applications run an infinite loop which will eventually crash our devices
|
||||
// After running the script, if a slow response from the browser is experienced or an infinite loop is seen in the console quickly close the application/browser/tab to avoid this
|
||||
count--;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// [Section] Do While Loop
|
||||
/*
|
||||
- A do-while loop works a lot like the while loop. But unlike while loops, do-while loops guarantee that the code will be executed at least once.
|
||||
- Syntax
|
||||
do {
|
||||
statement
|
||||
} while (expression/condition)
|
||||
*/
|
||||
|
||||
/*
|
||||
- The "Number" function works similarly to the "parseInt" function
|
||||
- Both differ significantly in terms of the processes they undertake in converting information into a number data type and other features that help with manipulating data
|
||||
- The "prompt" function creates a pop-up message in the browser that can be used to gather user input
|
||||
- How the Do While Loop works:
|
||||
1. The statements in the "do" block executes once
|
||||
2. The message "Do While: " + number will be printed out in the console
|
||||
3. After executing once, the while statement will evaluate whether to run the next iteration of the loop based on given expression/condition (e.g. number less than 10)
|
||||
4. If the expression/condition is not true, another iteration of the loop will be executed and will be repeated until the condition is met
|
||||
5. If the expression/condition is true, the loop will stop
|
||||
*/
|
||||
|
||||
|
||||
// let number = Number(prompt("Give me a number"));
|
||||
|
||||
// do {
|
||||
|
||||
// // The current value of number is printed out
|
||||
// console.log("Do While: " + number);
|
||||
|
||||
// // Increases the value of number by 1 after every iteration to stop the loop when it reaches 10 or greater
|
||||
// // number = number + 1
|
||||
// number += 1;
|
||||
|
||||
// // Providing a number of 10 or greater will run the code block once and will stop the loop
|
||||
// } while (number < 10)
|
||||
|
||||
|
||||
// [Section] For Loop
|
||||
/*
|
||||
- A for loop is more flexible than while and do-while loops. It consists of three parts:
|
||||
1. The "initialization" value that will track the progression of the loop.
|
||||
2. The "expression/condition" that will be evaluated which will determine whether the loop will run one more time.
|
||||
3. The "finalExpression" indicates how to advance the loop.
|
||||
- Syntax
|
||||
for (initialization; expression/condition; finalExpression) {
|
||||
statement
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
- Will create a loop that will start from 0 and end at 20
|
||||
- Every iteration of the loop, the value of count will be checked if it is equal or less than 20
|
||||
- If the value of count is less than or equal to 20 the statement inside of the loop will execute
|
||||
- The value of count will be incremented by one for each iteration
|
||||
*/
|
||||
|
||||
|
||||
for (let count = 0; count <= 20; count++) {
|
||||
|
||||
// The current value of count is printed out
|
||||
console.log(count);
|
||||
|
||||
}
|
||||
|
||||
// for (let count = 0; count >= -20; count--) {
|
||||
// console.log(count);
|
||||
// }
|
||||
|
||||
let myString = "alex";
|
||||
|
||||
console.log(myString.length);
|
||||
|
||||
// Accessing index number
|
||||
|
||||
console.log(myString[0]);
|
||||
console.log(myString[1]);
|
||||
console.log(myString[2]);
|
||||
|
||||
for(let x = 0; x < myString.length; x++) {
|
||||
|
||||
console.log(myString[x])
|
||||
}
|
||||
|
||||
let myName = "AlEx";
|
||||
|
||||
for (let i=0; i < myName.length; i++) {
|
||||
|
||||
|
||||
if (
|
||||
myName[i].toLowerCase() == "a" ||
|
||||
myName[i].toLowerCase() == "i" ||
|
||||
myName[i].toLowerCase() == "u" ||
|
||||
myName[i].toLowerCase() == "e" ||
|
||||
myName[i].toLowerCase() == "o"
|
||||
){
|
||||
// If the letter in the name is a vowel, it will print the number 3
|
||||
console.log(3);
|
||||
} else {
|
||||
// Print in the console all non-vowel characters in the name
|
||||
console.log(myName[i])
|
||||
}
|
||||
}
|
||||
|
||||
// [SECTION] Continue and Break statements
|
||||
|
||||
for (let count = 0; count <= 20; count++) {
|
||||
|
||||
// if remainder is equal to 0
|
||||
if (count % 2 === 0) {
|
||||
|
||||
// Tells the code to continue to the next iteration of the loop
|
||||
// This ignores all statements located after the continue statement;
|
||||
continue;
|
||||
}
|
||||
|
||||
// The current value of number is printed out if the remainder is not equal to 0
|
||||
console.log("Continue and Break: " + count);
|
||||
|
||||
// If the current value of count is greater than 10
|
||||
if (count > 10) {
|
||||
|
||||
// Tells the code to terminate/stop the loop even if the expression/condition of the loop defines that it should execue so long as the value of count is less than or equal to 20
|
||||
// number values after 10 will no longer be printed
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let name = "alexandro";
|
||||
|
||||
|
||||
for (let i = 0; i < name.length; i++) {
|
||||
|
||||
console.log(name[i]);
|
||||
|
||||
if (name[i].toLowerCase() === "a") {
|
||||
console.log("Continue to the next iteration");
|
||||
continue;
|
||||
}
|
||||
|
||||
if (name[i] == "d") {
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Loading…
Reference in New Issue