Sharks - Ivana #89
There are no files selected for viewing
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 |
|---|---|---|
| @@ -1,12 +1,82 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>About Me</title> | ||
| <link rel="stylesheet" href="/stylesheets/styles.css" /> | ||
| <link rel="stylesheet" href="/stylesheets/about.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="index.html">Home</a></li> | ||
| <li><a href="portfolio.html">Portfolio</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <section class="about-container"> | ||
| <div> | ||
| <img src="/images/Profile.png" alt="Profile Picture" id="profile-pic" /> | ||
| <h2>About Me</h2> | ||
| </div> | ||
|
|
||
| <section class="about-me-content"> | ||
| <h5>I am a Software Development student based in Boston.</h5> | ||
| <div class="about-paragraph"> | ||
|
There was a problem hiding this comment. You could replace this div with another section element for more semantic meaning |
||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | ||
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus | ||
| elementum sagittis vitae et. Nibh venenatis cras sed felis eget | ||
| velit. Luctus venenatis lectus magna fringilla urna porttitor | ||
| rhoncus. Sapien et ligula ullamcorper malesuada proin. Porttitor | ||
| lacus luctus accumsan tortor posuere. Tortor at risus viverra | ||
| adipiscing at in tellus integer. Nulla at volutpat diam ut | ||
| venenatis. Amet nisl suscipit adipiscing bibendum est. Tellus orci | ||
| ac auctor augue mauris augue. Arcu vitae elementum curabitur vitae. | ||
| Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. | ||
| Amet est placerat in egestas erat imperdiet sed euismod.Tristique et | ||
| egestas quis ipsum suspendisse. Tellus at urna condimentum mattis | ||
| pellentesque id nibh tortor. Dictum fusce ut placerat orci. Leo a | ||
| diam sollicitudin tempor id. Duis tristique sollicitudin nibh sit | ||
| amet commodo nulla facilisi nullam. Sit amet purus gravida quis | ||
| blandit turpis cursus in. | ||
| </p> | ||
| <br /> | ||
| <p> | ||
| Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed | ||
| velit. Pulvinar elementum integer enim neque volutpat ac tincidunt | ||
| vitae semper. Luctus venenatis lectus magna fringilla urna | ||
| porttitor. Sed enim ut sem viverra aliquet eget sit amet tellus. | ||
| Sodales ut eu sem integer vitae. Habitant morbi tristique senectus | ||
| et netus. Ultrices neque ornare aenean euismod elementum. Volutpat | ||
| blandit aliquam etiam erat velit scelerisque in dictum non. Volutpat | ||
| blandit aliquam etiam erat velit scelerisque. Lectus urna duis | ||
| convallis convallis tellus id. Nibh tellus molestie nunc non blandit | ||
| massa enim nec. Nibh cras pulvinar mattis nunc sed. Pretium lectus | ||
| quam id leo in vitae turpis massa sed. Ultrices dui sapien eget mi | ||
| proin sed libero enim. Quis ipsum suspendisse ultrices gravida | ||
| dictum fusce. Nec tincidunt praesent semper feugiat nibh. Massa | ||
| tempor nec feugiat nisl pretium fusce id. Id aliquet lectus proin | ||
| nibh nisl condimentum id venenatis a. Vitae tortor condimentum | ||
| lacinia quis. | ||
| </p> | ||
| </div> | ||
| </section> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <ul> | ||
|
There was a problem hiding this comment. You can surround this unordered list with a nav element too and in the future you can add more links to it like your socials or linkedin/github |
||
| <li></li> | ||
|
There was a problem hiding this comment. You can delete this unused list item |
||
| <li>Ivana © 2022</li> | ||
| <li> | ||
| <a href="mailto:[email protected]">Contact Me</a> | ||
| </li> | ||
| </ul> | ||
| </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 |
|---|---|---|
| @@ -1,12 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
There was a problem hiding this comment. The index.html page generally lives at the top level of the project directory (not within a subdirectory). When we visit a website (e.g., www.github.com) when no page is part of the URL, the web server will look for one of a few default file names (index.html is usually among them) and serve the first one it finds. While a web server can be configured to serve a default file from elsewhere (such as under the pages folder) it's often easier to have the index.html live in the site root, and have the other pages stored under the pages folder. This affects the paths required for locating style files and images, or other pages in anchor tags. |
||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Ivana Maldonado</title> | ||
| <link rel="stylesheet" href="/stylesheets/styles.css" /> | ||
| <link rel="stylesheet" href="/stylesheets/index.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
|
There was a problem hiding this comment. What are you using this div for? Do you need it? Consider removing it or replacing it with something more semantic |
||
| <header> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="about.html">About Me</a></li> | ||
| <li><a href="portfolio.html">Portfolio</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <section class="home-page-content"> | ||
| <h2>Ivana Maldonado</h2> | ||
| <div class="my-title"> | ||
| <h3>Software Development Student</h3> | ||
| </div> | ||
|
Comment on lines
+26
to
+28
There was a problem hiding this comment. Can you remove this div and put the "my-title" class on the h3? |
||
| <div> | ||
| <p class="home-page-paragraph"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | ||
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis | ||
| ipsum suspendisse ultrices gravida dictum fusce. | ||
| </p> | ||
| </div> | ||
|
Comment on lines
+29
to
+35
There was a problem hiding this comment. Can you remove the div here and put "home-page-paragraph" on the p tag? You could replace this div element with a section element |
||
| </section> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <ul> | ||
| <li></li> | ||
| <li>Ivana © 2022</li> | ||
| <li> | ||
| <a href="mailto:[email protected]">Contact Me</a> | ||
| </li> | ||
| </ul> | ||
| </footer> | ||
| </div> | ||
| </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 |
|---|---|---|
| @@ -1,12 +1,61 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Portfolio</title> | ||
| <link rel="stylesheet" href="/stylesheets/styles.css" /> | ||
| <link rel="stylesheet" href="/stylesheets/portfolio.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="index.html">Home</a></li> | ||
| <li><a href="about.html">About Me</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <section class="portfolio-container"> | ||
| <h2>Ada Projects</h2> | ||
| <div class="grid-container"> | ||
| <div> | ||
| <a href="https://github.com/maldonado-ivana/adagrams-py" | ||
| ><img src="/images/adagrams.png" alt="Adagrams project" | ||
| /></a> | ||
| <p>Adagrams</p> | ||
| </div> | ||
| <div> | ||
| <a href="https://github.com/maldonado-ivana/viewing-party" | ||
| ><img src="/images/viewing_party.png" alt="Viewing Party project" | ||
| /></a> | ||
| <p>Viewing Party</p> | ||
| </div> | ||
| <div> | ||
| <a href="https://github.com/maldonado-ivana/swap-meet" | ||
| ><img src="/images/swap-meet.png" alt="Swap meet project" | ||
| /></a> | ||
| <p>Swap Meet</p> | ||
| </div> | ||
| <div> | ||
| <a href="https://github.com/maldonado-ivana/task-list-api" | ||
| ><img src="/images/task_list.png" alt="Task List project" | ||
| /></a> | ||
| <p>Task List</p> | ||
| </div> | ||
| </div> | ||
|
Comment on lines
+23
to
+48
There was a problem hiding this comment. Consider using an unordered list here instead of a div for a grid-container. Then you can have each project be a list item and then the a, p, image tag can be in the section (and they can be siblings too) <ul>
<li>
<section>
<a href="https://github.com/maldonado-ivana/adagrams-py">
<img src="/images/adagrams.png" alt="Adagrams project"/>
<p>Adagrams</p>
</section>
</li>
<li>
<section>
<a href="https://github.com/maldonado-ivana/viewing-party">
<img src="/images/viewing_party.png" alt="Viewing Party project"/>
<p>Viewing Party</p>
</section>
</li>
</ul> |
||
| </section> | ||
|
|
||
| <footer> | ||
| <ul> | ||
| <li></li> | ||
| <li>Ivana © 2022</li> | ||
| <li> | ||
| <a href="mailto:[email protected]">Contact Me</a> | ||
| </li> | ||
| </ul> | ||
| </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,36 @@ | ||
| #profile-pic { | ||
| width: 50%; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .about-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| text-align: center; | ||
| padding: 5em; | ||
| } | ||
|
|
||
| h2 { | ||
| padding: 3em 0 2em 0; | ||
| font-family: 'Lato', sans-serif; | ||
| color: #657eff; | ||
| font-size: 35px; | ||
| } | ||
|
|
||
| h5 { | ||
| font-family: 'Roboto Slab', serif; | ||
| font-weight: 300; | ||
| font-size: 25px; | ||
| color: #deddff; | ||
| } | ||
| .about-paragraph { | ||
| padding-top: 1em; | ||
| } | ||
|
|
||
| p { | ||
| font-family: 'Lato', sans-serif; | ||
| font-weight: 300; | ||
| font-size: 20px; | ||
| color: #f3f3ff; | ||
| text-align: start; | ||
| } |
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,29 @@ | ||
| .home-page-content { | ||
| padding: 10em 5em 10em 5em; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| h2 { | ||
| font-family: 'Roboto Slab', serif; | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| color: #0061fc; | ||
| } | ||
|
|
||
| .home-page-paragraph { | ||
| padding: 3em 0 3em 0; | ||
| } | ||
|
|
||
| h3 { | ||
| font-family: 'Lato', sans-serif; | ||
| font-weight: 300; | ||
| font-size: 25px; | ||
| color: #deddff; | ||
| } | ||
|
|
||
| p { | ||
| font-family: 'Roboto Slab', serif; | ||
| font-weight: 300; | ||
| font-size: 20px; | ||
| color: #f3f3ff; | ||
| } |
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,27 @@ | ||
| .portfolio-container { | ||
| font-family: 'Roboto Slab', serif; | ||
| font-weight: 300; | ||
| font-size: 35px; | ||
| color: #657eff; | ||
| text-align: center; | ||
| } | ||
| h2 { | ||
| padding: 3em 0 2em 0; | ||
| } | ||
|
|
||
| p { | ||
| font-family: 'Lato', sans-serif; | ||
| font-weight: 300; | ||
| font-size: 25px; | ||
| color: #deddff; | ||
| } | ||
|
|
||
| img { | ||
| width: 50%; | ||
| } | ||
|
|
||
| .grid-container { | ||
| display: grid; | ||
| grid-template-columns: 50% 50%; | ||
| grid-row-gap: 3em; | ||
| } |
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,57 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&family=Roboto+Slab:wght@100;300;400&display=swap'); | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| background-color: #001649; | ||
| } | ||
|
|
||
| header { | ||
| font-family: 'Lato', sans-serif; | ||
| font-weight: 500; | ||
| display: flex; | ||
| width: 100%; | ||
| padding-top: 1em; | ||
| padding-bottom: 1em; | ||
| border-bottom: 1px solid #deddff; | ||
| justify-content: right; | ||
| } | ||
|
|
||
| nav { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| display: inline-flex; | ||
| padding-right: 3em; | ||
| } | ||
|
|
||
| li { | ||
| padding-left: 2em; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: #deddff; | ||
| } | ||
|
|
||
| footer { | ||
| font-family: 'Lato', sans-serif; | ||
| font-weight: 300; | ||
| display: inline-block; | ||
| width: 100%; | ||
| text-align: center; | ||
| color: #657eff; | ||
| bottom: 0; | ||
| position: fixed; | ||
| padding-bottom: 2em; | ||
| } | ||
|
|
||
| footer a { | ||
| color: #657eff; | ||
| } | ||
|
|
||
| body { | ||
| margin-bottom: 10%; | ||
| } |
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.
We want to avoid using non semantic elements like div or span unless absolutely necessary. I think you could get rid of this div here and put tags on these elements if you need to select them for styling. If you do need a parent element around the image and h2 tags on lines 24 and 25, can you think of a more semantically relevant one?