S10 Discussion
parent
c84a7bc94d
commit
334ca750aa
@ -0,0 +1,137 @@
|
|||||||
|
/*
|
||||||
|
Member 1: Josua
|
||||||
|
Member 2: Chris
|
||||||
|
Member 3: Ron
|
||||||
|
Member 4: JP
|
||||||
|
Member 5: Ron
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Member 1 & 2 */
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
color: white;
|
||||||
|
padding: 15px;
|
||||||
|
width: 9rem;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
padding: 5px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.right-nav {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.nav, .nav-logo {
|
||||||
|
margin: 8px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ron - Member 3 */
|
||||||
|
#logo {
|
||||||
|
padding: 8px 5px 0 0;
|
||||||
|
}
|
||||||
|
#nav-button {
|
||||||
|
background-color: #c2195b;
|
||||||
|
}
|
||||||
|
#bg-image {
|
||||||
|
background-image: url(https://d3ojsfl21hfxhc.cloudfront.net/assets/zuitt/programdetails2_w.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: white;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
height: 50vh;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 5rem;
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
.title, .subtitle {
|
||||||
|
width: 50%;
|
||||||
|
float: right;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#apply-button {
|
||||||
|
width: 8%;
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20%;
|
||||||
|
right: 4.3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .container {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
height: 30vh;
|
||||||
|
} */
|
||||||
|
.title {
|
||||||
|
font: 'Zilla Slab', sans-serif;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-left: 9rem;
|
||||||
|
}
|
||||||
|
#apply-button {
|
||||||
|
margin-top: 2rem;
|
||||||
|
background-color: #c2195b;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Ron - Member 5 */
|
||||||
|
#main {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.title-2 {
|
||||||
|
font-family: 'Zilla Slab', serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 3rem auto;
|
||||||
|
}
|
||||||
|
#description, #book-description {
|
||||||
|
margin: 3rem auto;
|
||||||
|
font-weight: 500;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#book-button {
|
||||||
|
background-color: #336589;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: 10rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer span {
|
||||||
|
margin: auto 5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
/*
|
||||||
|
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: 1;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<!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>Document</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,5 +0,0 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
@ -1,12 +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="stylesheet" href="index.css">
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue