ronreciproco123
/
B322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

S10 Discussion.

Browse Source
master
Ron Reciproco 1 year ago
parent f43370a7ef
commit c84a7bc94d
8 changed files with 386 additions and 2 deletions
Show Stats Download Patch File Download Diff File

109
groupwork/frontend/s09/activity/index.css
Unescape Escape View File

@ -0,0 +1,109 @@
/* 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;
}

65
groupwork/frontend/s09/activity/index.html
Unescape Escape View File

@ -0,0 +1,65 @@
<!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>&copy; 2022 Zuitt. All Rights Reserved.</span>
</footer>
<!-- end of footer -->
</body>
</html>

5
groupwork/frontend/s10/discussion/index.css
Unescape Escape View File

@ -0,0 +1,5 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

12
groupwork/frontend/s10/discussion/index.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!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>

128
individual/frontend/s09/discussion/index.css
Unescape Escape View File

@ -0,0 +1,128 @@
/* CSS Rest Rule */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#div-3 {
background-color: skyblue;
border: 2px solid black;
height: 200px;
width: 200px;
}
#div-4 {
background-color: aquamarine;
border: 2px solid black;
height: 200px;
width: 200px;
}
#span-3 {
background-color: gray;
border: 2px solid black;
display: block;
}
#span-4 {
background-color: brown;
border: 2px solid black;
}
#span-5 {
background: yellow;
border: 3px solid black;
display: inline-block;
height: 300px;
width: 300px;
}
#span-6 {
background: orange;
border: 3px solid black;
display: inline-block;
height: 300px;
width: 300px
}
#div-5 {
background-color: pink;
border: 2px solid black;
display: inline-block;
height: 300px;
width: 300px
}
#div-6 {
background-color: violet;
border: 2px solid black;
display: inline-block;
height: 300px;
width: 300px
}
#div-8 {
background-color: lightcyan;
border: 2px solid black;
/* display: none; */
}
#span-7 {
background-color: lightgreen;
border: 2px solid black;
/* display: none; */
}
.box {
background-color: red;
border: 1px solid black;
margin: 5px;
}
.fifty-percent {
width: 50%;
}
.one-hundred-pixels {
width: 100px;
}
.parent {
width: 135px;
border: 2px solid navy;
}
.fifty-vw {
width: 50vw;
}
.twenty-five-vh {
height: 25vh;
}
.one-rem {
font-size: 1rem;
}
.one-em {
font-size: 1em;
}
.two-rem {
font-size: 2rem;
}
.two-em {
font-size: 2em;
}
/* CSS Background Properties */
.background {
min-height: 50rem;
/* content: url(https://c4.wallpaperflare.com/wallpaper/43/1003/707/anime-your-name-kimi-no-na-wa-mitsuha-miyamizu-wallpaper-preview.jpg); */
background-image: url(https://c4.wallpaperflare.com/wallpaper/43/1003/707/anime-your-name-kimi-no-na-wa-mitsuha-miyamizu-wallpaper-preview.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: 10% 40%;
background-attachment: scroll /*and fixed*/;
}
.bg-title {
color: white;
text-align: center;
font-size: 5em;
margin: 0;
line-height: 35rem;
}
.container-bg {
background-color: rgba(0, 0, 0, .5);
min-height: 100vh;
}

50
individual/frontend/s09/discussion/index.html
Unescape Escape View File

@ -4,9 +4,57 @@
<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 Styling</title>
<style>
/* External CSS */
</style>
</head>
<body>
<h1>CSS Common Styling</h1>
<h2>Display</h2>
<h3>Display: Inline vs Block</h3>
<div id="div-3">A dive can be displaed as inline</div>
<div id="div-4">A dive can be displaed as inline</div>
<span id="span-3">A span can be displaed as block</span>
<span id="span-4">A span can be displaed as block</span>
<h3>Display: Inline-Block</h3>
<span id="span-5">Span-Inline-Block-1</span>
<span id="span-6">Span-Inline-Block-2</span>
<div id="div-5">Div-Inline-Block-1</div>
<div id="div-6">Div-Inline-Block-2</div>
<h4>Display: None</h4>
<div id="div-7">Divs are block by default.</div>
<div id="div-8">Divs are block by default. Adding display:none; property in css ruleset hides an element</div>
<span id="span-7">This is the fifth span.</span>
<!-- CSS Units -->
<h3>CSS Unis</h3>
<h4>px vs %</h4>
<div class="box fifty-percent">50%</div>
<div class="box one-hundred-pixels">100px</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
<div>16px</div>
<div class="one-rem">1rem</div>
<div class="one-em">1em</div>
<div class="two-em">2rem</div>
<div class="two-em">2em</div>
<div class="two-hundred-percent">200%</div>
<!-- CSS Background Properties -->
<section class="background">
<div class="container-bg">
<h3 class="bg-title">CSS Background Properties</h3>
</div>
</section>
</body>
</html>

5
individual/frontend/s10/discussion/index.css
Unescape Escape View File

@ -0,0 +1,5 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

12
individual/frontend/s10/discussion/index.html
Unescape Escape View File

@ -0,0 +1,12 @@
<!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>
Write Preview
Loading…
Cancel
Save