S10 Discussion

master
Ron Reciproco 1 year ago
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>&copy; 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>

@ -2,4 +2,27 @@
padding: 0;
margin: 0;
box-sizing: border-box;
}
}
.img-float {
width: 300px;
height: 300px;
float: inherit;
margin: 2rem;
}
.parent-element {
background-color: skyblue;
padding: 10px;
}
.child-one {
background-color: gray;
padding: 10px;
}
.child-two {
background-color: yellow;
padding: 10px;
}
.child-three {
background-color: gray;
padding: 10px;
}

@ -4,9 +4,36 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
<title>CSS Common Positioning Properties</title>
</head>
<body>
</body>
<!-- Float property -->
<p>
The Float property is used for positioning and formatting content. e g.
Let an image float left to the text in a container.
</p>
<p>
<img src="https://place-puppy.com/450x450" class="img-float" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla earum autem exercitationem natus minima repellendus corporis officia aliquid! Quaerat dolores aspernatur maiores? Molestias, adipisci soluta! Incidunt exercitationem quidem dolorem culpa?
Quas, repudiandae? Explicabo deleniti dicta, eveniet ducimus sunt voluptatem ut obcaecati. Repellendus, ipsum cupiditate ea alias magni quia enim nihil quam cum voluptatem sapiente tempora, nam, dolores soluta aspernatur. Sequi.
Distinctio incidunt nemo ipsa in. Quae repellat ut hic sit maiores. Repellat ad tempore beatae soluta ullam in provident odit esse magnam, quibusdam quasi temporibus repudiandae sunt a aliquam modi!
Excepturi quos enim iure quidem consequuntur, at delectus unde in, inventore est perspiciatis numquam dignissimos deserunt aperiam fugiat ducimus perferendis nostrum recusandae architecto et commodi sed? Ratione cum enim provident.
Laboriosam alias assumenda qui, atque aspernatur ut omnis debitis itaque tempora! Ullam consequatur perferendis ab provident deleniti officia, aliquid reiciendis nobis dolorum repudiandae vitae, debitis blanditiis asperiores! Possimus, voluptatem nam.
</p>
<!-- CSS Positioning -->
<h2>CSS Positioning</h2>
<div class="parent-element">Parent Element
<div class="child-one">
I'm the child element.
</div>
<div class="child-two">
All eyes on me. I am the child two element.
</div>
<div class="child-three">
I'm the child three element.
</div>
</div>
</body>
</html>
Loading…
Cancel
Save