/* Media queries
—————————————————————————-*/
@media screen and (max-width: 960px)
{
header h1,header p { width: 760px; }
header { padding: .75em 0 1.2em; }
footer { margin-top: 4em; padding: 0;}
footer ul { width: 740px; }
footer li,footer li.copyright { float: none; margin: .75em 0;}
}
@media screen and (max-width: 768px)
{
header h1,header p {
width: 90%;
min-width: 300px;
}
header { padding-bottom: .75em; }
header h1 { font-size: 2.4em; }
footer { margin-top: 3em; }
footer ul { width: 300px; }
}

 

 

Writing the Markup
The home page consists of two forms, so let’s start with the simpler of the two to get the basics in place.
The “join a room” form has a headline, a short blurb of copy, an input with a label, and a submit button. Add the
following markup to index.html, in between the <header> and <footer> tags, to create this form:
<section>
<form id=”attending”>
<h2>Attending?</h2>
<p>Join a room using its ID.</p>
<label>
What is the room’s ID?
<input type=”text” name=”room_id” />
</label>
<input type=”submit” value=”Join This Room” />
</form><!–/#attending–>
</section>

<form id=”presenting”>
<h2>Presenting?</h2>
<p>Create a room to start your Q&amp;A session.</p>
<label>
Tell us your name (so attendees know who you are).
<input type=”text” name=”presenter-name” />
</label>
<label>
Tell us your email (so attendees can get in touch with you).
<input type=”email” name=”presenter-email” />
</label>
<label>
What is your session called?
<input type=”text” name=”session-name” />
</label>
<input type=”submit” value=”Create Your Room” />
</form><!–/#presenting–>