Anna's Portfolio Website : First Project of Code Excursion 2021 #45
Conversation
created this simple portfolio website. (Next time remember to commit changes continuously...)
There was a problem hiding this comment.
🌈Impressive site! All in all your code is very neat and organized. Though I understand there's still some work to do, I can see the layout is friendly to the eyes and the links are functional.😃
Remember to erase all the unnecessary files like images and examples and comments from your code once you are done and don't need them anymore.
On a next step, you could try to add media queries to make the site responsive so that it can be beautifully displayed on all kinds of devices. To read more about this you can visit this link. Good job so far! ✨✨
| @@ -1,13 +1,3 @@ | |||
| # Project Name | |||
| # Portfolio Website | |||
There was a problem hiding this comment.
Hi Anna! Nice to meet you! I'm Estefanía and i'll be taking a look at your code today. 👋😃
| #navigation{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| /*background-color: thistle;*/ | ||
| padding: 20px 80px; | ||
| font-size: 32px; | ||
| margin-top: 20px; | ||
|
|
||
| } | ||
| #navigationleft{ | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| /*background-color: teal;*/ | ||
|
|
||
| } | ||
| #navigationright{ | ||
| display: flex; | ||
| justify-content: flex-end; |
| <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"> | ||
| <link rel="stylesheet" href="../../css/style.css"> | ||
| <title>Work</title> | ||
| </head> | ||
| <body> | ||
| <div id="navigation"> | ||
| <div id="navigationleft"> | ||
| <a href="../../index.html">Anna Staub</a> | ||
| </div> | ||
| <div id="navigationright"> | ||
| <a href="../work.html">Work</a> <a href="../about.html">About</a> <a href="../contact.html">Contact</a> | ||
| </div> | ||
| </div> | ||
| <a id="instalink" href="https://instagram.com/anna.staub.illustration" target="_blank"><img src="../../images/instagram.png"></a> | ||
|
|
||
|
|
||
| <div id="singleworkcontainer"> | ||
| <div id="bigimage"> | ||
| <img src="../../images/sausagedog.jpg"> | ||
| <div class="singleworkdescription"> | ||
| <h1>Dog Heaven</h1> | ||
| <p>Personal Work</p> | ||
| <h1>Date</h1> | ||
| <p>2020</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> |
| <div id="workgallery"> | ||
| <!-- Due to a lack of time I haven't linked all the thumbnails to actual "singlework"-html-files, but the concept is clear I think.--> |
There was a problem hiding this comment.
Yes it is! It would look even greater once it's fully functional.
| <div id="startimage"> | ||
| <img src="./images/lesend.jpg" alt="You should see an image here"> | ||
| </div> |
There was a problem hiding this comment.
An even better alt description would be a brief description of what's in the actual picture, so that the site is also accessible. For example: alt="A picture of a bird" or alt="one of my works of art picturing a colorful bird"
I've created a simple portfolio website for myself. I'm really happy I managed to create a flexbox work-gallery! The page is still very simple and "unfinished", but I'm having a lot of fun with HTML/CSS and will develop it further.
(Since it's not yet the way I want it (due to a lack of time) i haven't deployed it anywhere yet)