<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!-- formatted using CSS examples from Week 8 Lecture 2 div elements right before the footer for grid formatting examples adapted from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout adapted by: Sharon Tuttle last modified: 2024-03-06 you can run this using the URL: https://nrs-projects.humboldt.edu/~st10/s24cs328/328lect08-2/328lect08-2-play.html --> <head> <title> 328lect08-2-play </title> <meta charset="utf-8" /> <link href="http://nrs-projects.humboldt.edu/~st10/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lect08-2.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> More CSS Playing!</h1> <p> We are playing with CSS some more today! </p> <p> What happens if the paragraph is wide enough yadda yadda yadda yadda yadda yadda yaddayadda yadda yadda yadda yadda yadda yadda yadda yadda </p> <h2> a form to center: </h2> <form action="https://nrs-projects.humboldt.edu/~st10" method="get"> <fieldset> <legend> Please try this </legend> <label for="lname"> Last Name: </label> <input type="text" name="lastName" id="lname" /> <div class="submit-part"> <input type="submit" name="looky" value="Submit" /> </div> </fieldset> </form> <h2> Trying out flexbox layout </h2> <div class="flex-demo"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> <h2> Trying out grid layout - one approach </h2> <div class="grid-demo-1"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> <h2> Trying out grid layout - another approach </h2> <div class="grid-demo-2"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> <h2> post-class tests </h2> <div class="post-class-tests"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> <footer> <hr /> <p> Validate by pasting .xhtml copy's URL into<br /> <a href="https://validator.w3.org/nu"> https://validator.w3.org/nu </a> or <a href="https://html5.validator.nu/"> https://html5.validator.nu/ </a> </p> </footer> </body> </html>