Skip to content
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

Index web pet #9

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

Index web pet #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
68fb574
GitHub Classroom Feedback
github-classroom[bot] Apr 30, 2024
f9077da
Setting up GitHub Classroom Feedback
github-classroom[bot] Apr 30, 2024
3abacc4
feat: ex-1-create commit
Sunbright53 Apr 30, 2024
9284825
style:adding style/feat:full-code
Sunbright53 Apr 30, 2024
a5cd728
merge
Sunbright53 Apr 30, 2024
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
Empty file added .github/.keep
View file
Open in desktop
Empty file.
121 changes: 111 additions & 10 deletions ex-1-pricing-grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Flexbox Exercise 1: Pricing Grid</title>
</head>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Flexbox Exercise 1: Pricing Grid</title>
</head>
<<<<<<< HEAD
<div class="box-select">
<div class="animal">
<div class="type-cat">
<h1 class="animal-t">CAT</h1>
<p id="wording-space">Common, yet regarded by many as the worst house.</p>
<p>Scartches everything</p>
<hr>
<p>Easily lost for days</p>
<hr>
<p>Kind of a bummer</p>
<h2>free</h2>
<button>🐱Really?</button>
</div>
<div class="type-dog">
<h1 class="animal-t">DOG</h1>
<p id="wording-space">Loving, gentle and caring. Dogs are the best house pet to have and
will increase happiness ten fold</p>
<hr>
<p>Super Fun</p>
<hr>
<p>Friends love them</p>
<hr>
<p>Plays games</p>
<hr>
<p>No a cat</p>
<h2>$90</h2>
<button>🐶Best Deal?</button>
</div>
<div class="type-fish">
<h1 class="animal-t">FISH</h1>
<p id="wording-space">Cheap n' easy.</p>
<hr>
<p>Eats flakes</p>
<hr>
<p>Cop out</p>
<hr>
<p>Replaceable</p>
<h2>$3</h2>
<button>🐟</button>

</div>
</div>
</div>

<body>
<!-- Start coding here -->
</body>
</html>
=======
<body style="font-family: sans-serif">
<div class="container">
<div class="boxCenter">
<div class="box box1">
<h1 class="animal">Cat</h1>
<div class="content">
<div class="summary">
Common, yet regard by many as the worst house pet.
</div>
<p>Scratch everything</p>
<hr />
<p>Easily lost for days</p>
<hr />
<p>Kind of bummer</p>
<hr />
<h1 class="price">free</h1>
<button>🐈 Really?</button>
</div>
</div>

</html>
<div class="box box2">
<h1 class="animal">Dog</h1>
<div class="content">
<div class="summary">
Loving, gentle and caring. Dogs are the best house pet to have and
will increase happiness ten fold.
</div>
<p>Super fun</p>
<hr />
<p>Friends love them</p>
<hr />
<p>Play games</p>
<hr />
<p>Not a cat</p>
<hr />
<h1 class="price">$90</h1>
<button>🐶Best Deal →</button>
</div>
</div>

<div class="box box3">
<h1 class="animal">Fish</h1>
<div class="content">
<div class="summary">Cheap n' easy.</div>
<p>Eat flakes</p>
<hr />
<p>Cop out</p>
<hr />
<p>Replaceable</p>
<hr />
<h1 class="price">$3</h1>
<button>🐟</button>
</div>
</div>
</div>
</div>
</body>
</html>
>>>>>>> 7b3e6be68b40e6d1e3583931c90bc725e104324d
221 changes: 220 additions & 1 deletion ex-1-pricing-grid/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,220 @@
/* Start coding here */
<<<<<<< HEAD
* {
margin: 0;
padding: 0;
}
.box-select {
width: 100vw;
height: 100vw;
background-image: linear-gradient(50deg, rgb(255, 0, 251), rgb(0, 208, 255));
display: flex;
gap: 200px;
justify-content: space-evenly;
align-items: center;
}

.animal {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

.type-cat {
border-radius: 20px;
margin: 50px;
padding: 0;
text-align: center;
display: block;
box-sizing: border-box;
flex-basis: 30%;
width: 30rem;
height: 40rem;
background-color: rgba(215, 211, 162, 0.225);
}

.type-dog {
border-radius: 10px;
margin: 0px 0px 0px 0px;
padding: 0;
text-align: center;
text-shadow: 40px;
flex-basis: 35%;
display: block;
box-sizing: border-box;
width: 40rem;
height: 50rem;
background-color: rgba(215, 211, 162, 0.225);
}

.type-fish {
border-radius: 10px;
margin: 50px;
padding: 0;
text-align: center;
text-shadow: 40px;
flex-basis: 30%;
display: block;
box-sizing: border-box;
width: 30rem;
height: 40rem;
background-color: rgba(215, 211, 162, 0.225);
}

.animal-t {
margin: 60px 0px 50px 0px;
font-size: 50px;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
color: white;
}

.type-cat p {
margin: 0px 35px 5px 35px;
font-size: 28px;
}

.type-dog p {
margin: 0px 35px 5px 35px;
font-size: 28px;
}

.type-fish p {
margin: 0px 35px 5px 35px;
font-size: 28px;
}

.type-cat hr {
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
width: 350px;
}

#wording-space {
margin-bottom: 30px;
}

.type-cat h2 {
font-size: 80px;
margin: 10px;
font-weight: 700;
}

.type-cat button {
border-radius: 5px;
width: 285px;
height: 70px;
font-size: 30px;
background-color: yellow;
}

.type-dog hr {
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
width: 350px;
}

.type-dog h2 {
font-size: 80px;
margin: 10px;
font-weight: 700;
}

.type-dog button {
border-radius: 5px;
width: 285px;
height: 70px;
font-size: 30px;
background-color: yellow;
}

.type-fish hr {
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
width: 350px;
}

.type-fish h2 {
font-size: 80px;
margin: 10px;
font-weight: 700;
}

.type-fish button {
border-radius: 5px;
width: 285px;
height: 70px;
font-size: 30px;
background-color: yellow;
}
=======
body {
margin: 0px;
}

.animal {
color: aliceblue;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.container {
display: flex;
justify-content: center;
height: 100vh;
width: 100vw;
background: linear-gradient(90deg, hsl(330, 70%, 75%), hsl(240, 63%, 66%));
}

.boxCenter {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
gap: 2%;
}

.box {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background: HSLA(0, 50%, 100%, 0.2);
width: 100%;
height: auto;
margin: 2%;
font-size: 1.25rem;
border-radius: 10px;
}

.summary {
padding-bottom: 20px;
}
.box1 {
height: 70%;
}
.box2 {
height: 80%;
}
.box3 {
height: 65%;
}

hr {
border: none;
border-top: 1px solid HSLA(0, 50%, 10%, 0.2);
}
.content {
text-align: center;
padding: 0 25px 0 25px;
}

button {
background-color: yellow;
width: 100%;
height: 10%;
border: none;
border-radius: 5px;
font-size: 1.25rem;
}

>>>>>>> 7b3e6be68b40e6d1e3583931c90bc725e104324d
32 changes: 19 additions & 13 deletions ex2-holygrail-layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Flexbox Exercise 2: Holygrail Layout</title>
</head>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Flexbox Exercise 2: Holygrail Layout</title>
</head>

<body>
<!-- Start coding here -->
</body>

</html>
<body>
<div class="container">
<header>Header</header>
<div class="mainSection">
<div>Navigation</div>
<div>Content</div>
<div>Advertisement</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
Loading