Skip to content

Feature/issue 3 cmp customize my website #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Crateeeee wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Feature/issue 3 cmp customize my website #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
430e250
rwd css
Crateeeee Dec 2, 2025
94b1468
css rwd
Crateeeee Dec 2, 2025
fa44316
css rwd
Crateeeee Dec 2, 2025
7a7de40
RWD (DIY)
Crateeeee Dec 2, 2025
6b236dd
javascript
Crateeeee Dec 11, 2025
e9b70a1
Javascript update
Crateeeee Dec 11, 2025
b12a575
Liveshare duo
Crateeeee Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions introduction/css/rwd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
* { box-sizing: border-box;
}

body {
font-family: "Lucida Sans", sans-serif;
font-size: 17px;
}

.grid-container {
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'facts'
'footer';
background-color: white;
gap: 10px;
}

.header {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}

.header > h1 {
font-size: 40px;
}

.menu {
grid-area: menu;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}

.menu li:hover {
background-color: #0099cc;
}

.content {
grid-area: main;
}

.content > h1 {
font-size: 30px;
margin-bottom: 7px;
}

.content > p {
margin-bottom: 7px;
}

.facts {
grid-area: facts;
border: 1px solid #0099cc;
background-color: beige;
padding: 10px;
}

.facts > h2 {
font-size: 20px;
}

.facts li {
margin-bottom: 5px;
}

.footer {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}

@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}

img {
width: 100%;
height: auto;
}

.wow {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.wow {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.wow {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.wow {background: blue;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.wow {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.wow {background: pink;}
}

}
86 changes: 83 additions & 3 deletions introduction/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/mystyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/rwd.css?version=0.4">
<title>WEBPROG IT-241</title>
</head>
<body>
Expand Down Expand Up @@ -43,9 +44,88 @@ <h2>Goals</h2>
</p>
Picture Gallery<br>
<img src="https://www.nickishomemadecrafts.com/wp-content/uploads/2025/04/Cat-Crochet-Pattern-square.jpg" alt="Crochet Cat" width="500" height="600">
</p>


<div class="grid-container">

<div class="header"><h1>Chania</h1></div>

<div class="menu">
<ul>
<li>About Me</li>
<li>Education</li>
<li>Achievements</li>
<li>IT Experience</li>
<li>Hobbies and Interests</li>
<li>Goals</li>
</ul>
</div>

<div class="content">
<h1>Hello Everyone!</h1>
<p>This is a test for RWD</p>
<p>This is also another test and I'm expanding this sentence into more so you can see the how RWD works</p>
<p>I'm hungry and I want to eat</p>
<p>Here is chicken adobo:</p>
<img src="https://deliciouslyrushed.com/wp-content/uploads/2023/11/chicken-adobo-feature-image.jpg" alt="Chicken Adobo" width="300" height="300">
</div>

<div class="facts">
<h2>Chicken Adobo Recipe:</h2>
<ul>
<li>2 lbs chicken thighs</li>
<li>1/2 cup soy sauce</li>
<li>1/2 cup white vinegar</li>
<li>1 cup water</li>
<li>6 cloves garlic, crushed</li>
<li>2 bay leaves</li>
<li>1 teaspoon black peppercorns</li>
<li>1 tablespoon sugar</li>
<li>Combine all in a pot, boil, then simmer covered for 30 minutes</li>
<li>Uncover and simmer 10 more minutes to thicken sauce</li>
<li>Serve over rice</li>
</ul>
</div>

<div class="footer"><p>Yummy!.</p></div>

</div>

<h1>This will change colors!</h1>
<p>Try resizing it</p>


<div class="wow">
<h2>Hotdog</h2>
<p>yum.</p>
</div>

<div class="wow">
<h2>Cheesedog</h2>
<p>yum.</p>
</div>

<div class="wow">
<h2>Hamburger</h2>
<p>yum.</p>
</div>

<div class="""wow"></div>
<h2>testing with live share duo</h2>
<p>Names: Crate Marshall Pinlac & Dylan Villanueva</p>


</div>


<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="js/myScript.js"></script>
</body>
</html>
Loading