Alena's Static-Site #25
+9,773
−0
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>About</title> | ||
| <link rel="stylesheet" href="../stylesheets/normalize.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles_about.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header-and-footer"> | ||
| <a id="home" href="index.html"> Home </a> | ||
|
There was a problem hiding this comment. It's more semantic to not include spaces on either end of the text in between the html tags ... Ex: Home |
||
| <nav> | ||
| <ul> | ||
| <li><a href="about.html"> About </a></li> | ||
| <li><a href="portfolio.html"> Portfolio </a></li> | ||
| <li><a href="blog.html"> Blog </a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
|
There was a problem hiding this comment. I like your design decision to break up where you came from, where you are and where your going 👍 |
||
| <section class="background" id="prague"> | ||
|
There was a problem hiding this comment. since the article and section here are both part of the same where I came from part of the page. How do you think you could show that semantically using html? |
||
| <h1 class="banner" id="prague-banner"> Where I come from </h1> | ||
| </section> | ||
| <article> | ||
| <p class="text"> | ||
| Lorizzle ipsum dolor sizzle amizzle, consectetuer adipiscing elit. Nullam rizzle velizzle, izzle volutpizzle, bizzle quizzle, gravida vizzle, gangster. Pellentesque eget tellivizzle. Sizzle erizzle. Shizznit at dolor dapibizzle turpizzle tempizzle tempor. Maurizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle break it down ghetto turpizzle. Doggy izzle tortor. Pellentesque eleifend rhoncus cool. In hac habitasse boofron dictumst. Donec the bizzle. Ghetto tellus funky fresh, pretizzle eu, that's the shizzle gizzle, eleifend sure, nunc. Gangster suscipizzle. Crunk nizzle doggy mammasay mammasa mamma oo sa dizzle. | ||
| </p> | ||
| </article> | ||
| <section class="background" id="seattle"> | ||
| <h1 class="banner" id="seattle-banner"> Where I am now </h1> | ||
| </section> | ||
| <article > | ||
| <p class="text"> | ||
| Etizzle shiz magna sed ma nizzle hendrerit accumsizzle. Boom shackalack izzle fo shizzle my nizzle. Shiznit dang dolizzle, pizzle vitae, facilisis id, my shizz izzle, dizzle. Vestibulum boom shackalack ipsum primis yo for sure away luctus et shizzlin dizzle shizzlin dizzle own yo' Curae; Donec dolor. Integizzle i'm in the shizzle. Crazy pharetra blandizzle quam. I saw beyonces tizzles and my pizzle went crizzle rutrizzle doggy orci. Sed facilisis. Hizzle sizzle fizzle, venenatizzle eu, scelerisque vel, phat uhuh ... yih!, magna. | ||
| </p> | ||
| </article> | ||
|
|
||
| <section class="background" id="future"> | ||
| <h1 class="banner" id="future-banner"> Where I am headed? </h1> | ||
| <p class="banner" id="hint">(hint: this is not just any valley ;)</p> | ||
| </section> | ||
| </main> | ||
|
There was a problem hiding this comment. might want to put an article here similar to the ones above with details about what your goals/direction are for the future in this field. |
||
|
|
||
| <footer class="header-and-footer" id="footer"> | ||
| <h4 id="copyright"> © Alena Messmer 2017 </h4> | ||
| <nav> | ||
| <ul> | ||
| <li> <a href="#home"> Contact </a></li> | ||
| </ul> | ||
| </nav> | ||
| </footer> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Blog</title> | ||
| <link rel="stylesheet" href="../stylesheets/normalize.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles_blog.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header-and-footer"> | ||
| <a id="home" href="index.html"> Home </a> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="about.html"> About </a></li> | ||
| <li><a href="portfolio.html"> Portfolio </a></li> | ||
| <li><a href="blog.html"> Blog </a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <section class="background" id="books"> | ||
| <h1 class="banner" id="books-banner"> Book Adventures </h1> | ||
|
There was a problem hiding this comment. I really like your background image and font selection. Do you think the contrast between them should be increased for user experience or accessibility reasons? |
||
| </section> | ||
|
|
||
| <div class="blog"> | ||
|
There was a problem hiding this comment. Great Job with your page layout, what you accomplished here is not an easy task with plain vanilla css. :) |
||
| <aside> | ||
| <p>03/19/17</p> | ||
| </aside> | ||
|
|
||
| <article class="blog-post"> | ||
| <h3> Why Everyone Should be Reading the Expanse Series </h3> | ||
| <h4> Written by Alena Messmer </h4> | ||
| <div class="paragraph" id="first-paragraph"> | ||
| <a href="https://www.amazon.com/Leviathan-Wakes-James-S-Corey/dp/0316129089/ref=sr_1_1?ie=UTF8&qid=1490029952&sr=8-1&keywords=leviathan+wakes"> | ||
| <img class="book-cover" src="../images/leviathan-wakes.jpeg" alt="Leviathan Wakes" /> | ||
| </a> | ||
| <p> | ||
| Egestas integer eget aliquet nibh praesent. Sit amet commodo nulla facilisi nullam. Fames ac turpis egestas integer eget aliquet nibh praesent. Dolor purus non enim praesent. Orci eu lobortis elementum nibh. Arcu risus quis varius quam quisque id. Consequat ac felis donec et odio pellentesque diam volutpat. Eget dolor morbi non arcu risus quis. Amet commodo nulla facilisi nullam. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nunc eget lorem dolor sed viverra ipsum. Amet porttitor eget dolor morbi non arcu. Tristique senectus et netus et malesuada fames. | ||
| </p> | ||
| </div> | ||
| <div class="paragraph"> | ||
| <a href="https://www.amazon.com/Calibans-War-Expanse-James-Corey/dp/0316129062/ref=sr_1_1?ie=UTF8&qid=1490029979&sr=8-1&keywords=caliban%27s+war"> | ||
| <img class="book-cover-even" src="../images/calibans-war.jpg" alt="Caliban's War" /> | ||
|
There was a problem hiding this comment. I like how you alternated back and forth with the books here. |
||
| </a> | ||
| <p class="text-even"> | ||
| Pellentesque elit ullamcorper dignissim cras tincidunt. Etiam erat velit scelerisque in dictum non consectetur a erat. Nam aliquam sem et tortor consequat id porta nibh venenatis. Ut pharetra sit amet aliquam id diam maecenas ultricies. Nascetur ridiculus mus mauris vitae. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Odio ut sem nulla pharetra diam sit amet nisl suscipit. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Semper feugiat nibh sed pulvinar. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Adipiscing elit pellentesque habitant morbi tristique senectus. Viverra vitae congue eu consequat ac felis. | ||
| </p> | ||
| </div> | ||
| <div class="paragraph"> | ||
| <a href="https://www.amazon.com/Abaddons-Gate-Expanse-James-Corey/dp/0316129070/ref=sr_1_2?ie=UTF8&qid=1490029979&sr=8-2&keywords=caliban%27s+war"> | ||
| <img class="book-cover" src="../images/abaddons-gate.jpg" alt="Abbadon's Gate" /> | ||
| </a> | ||
| <p> | ||
| Commodo ullamcorper a lacus vestibulum sed arcu. Nibh tellus molestie nunc non blandit. Augue ut lectus arcu bibendum at varius vel pharetra vel. Elementum tempus egestas sed sed risus pretium quam vulputate. Id aliquet lectus proin nibh nisl condimentum id. Blandit libero volutpat sed cras ornare arcu dui vivamus arcu. Rutrum tellus pellentesque eu tincidunt. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Porta lorem mollis aliquam ut porttitor. Viverra suspendisse potenti nullam ac tortor vitae. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Enim nec dui nunc mattis. Et pharetra pharetra massa massa ultricies mi quis. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| <!-- <div class="background"> | ||
| </div> --> | ||
| </main> | ||
|
|
||
| <footer class="header-and-footer" id="footer"> | ||
| <h4 id="copyright"> © Alena Messmer 2017 </h4> | ||
| <nav> | ||
| <ul> | ||
| <li> <a href="#home"> Contact </a></li> | ||
| </ul> | ||
| </nav> | ||
| </footer> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Alena M</title> | ||
| <link rel="stylesheet" href="../stylesheets/normalize.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header-and-footer"> | ||
| <a id="home" href="index.html"> Home </a> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="about.html"> About </a></li> | ||
| <li><a href="portfolio.html"> Portfolio </a></li> | ||
| <li><a href="blog.html"> Blog </a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
|
There was a problem hiding this comment. great design, from a user experience perspective, how do you feel about making the top and bottom maps smaller so when someone lands on your page they see your details and intro front and center? Most people make split a sec decision on whether or not they are going to stay on a site and your intro text is enticing, show it off! |
||
| <div class="background"> | ||
| </div> | ||
|
|
||
| <article id="content"> | ||
|
|
||
| <img class="plane" src="../images/paper-plane.png" alt="paper airplane" /> | ||
| <div id="introduction"> | ||
| <img class="plane-right" src="../images/paper-plane-left.png" alt="paper airplane" /> | ||
| <h2 id="name"> Alena Messmer </h2> | ||
| <h3> Student. Software engineer. Adventurer. </h3> | ||
| <p> Hello, dear stranger!</p> | ||
| <p> | ||
| Allow me to take you on a journey of discovery, during which you will travel to distant lands across the sea and unearth stange and wondrous artifacts of art and science. | ||
| </p> | ||
| <p> | ||
| This adventure is not without perils, but I hope you will enjoy it nonetheless. | ||
| </p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <div class="background" id="bottom-image"> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer class="header-and-footer" id="footer"> | ||
| <h4 id="copyright"> © Alena Messmer 2017 </h4> | ||
| <nav> | ||
| <ul> | ||
| <li> <a href="#contact"> Contact </a></li> | ||
| </ul> | ||
| </nav> | ||
| </footer> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Portfolio</title> | ||
| <link rel="stylesheet" href="../stylesheets/normalize.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles.css"> | ||
| <link rel="stylesheet" href="../stylesheets/styles_portfolio.css"> | ||
| <link rel="stylesheet" href="../stylesheets/font-awesome-4.7.0/css/font-awesome.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header-and-footer"> | ||
| <a id="home" href="index.html"> Home </a> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="about.html"> About </a></li> | ||
| <li><a href="portfolio.html"> Portfolio </a></li> | ||
|
There was a problem hiding this comment. when I click on this link twice in a row I get a ERR_FILE_NOT_FOUND . not sure if it's just on my computer, but happens consistently. |
||
| <li><a href="blog.html"> Blog </a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main class="project-group"> | ||
|
There was a problem hiding this comment. This page looks amazing. Love the layout, images, fonts and github icon links 👍 |
||
| <h3 id="title">My Projects</h3> | ||
| <section class="project-list"> | ||
| <article> | ||
| <div class="image-box"> | ||
| <img class="project-image" src="../images/scrabble-heap.png" alt="Scrabble Tiles" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h4 class="project-title">Scrabble</h4> | ||
| <p> | ||
| Who's in my head. His name was looking young things. Warhol, Andy walking, Andy Warhol like a boy or lightning. Gilly. Max that time to Major Tom. Because my Suffragette City. Clouds green and on the dawn. Lawman beating up the children that baby, make it all. Sailors fighting in danger. Pie. Golden ones in other candidate. Slime and nothing is here am having so how this world. I, I'll make it ten times or a blackstar. Smack, baby, trying hard to blow it all. Sapiens have been wrong way of Americans. City. | ||
| </p> | ||
| <a href="https://github.com/Spatterjaaay/Scrabble"> | ||
| <span class="fa fa-github fa-2x"/> | ||
| </a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article> | ||
| <div class="image-box"> | ||
| <img class="project-image" src="../images/car-share.png" alt="Car" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h4 class="project-title">RideShare</h4> | ||
| <p> | ||
| Should I like the dames. Henry, don't talk to cram so loaded, man. Makes me ooh. This is so I can be heroes forever and again. Thru our last dance. Johnny’s an American. Stalking time to be heroes just for one day. Maybe we're playing hard as though they're here am I turned. Pray tomorrow. See their brains for you should fall. Factor Max that is here. Duke, throwing darts in their use it was, the strangest of Americans. Word and meet us. Burn. Johnny's in your glass high. Pressure. Channel Two. Malkhuth. Saturday, yeah. Manson, Cassius Clay. | ||
| </p> | ||
| <a href="https://github.com/Spatterjaaay/ride-share-two"> | ||
| <span class="fa fa-github fa-2x"/> | ||
| </a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article> | ||
| <div class="image-box"> | ||
| <img class="project-image" src="../images/cat-eating.gif" alt="Cat" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h4 class="project-title">MeowSpace</h4> | ||
| <p> | ||
| Reality. Every time to go. Coke. Mouse has grown up all the nightmares came on me, man. They're the whys. Aladdin Sane? Leave my Suffragette City. Wonderful, wonder when. Streets turn to break up my mother, my heart. She'd sigh like a richer man! Corinthian and again. Though nothing will keep formation. Back at those cavemen go. All the Moonboys. Listen to mine, love you and shy? Before you heard telephones, opera house, favourite melodies. Day, Hey man,. 'Cause hope, boys, it's take a leper messiah. Ooh-how, yea. Boys, boys, is nowhere to ashes, funk to stay. | ||
| </p> | ||
| <a href="https://github.com/Spatterjaaay/meowspace"> | ||
| <span class="fa fa-github fa-2x"/> | ||
| </a> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article> | ||
| <div class="image-box"> | ||
| <img class="project-image" src="../images/dollar-coin.png" alt="Dollars" /> | ||
| </div> | ||
| <div class="text"> | ||
| <h4 class="project-title">BankAccounts</h4> | ||
| <p> | ||
| Pie. Men. Dah dah dee dah dee dah. Woo hoo. Cold. Takes him right. He played guitar. Corinthian and long. Britannia is all. Freak out in a space face. David Bowie. No man! You're a blackstar. Pour me? Be a drive-in Saturday It's too far out, so high. She's uncertain if I will keep us on my legend, the wheel. Can't tell myself. Goodbye love Aladdin Sane? Slow Burn. Day, Hey man. Hey girlie, I might just for you. They came today. Gee, it's a little snooze. Every time low. | ||
| </p> | ||
| <a href="https://github.com/Spatterjaaay/BankAccounts"> | ||
| <span class="fa fa-github fa-2x"/> | ||
| </a> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="header-and-footer" id="footer"> | ||
| <h4 id="copyright"> © Alena Messmer 2017 </h4> | ||
| <nav> | ||
| <ul> | ||
| <li> <a href="#home"> Contact </a></li> | ||
| </ul> | ||
| </nav> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project, | ||
| Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome, | ||
| comprehensive icon sets or copy and paste your own. | ||
|
|
||
| Please. Check it out. | ||
|
|
||
| -Dave Gandy |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like how you used the same class name for the header and footer. Great Job keeping your css dry.