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

completed lab #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

completed lab #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
86 changes: 86 additions & 0 deletions fellow-submissions/peter-rose/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container-wrapper">
<main class="container">
<header>
<h4>Quiz'n You, my guy</h4>
</header>

<section class="q1">
<h4>Info Please</h4>
<div style="float:left">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>

<div style="float:left;">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotta get rid of this.

  1. No reason to have inline styling here.
  2. No use of floats for layout.

<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>


</section>



<section class="q2">
<div>
<h4> Name this anime;<p>This anime is about some dude forcing a kid to eat his hair.</p></h4>

</div>
<input type="radio" name="" value="always">Made In Abyss
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Each of these radio inputs needs a label. Example...

<input type="radio" name="anime" value="abyss" id="abyss">
<label for="abyss">Made In Abyss</label>

Having appropriate values for name and value are super important here.

<input type="radio" name="" value="never">Vinland SAGA
<input type="radio" name="" value="costChange">My Hero Acadamia
</section>

<section class="q3">
<h5>Tell us about yaself</h5>

<textarea placeholder="'Hi, my name is...'.........You get the idea"></textarea>

</section>

<section class="q4">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're using <section>s for grouping and <div>s for headers. I want you to use <fieldset>s and <legend>s instead.

<h4>Tryna Join The Club ?</h4>
<input type="checkbox" id="yes" name="Yes"
checked>
<label style="margin-right: 10px;" for="post">Yes</label>


<input type="checkbox" id="no" name="No"
checked>
<label for="post">No</label>

</section>
<section class="q5">
<text style="display:block;">This my last question. Whats your sign ?</text>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get rid of this inline styling here.


<select>
<option value="Aries">Aries</option>
<option value="Leo">Leo</option>
<option value="Sagittarius">Sagittarius</option>
<option value="Taurus">Taurus</option>
<option value="Virgo">Virgo</option>
<option value="Capricorn">Capricorn</option>
<option value="Gemini">Gemini</option>
<option value="Libra">Libra</option>
<option value="Aquarius">Aquarius</option>
<option value="Cancer">Cancer</option>
<option value="Scorpio">Scorpio</option>
<option value="Pisces">Pisces</option>
</select>

</section>
<button>Submit</button>
</main>
</div>
</body>
</html>
140 changes: 140 additions & 0 deletions fellow-submissions/peter-rose/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

body {
background-color: #040B1A;
}

.container-wrapper {
display: flex;
align-items: center;
margin: auto;
max-width: 750px;
padding: 8px;
box-sizing: border-box;
background: rgb(58,76,180);
background: linear-gradient(90deg, rgba(58,76,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,69,176,1) 100%);
background-clip: padding-box;
/* important Do not Delete */
border: solid 5px transparent;
/* important Do not Delete */
border-radius: 25px;
}

.container {
height: 670px;
width: 100%;
margin: 0 auto;
background-color: grey;
border-radius: 25px;
margin:0px;
border: 1px solid yellow;
}

body > div > main > header > h4 {
text-align: center;
height: 40px;
width: 100%;
font-family: 'Raleway', sans-serif;
background-color: #0E275F;
color: white;
margin: 0px;
padding: 10px 0px 0px 0px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}


section {
height: 100px;
width: 100%;
background-color: blue;
}

section h5 {
margin: 0px;
padding: 10px;
}

.q1 {

text-align: center;
background-color:#808080;
color: white;
font-family: 'Raleway', sans-serif;
}

#name, #email {
display:block;
margin-right: 0px;
}

.q1 div {
margin:0px 0px 0px 210px;
}
.q1 div + div {
margin:0px 0px 0px 10px;
}



.q1 h4 {
margin:5px 0px 10px 0px;
}
/*font-family: 'Rubik', sans-serif;*/

.q2 {
text-align: center;
background-color:#eeeeee;
color: black;
font-family: 'Raleway', sans-serif;
}

.q2 h4,p {
margin:5px 0px 15px 0px;
padding:0px;
}


.q3 {
text-align: center;
background-color:#808080;
color: white;
font-family: 'Raleway', sans-serif;
}

body > div > main > section.q3 > textarea {
max-height: 55px;
max-width: 500px;
width: 300px;
height: 45px;
}


.q4 {
text-align: center;
background-color:#eeeeee;
color: black;
font-family: 'Raleway', sans-serif;
}

.q5 {
text-align: center;
background-color:#808080;
color: white;
font-family: 'Raleway', sans-serif;
}


button {
height: 35px;
text-align: center;
margin: 0px 275px 0px 275px;
border-radius: 25px;
border: 2px solid yellow;
color: white;
width: 200px;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}