Last active
September 2, 2017 13:31
-
-
Save gringogidget/59ecb6742903763271d0082e13e74d25 to your computer and use it in GitHub Desktop.
(FED Bootcamp - Udemy)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>krustuna</p> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <img src="https://unsplash.it/500/500/?random"> | |
| <style> | |
| p { | |
| font-family: raleway; | |
| margin-left: 1.66%; | |
| font-size: 23px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| width: 30%; | |
| border-bottom: 4px solid black; | |
| padding-bottom: 16px; | |
| } | |
| img { | |
| width: 30%; | |
| float: left; | |
| margin: 1.66%; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Selectors Exercise</title> | |
| <link rel="stylesheet" type="text/css" href="selectors.css"> | |
| </head> | |
| <body> | |
| <h1>Selectors Exercise</h1> | |
| <p>PARAGRAPH NOT INSIDE A DIV</p> | |
| <!--first div--> | |
| <div> | |
| <p class="hello">I am a paragraph with a class</p> | |
| <p id="special">I am a paragraph with an ID</p> | |
| <h2>I am an awesome h2</h2> | |
| <p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever.</p> | |
| </div> | |
| <!--second div--> | |
| <div> | |
| <h2>Things I need to do</h2> | |
| <ul> | |
| <li>Walk Dog <input type="checkbox" checked> </li> | |
| <li>Feed Dog <input type="checkbox" checked> </li> | |
| <li>Wash Dog <input type="checkbox"></li> | |
| </ul> | |
| </div> | |
| <!--third div--> | |
| <div> | |
| <h2>I am another awesome h2</h2> | |
| <p>Cardigan Tumblr mlkshk, fap tilde 3 wolf moon Portland. Heirloom health goth taxidermy blog lo-fi selfies, post-ironic master cleanse fingerstache normcore. Kickstarter plaid twee, bespoke single-origin coffee sustainable lo-fi vinyl Pinterest pork belly <em>cronut skateboard</em> 3 wolf moon. Normcore single-origin coffee salvia, bespoke Austin swag Godard before they sold out kogi disrupt locavore. Lumbersexual Shoreditch Vice, artisan American Apparel master cleanse yr salvia vegan. Bespoke letterpress heirloom kale chips deep v four loko. Lomo sustainable put a bird on it trust fund post-ironic</p> | |
| <p>I'm the second paragraph inside this div!</p> | |
| </div> | |
| <p>PARAGRAPH NOT INSIDE A DIV</p> | |
| <div> | |
| <h2>A less awesome h2</h2> | |
| <p>Roof party yr hella synth, Wes Anderson narwhal four dollar toast before they sold out retro lo-fi. Austin iPhone pop-up farm-to-table, PBR&B McSweeney's ennui messenger bag distillery before they sold out Portland wolf fanny pack YOLO. Locavore slow-carb trust fund farm-to-table. Pinterest gastropub lo-fi, McSweeney's trust fund VHS shabby chic ugh Austin twee. Messenger bag banjo lumbersexual, whatever 3 wolf moon XOXO normcore. Pug fanny pack 3 wolf moon, typewriter organic chia mustache scenester seitan shabby chic Blue Bottle salvia ugh iPhone. Fanny pack Williamsburg direct trade, cold-pressed disrupt flannel listicle health goth asymmetrical freegan mixtape street art pour-over whatever</p> | |
| <p>One last paragraph here!</p> | |
| <a href="http://www.facebook.com">I am a link to facebook</a> | |
| <a href="http://www.facebook.com">I am another link to facebook</a> | |
| <br> | |
| <input type="text" name="name" /><label> Name</label><br/> | |
| <input type="password" name="password" /><label> Password</label><br/> | |
| </div> | |
| <p>PARAGRAPH NOT INSIDE A DIV</p> | |
| <style> | |
| /* Style the HTML elements according to the following instructions. | |
| DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS! | |
| /* Give the <body> element a background of #bdc3c7*/ | |
| body { | |
| background-color: #bdc3c7; | |
| } | |
| /* Make the <h1> element #9b59b6*/ | |
| h1 { | |
| color: #9b59b6; | |
| } | |
| /* Make all <h2> elements orange */ | |
| h2 { | |
| color: orange; | |
| } | |
| /* Make all <li> elements blue(pick your own hexadecimal blue)*/ | |
| li { | |
| color: #5499C7; | |
| } | |
| /*Change the background on every paragraph to be yellow*/ | |
| p { | |
| background-color: yellow; | |
| } | |
| /*Make all inputs have a 3px red border*/ | |
| input { | |
| border: 3px solid red; | |
| } | |
| /* Give everything with the class 'hello' a white background*/ | |
| .hello { | |
| background: white; | |
| } | |
| /* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/ | |
| #special { | |
| border: 2px solid blue; | |
| } | |
| /*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/ | |
| div p { | |
| font-size: 25px; | |
| } | |
| /*Make only inputs with type 'text' have a gray background*/ | |
| input[type=text], [type=password] { | |
| background-color: gray; | |
| } | |
| /* Give both <p>'s inside the 3rd <div> a pink background*/ | |
| p:nth-of-type(3){ | |
| background: pink; | |
| } | |
| /* Give the 2nd <p> inside the 3rd <div> a 5px white border*/ | |
| div:nth-of-type(3) p:nth-of-type(2) { | |
| border: solid white 5px; | |
| } | |
| /* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/ | |
| div:nth-of-type(3) em { | |
| background-color: white; | |
| font-size: 20px; | |
| } | |
| /*BONUS CHALLENGES*/ | |
| /*You may need to research some other selectors and properties*/ | |
| /*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/ | |
| input[type=checkbox]:checked { | |
| margin-left: 50px; | |
| } | |
| /* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/ | |
| label { | |
| text-transform: uppercase; | |
| } | |
| /*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/ | |
| #special::first-letter { | |
| color: green; | |
| font-size: 100; | |
| } | |
| /*Make the <h1> element's color change to blue when hovered over */ | |
| h1:hover { | |
| color: blue; | |
| } | |
| /*Make the <a> element's that have been visited gray */ | |
| a:visited { | |
| color: gray; | |
| } | |
| </style> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My Blog</title> | |
| <link rel="stylesheet" type="text/css" href="blog.css"> | |
| </head> | |
| <body> | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Source+Code+Pro:400,700' rel='stylesheet' type='text/css'> | |
| <div class="post"> | |
| <div class="date">November 23 2015</div> | |
| <h2>This Is My First Article</h2> | |
| <p class="quote"> | |
| Bacon ipsum dolor amet capicola strip steak landjaeger, biltong spare ribs rump cow ground round andouille sirloin pork. Short ribs pig prosciutto swine. Flank turducken turkey rump, leberkas shoulder bresaola ham hock tail drumstick corned beef. Venison pork chop beef jowl short ribs. | |
| </p> | |
| <p>Bresaola short ribs pastrami, beef ribs spare ribs kielbasa ham tongue kevin landjaeger chicken ball tip. Pork chop beef kevin strip steak, chicken pork belly pastrami ham hock flank shoulder chuck turkey ribeye andouille ball tip. Leberkas ham ham hock pork loin. Filet mignon bacon pancetta leberkas turducken fatback tongue frankfurter jowl. Shoulder tenderloin chicken shank bacon shankle sirloin.</p> | |
| <p>Pork pig pork loin prosciutto meatball turkey beef ribs ground round. Pork belly salami shank pork chop turducken ribeye swine shoulder tri-tip fatback cupim short loin chuck strip steak. Rump pork chop t-bone.</p> | |
| <hr> | |
| </div> | |
| <!-- <hr> --> | |
| <div class="post"> | |
| <div class="date">December 11 2015</div> | |
| <h2>This Is Another Article</h2> | |
| <p class="quote"> | |
| Bacon ipsum dolor amet capicola strip steak landjaeger, biltong spare ribs rump cow ground round andouille sirloin pork. Short ribs pig prosciutto swine. Flank turducken turkey rump, leberkas shoulder bresaola ham hock tail drumstick corned beef. Venison pork chop beef jowl short ribs. | |
| </p> | |
| <p>Shankle beef ribs tongue strip steak flank landjaeger capicola hamburger chuck pancetta kevin. Sirloin landjaeger chicken, bresaola brisket swine short ribs turkey short loin ball tip porchetta ham hock. Capicola frankfurter jowl short loin. Kevin flank hamburger, beef venison shankle short loin bresaola frankfurter</p> | |
| <p>Bresaola short ribs pastrami, beef ribs spare ribs kielbasa ham tongue kevin landjaeger chicken ball tip. Pork chop beef kevin strip steak, chicken pork belly pastrami ham hock flank shoulder chuck turkey ribeye andouille ball tip. Leberkas ham ham hock pork loin. Filet mignon bacon pancetta leberkas turducken fatback tongue frankfurter jowl. Shoulder tenderloin chicken shank bacon shankle sirloin.</p> | |
| </div> | |
| </body> | |
| </html> | |
| <style> | |
| @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); | |
| body { | |
| width: 80%; | |
| border: 20px solid #bdc3c7; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| padding: 20px; | |
| margin: 20px auto; | |
| max-width: 700px; | |
| } | |
| .post { | |
| margin-bottom: 20px; | |
| } | |
| .date { | |
| color: #3498db; | |
| letter-spacing: 0.2rem; | |
| text-transform: uppercase; | |
| } | |
| .quote{ | |
| border-left: 5px solid #bdc3c7; | |
| padding-left: 5px; | |
| } | |
| h2 { | |
| font-size: 2.0rem; | |
| font-weight: bold; | |
| color: #2c3e50; | |
| } | |
| hr{ | |
| border: 0; | |
| height: 0; | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Register</h1> | |
| <form> | |
| <label for="first">First Name: </label> | |
| <input type="text" placeholder="First Name" id="first" required> | |
| <label for="last">Last Name: </label> | |
| <input type="text" placeholder="Last Name" id="last" required> | |
| <br><br> | |
| <label for "male">Male:</label> | |
| <input type="radio" id="male" value="male"> | |
| <label for "female">Female:</label> | |
| <input type="radio" id="female" value="female"> | |
| <label for "other">Other:</label> | |
| <input type="radio" id="other" value="other"> | |
| <br><br> | |
| <label>Email: | |
| <input type="email" id="email" placeholder="your email" required></input> | |
| Password: </label> | |
| <label> | |
| <input type="password" id="userPassword" minlength="5" | |
| maxlength="10" title="must be between 5 to 10 characters" required></input> | |
| <!--or you can do <input pattern=".{5,10}" required></input>--> | |
| </label> | |
| <br><br> | |
| <label>Birthday: | |
| <select id="month"> | |
| <option value="J">January</option> | |
| <option value="F">February</option> | |
| <option value="M">March</option> | |
| <option value="A">April</option> | |
| </select> | |
| <select id="day"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| </select> | |
| <select id="year"> | |
| <option value="17">2017</option> | |
| <option value="18">2018</option> | |
| <option value="19">2019</option> | |
| <option value="wtf">4000</option> | |
| </select> | |
| </label> | |
| <label> | |
| <p>I agree to the terms and conditions | |
| <input type="checkbox" name="checkbox "required></input></p> | |
| </label> | |
| <br><br> | |
| <button>Submit</button> | |
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector { | |
| property: value; | |
| } | |
| / *Element* / | |
| li {} | |
| / *Class */ | |
| .hello {} | |
| /* id */ | |
| #sup {} | |
| /* Star - Everything on the page */ | |
| * {} | |
| /* Descendant Selector - To isolate a nested element */ | |
| ul li a {} | |
| /* Adjacent Selector - What comes directly after the element */ | |
| h4 + ul {} | |
| /* Attribute Selector - will select every attribute */ | |
| a[href="http://www.google.com"] {} | |
| input[type="checkbox"] {} | |
| /* nth of type - select one thing on a page but I think this is dumb tbh */ | |
| ul:nth-of-type(3){} | |
| ul:nth-of-type(even){} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p> TIC TAC TOE </p> | |
| <table> | |
| <tr> | |
| <td></td> | |
| <td class="vertical"></td> | |
| <td id="vertical"></td> | |
| </tr> | |
| <tr> | |
| <td class="horizontal"></td> | |
| <td class="vertical horizontal"></td> | |
| <td class="horizontal"></td> | |
| </tr> | |
| <tr> | |
| <td></td> | |
| <td class="vertical"></td> | |
| <td></td> | |
| </tr> | |
| </table> | |
| <style> | |
| p { | |
| text-align: center; | |
| } | |
| table { | |
| margin: 0 auto; | |
| } | |
| td{ | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .vertical { | |
| border-left: 1px solid black; | |
| border-right: 1px solid black; | |
| } | |
| .horizontal { | |
| border-top: 1px solid black; | |
| border-bottom: 1px solid black; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment