Maja - Business site #61
Conversation
julialindstrand
left a comment
julialindstrand
left a comment
There was a problem hiding this comment.
The website looks great! I like the colors and the overall purpose of the website. You should be really proud! The code was easy to read and interpret. I like that you made a folder for the images, it made it clean. I couldn't find anything that's "wrong" but made a few notes of small things. It's a really good first project. Celebrate!
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="30" | ||
| height="30" | ||
| viewBox="0 0 24 22" | ||
| fill="none" | ||
| stroke="#2446C2" | ||
| stroke-width="3" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <line x1="3" y1="13" x2="21" y2="13"></line> | ||
| <line x1="3" y1="6" x2="21" y2="6"></line> | ||
| <line x1="3" y1="20" x2="21" y2="20"></line> | ||
| </svg> |
There was a problem hiding this comment.
What is svg? Never heard of it before
There was a problem hiding this comment.
SVG is a typ of vector based graphic. They don't use pixels, unlike images, so they dont lose quality when you zoom in or rescale them.
index.html
Outdated
| <section> | ||
| <div class="hero-container"> | ||
| <img class="hero-image" | ||
| src="Images/lum3n-DwDCTnlp-V4-unsplash.jpg" |
There was a problem hiding this comment.
Maybe change the names on the images so it's easier to know what it is in the code
There was a problem hiding this comment.
Good comments above the sections so it's easy to see what's what!
| </section> | ||
|
|
||
| <div class="view-all-button"> | ||
| <a href="#adopt">View All Pets</a> |
There was a problem hiding this comment.
Maybe just a preference but I think this would look best in all upper or lower case :)
| h1 { | ||
| color: #2446C2; | ||
| font-family: "Rock Salt", cursive; | ||
| font-size: x-large; | ||
| } | ||
|
|
||
| h2 { | ||
| color: #2446C2; | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: xxx-large; | ||
| margin-top: 10px; | ||
| margin-bottom: 2px; | ||
| } | ||
|
|
||
| h3 { | ||
| color: black; | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: x-large; | ||
| text-decoration: line-through #2446C2; | ||
| margin-top: 10px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| h4 { | ||
| color: #2446C2; | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: xx-large; | ||
| margin: 10px 0 5px 0; | ||
| } | ||
|
|
||
| h5 { | ||
| color: #2446C2; | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: large; | ||
| margin: 10px 0 10px 0; | ||
| } | ||
|
|
||
| p { | ||
| color: black; | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: medium; | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
Really smart to have all the text-edits gathered!
| justify-content: center; | ||
| } | ||
|
|
||
| .hero-text h3 { |
There was a problem hiding this comment.
What is the difference between this h3 and the one called h3?
style.css
Outdated
| flex-direction: column; | ||
| align-items: center; | ||
| width: 100%; | ||
|
|
There was a problem hiding this comment.
Maybe remove this row if it's not something that's gonna be here
| input, | ||
| textarea { |
There was a problem hiding this comment.
I've never made a textarea, is it suppose to be written like this?
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
It seems like you’ve tried to implement a Google Font (Roboto). Make sure to follow the instructions on the Google Font website and link it. + It would be nice if the buttons also got this font 😇
You’ve managed well with the layout and the JavaScript works as expected too! Keep it up 👍
index.html
Outdated
|
|
||
|
|
||
| <div class="contact-form" id="contact"> | ||
| <form action="http://httpbin.org/anything" method="POST"> |
There was a problem hiding this comment.
Make sure to use the https method, as some browser will otherwise block this action
index.html
Outdated
| required | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| placeholder="Name" | ||
| style="width: 100%;"> |
3 participants
https://business-site-pawsofhope.netlify.app/