Skip to content

Codespace jubilant fishstick 4j65r4xvjrgqfjwrv #77

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

Codespace jubilant fishstick 4j65r4xvjrgqfjwrv #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03cd72a
First Commit
Brian-M-S May 12, 2025
72ea213
Second Commit
Brian-M-S May 14, 2025
761caec
Initial commit
Brian-M-S May 14, 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
1 change: 1 addition & 0 deletions .learn/resets/02-hello-world/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- your code below here -->
16 changes: 16 additions & 0 deletions .learn/resets/03-Type-Radio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>
</head>

<body>
<form>
<!-- your code here -->
</form>
</body>

</html>
32 changes: 32 additions & 0 deletions .learn/resets/04-fieldsets-labels-and-styles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="#" method="get" target="_parent">
<fieldset>
<legend>Full Name</legend>
<label for="firstname">First:</label>
<input type="Text" name="firstname" placeholder="Your Name" />
<label for="lastname">Last:</label>
<input type="Text" name="lastname" placeholder="Your Last Name" />
</fieldset>
<fieldset>
<legend>Email</legend>
<input type="Text" name="email" placeholder="username@domain.com" />
</fieldset>
<fieldset>
<legend>Gender</legend>
<label for="gender">Male:</label>
<input type="radio" name="gender" value="male" />
<label for="gender">Female:</label>
<input type="radio" name="gender" value="female" />
</fieldset>
<input type="submit" value="SUBSCRIBE" />
</form>
</body>
</html>
Empty file added .learn/resets/04-fieldsets-labels-and-styles/style.css
View file
Open in desktop
Empty file.
36 changes: 36 additions & 0 deletions .learn/resets/05-HTML-five-forms/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="#" method="get" target="_parent">
<fieldset>
<legend>Full Name</legend>
<label for="firstname">First:</label>
<input type="Text" name="firstname">
<label for="lastname">Last:</label>
<input type="Text" name="lastname">
<label for="lastname">Age:</label>
<input type="Text" name="age">
</fieldset>
<fieldset>
<legend>Contact information</legend>
<input type="Text" name="email" placeholder="username@domain.com">
<input type="Text" name="phone" placeholder="Mobile phone">
<input type="Text" name="website" placeholder="Personal Website URL">
</fieldset>
<fieldset>
<legend>Gender</legend>
<label for="gender">Male:</label>
<input type="radio" name="gender" value="male">
<label for="gender">Female:</label>
<input type="radio" name="gender" value="female">
</fieldset>
<input type='submit' value='SUBSCRIBE' />
</form>
</body>
</html>
36 changes: 36 additions & 0 deletions .learn/resets/05-HTML-five-forms/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
body {
font-family: "Lato", sans-serif;
}

form {
display: inline-block;
}

fieldset {
border: none;
margin: 0;
padding: 10px 0;
font-weight: 800;
}

label {
font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"] {
border: none;
border-bottom: 1px solid black;
font-size: 16px;
}

input[type="submit"] {
cursor: pointer;
border: none;
padding: 10px;
background-color: #f65252;
color: white;
width: 100%;
}
22 changes: 22 additions & 0 deletions .learn/resets/06-Replicate-simple-form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>

<style>
/* your code here */

</style>
</head>

<body>
<form>
<!-- your code here -->

</form>
</body>

</html>
28 changes: 28 additions & 0 deletions .learn/resets/07-Style-without-id-class/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- multistep form -->
<form class="msform" method="post">
<!-- progressbar -->
<ul class="progressbar">
<li class="active">Basic Info</li>
<li>Social Media</li>
<li>Profile Image</li>
</ul>
<!-- fieldsets -->
<fieldset data-check-id="1">
<h2 class="fs-title">Sign Up Form</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input name="name" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
</form>
</body>
</html>
131 changes: 131 additions & 0 deletions .learn/resets/07-Style-without-id-class/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(64, 64, 64);
font-family: montserrat, arial, verdana;
}
/*form styles*/
.msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
.msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;

box-sizing: border-box;
width: 80%;
margin: 0 10%;

/*stacking fieldsets above each other*/
position: absolute;
}
/*inputs*/
.msform input {
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2c3e50;
font-size: 13px;
}
.msform input.error,
.msform textarea.error {
border-color: rgb(255, 99, 71);
}
/*buttons*/
.msform .action-button {
width: 100px;
background: rgb(64, 64, 64);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 2px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
transition: all 0.4s;
}
.msform .action-button:hover,
.msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255, 99, 71);
background-color: rgb(255, 99, 71);
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2c3e50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
.progressbar {
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
width: 60%;
margin: 0 auto 30px;
}
.progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 50%;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
.progressbar li:after {
content: "";
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
.progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progressbar li.active:before,
.progressbar li.active:after {
background: rgb(255, 99, 71);
color: white;
}
19 changes: 19 additions & 0 deletions .learn/resets/08-Spectacular-login-form/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" />
<link rel="stylesheet" href="style.css" />
<title>4Geeks Academy</title>
</head>
<body>
<div class="login">
<h1>Login</h1>
<form method="post" action="#">
<input type="text" name="u" placeholder="Username" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
</form>
</div>
</body>
</html>
Empty file added .learn/resets/08-Spectacular-login-form/style.css
View file
Open in desktop
Empty file.
9 changes: 9 additions & 0 deletions exercises/02-hello-world/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
<!-- your code below here -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body></body>
</html>
31 changes: 19 additions & 12 deletions exercises/03-Type-Radio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>4Geeks Academy</title>
</head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>4Geeks Academy</title>
</head>
<body>
<form>
<!-- your code here -->
<label for="Male">Male</label>
<input type="radio" name="sexo" value="Male" />
<label for="Female">Female</label>
<input type="radio" name="sexo" value="Female" />

<body>
<form>
<!-- your code here -->
</form>
</body>

</html>
<label for="Heterosexual">Heterosexual</label>
<input type="radio" name="orientación" value="Heterosexual" />
<label for="LGTBI">LGBTI</label>
<input type="radio" name="orientación" value="LGBTI" />
</form>
</body>
</html>
6 changes: 3 additions & 3 deletions exercises/04-fieldsets-labels-and-styles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
<fieldset>
<legend>Full Name</legend>
<label for="firstname">First:</label>
<input type="Text" name="firstname" placeholder="Your Name" />
<input type="text" name="firstname" placeholder="Your Name" />
<label for="lastname">Last:</label>
<input type="Text" name="lastname" placeholder="Your Last Name" />
<input type="text" name="lastname" placeholder="Your Last Name" />
</fieldset>
<fieldset>
<legend>Email</legend>
<input type="Text" name="email" placeholder="username@domain.com" />
<input type="email" name="email" placeholder="username@domain.com" />
</fieldset>
<fieldset>
<legend>Gender</legend>
Expand Down
Loading