Skip to content

Codespace fluffy adventure r4wqx9j64w9gh5xxr #66

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
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Codespace fluffy adventure r4wqx9j64w9gh5xxr #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
593e4a2
Initial commit
Bl00dyXIII May 28, 2025
2e002bf
Pending changes exported from your codespace
Bl00dyXIII May 28, 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
20 changes: 20 additions & 0 deletions .learn/resets/02-Display-none/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h2 id="myFirstH2">I need to be invisible</h2>
<h2 id="mySecondH2">I need to be invisible and gone from the layout</h2>
<ul id="myUL">
<li>My name</li>
<li>is</li>
<li>Bond...</li>
</ul>
<p>This is a <strong>paragraph</strong>, with some words more <strong>important</strong> than others</p>
<p>This is another paragraph.</p>
</body>
</html>
4 changes: 4 additions & 0 deletions .learn/resets/02-Display-none/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* your code here */
#myFirstH2{
visibility: visible;
}
14 changes: 14 additions & 0 deletions .learn/resets/03-Position-relative-vs-absolute/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="firstDiv"></div>
<div id="secondDiv" class="relativePositionExample"></div>
<h2>This will be a secondary content</h2>
</body>
</html>
23 changes: 23 additions & 0 deletions .learn/resets/03-Position-relative-vs-absolute/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
body {
background: gray;
}
#firstDiv {
background: blue;
width: 100px;
height: 100px;
}
#secondDiv {
background: yellow;
width: 100px;
height: 100px;
}
.absolutePositionExample {
position: absolute;
top: 20px;
left: 20px;
}
.relativePositionExample {
position: relative;
top: 20px;
left: 20px;
}
21 changes: 21 additions & 0 deletions .learn/resets/04-Move-image-behind-the-text/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img
id="myImage"
src="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises/blob/master/.learn/assets/cat-funny.jpeg?raw=true"
width="200"
height="140"
/>
</body>
</html>
5 changes: 5 additions & 0 deletions .learn/resets/04-Move-image-behind-the-text/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#myImage {
position: absolute;
left: 0px;
top: 0px;
}
19 changes: 19 additions & 0 deletions .learn/resets/05-Float-example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<img id="myImage" src="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises/blob/master/.learn/assets/jim-carrie.png?raw=true" />
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
cumque nihil impedit.
</p>
</body>
</html>
3 changes: 3 additions & 0 deletions .learn/resets/05-Float-example/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#myImage{
max-width: 250px;
}
30 changes: 30 additions & 0 deletions .learn/resets/06-center-content/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<h1>The learning essay</h1>
<h2>3 reasons you know you are learning</h2>
<p>We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.</p>
<ol>
<li>You are able to complete the exercises by yourself.</li>
<li>You understand what the teacher is talking about.</li>
<li>You are able to have conversations about the topic.</li>
</ol>
<h2>3 reasons you love what you are learning</h2>
<ul>
<li>Time passes fast.</li>
<li>You are anxious to finish this exercise and start the next one.</li>
<li>It's 12am and you don't want to go to sleep.</li>
</ul>
<p>If you can't sleep, what's better than watching videos of cats? <a
href="https://www.youtube.com/shorts/k931WvWU0Vg">click here</a></p>
</body>

</html>
3 changes: 3 additions & 0 deletions .learn/resets/06-center-content/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body{
background:blue;
}
19 changes: 19 additions & 0 deletions .learn/resets/07-Sidebar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div id="wrapper">
<div id="sidebar">This is my sidebar.</div>
<div id="content">
This is my content, This is my content, This is my content, This is my content, This is my content, This is my content, This is my
content,
</div>
</div>
</body>
</html>
11 changes: 11 additions & 0 deletions .learn/resets/07-Sidebar/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#wrapper {
background: grey;
}

#sidebar {
background: blue;
}

#content {
background: yellow;
}
17 changes: 17 additions & 0 deletions .learn/resets/08-Split-Screen-in-three/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div id="wrapper">
<div id="sectionA">A</div>
<div id="sectionB">B</div>
<div id="sectionC">C</div>
</div>
</body>
</html>
12 changes: 12 additions & 0 deletions .learn/resets/08-Split-Screen-in-three/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body {
margin: 0;
}
#sectionA {
background: blue;
}
#sectionB {
background: red;
}
#sectionC {
background: green;
}
37 changes: 37 additions & 0 deletions .learn/resets/09-Beautify/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div>
<div id="div1">
<strong>The Menu</strong>
</div>
<div id="div2">
<strong><i>The Content</i></strong>
</div>
<div id="div3">
<div>
<strong><i>The Other Stuff</i></strong>
</div>

<div id="div4">
<strong>Second Content</strong>
</div>
<div id="div5">
<strong><i>Second Content</i></strong>
</div>
<div id="div3">
<div>
<strong><i>The Extra Stuff</i></strong>
</div>
</div>
</div>
</div>
</body>
</html>
29 changes: 29 additions & 0 deletions .learn/resets/09-Beautify/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
#div1 {
background-color: red;
width: 150px;
float: left;
height: 100px;
padding: 100px;
text-align: center;
border-radius: 50px;
}
#div2 {
background-color: blue;
height: 100px;
width: 150px;
padding: 25px;
color: white;
text-align: center;
overflow: hidden;
border-radius: 25px;
}
#div3 {
background-color: yellow;
height: 100px;
width: 150px;
padding: 25px;
color: white;
text-align: center;
overflow: hidden;
border-radius: 25px;
}
15 changes: 15 additions & 0 deletions .learn/resets/09.1-Before-and-After/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<h1>Hello World</h1>
</body>

</html>
12 changes: 12 additions & 0 deletions .learn/resets/09.1-Before-and-After/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
h1::before {
content: " ";
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right:45px solid blue;
height: 0px;
margin-bottom: -35px;
margin-right: 20px;
display: inline-block;
}


13 changes: 13 additions & 0 deletions .learn/resets/09.2-Calendar-icon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<p class="calendar">7 <em></em></p>
</body>
</html>
47 changes: 47 additions & 0 deletions .learn/resets/09.2-Calendar-icon/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.calendar {
top: 0em;
left: 1em;
padding-top: 5px;
width: 80px;
background: #ededef;
font-size: 54px;
text-align: center;
color: #000;

border-radius: 3px;
position: absolute;
}

.calendar em {
display: block;
font-size: 15px;
color: #fff;
background: #04599a;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

.calendar::before, .calendar:after{
content:'';
float:left;
width:8px;
height:8px;
background:#111;
z-index:1;
border-radius:10px;
box-shadow:0 1px 1px #fff;
}
.calendar::before{left:11px;}
.calendar::after{right:11px;}

.calendar em::before, .calendar em::after{
content:'';
float: left;
margin: 10px;
width:4px;
height:14px;
background:blue;
z-index:2;
}
.calendar em::before{left:13px;}
.calendar em::after{right:13px;}
20 changes: 20 additions & 0 deletions .learn/resets/10-static-layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div class="wrapper">
<h1>Static Layout Example</h1>
<header>HEADER</header>
<div class="secondWrapper">
<nav>NAV</nav>
<section>SECTION</section>
</div>
</div>
</body>
</html>
Loading