project 1 yogadia final #55
Conversation
| <menu class="menu-parent"> | ||
| <img src="./Images/Yogadia_Logo.jpg" alt="Logo" class="menu-logo" /> | ||
|
|
||
| <div class="menu-child 2"> |
There was a problem hiding this comment.
I don't see any class named 2 in your css, so you can remove this 😄
| <img | ||
| src="Images/Hero1_v1.jpg" | ||
| alt="Hero" | ||
| style="width: 100%; height: 125%" |
There was a problem hiding this comment.
You could put all images' styling in your css.
| } | ||
|
|
||
| .button1:hover { | ||
| background-color: white; |
There was a problem hiding this comment.
Since the background is also white (or almost), it would be better for the eyes to have another color on hover.
| <section></section> | ||
| <section></section> |
There was a problem hiding this comment.
I assume you want to add something here eventually, but in the meantime, it would be better to not leave empty tags.
| </div> | ||
|
|
||
| <section class="section1"> | ||
| <div class="spalte 1"> |
There was a problem hiding this comment.
Again, I'm not sure why you have this here, but class name should be only spalte according to your css (not spalte 1, spalte 2, etc.)
|
|
||
| body { | ||
| font-family: "Abel", sans-serif; | ||
| color: black; |
There was a problem hiding this comment.
color: black; is default, so no need to add it here.
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| flex-direction: row; |
There was a problem hiding this comment.
Nice use of flexbox! Did you know that flex-direction: row; is default for flexbox? You could save a line by removing it 😄
| .menu-child a:hover { | ||
| background: rgb(115, 14, 83); | ||
| color: white; | ||
| } |
There was a problem hiding this comment.
Great that you added :hover styling!
| .hero-text { | ||
| text-align: center; | ||
| position: absolute; | ||
| top: 30%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| color: rgb(115, 14, 83); | ||
| } | ||
|
|
||
| .h1 { | ||
| font-size: 30pt; | ||
| } | ||
|
|
||
| .h2 { | ||
| font-size: 15pt; | ||
| color: black; | ||
| } |
There was a problem hiding this comment.
Here you could achieve the same thing (having only the h1 in another color) and save a line of code like this:
.hero-text {
text-align: center;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.h1 {
font-size: 30pt;
color: rgb(115, 14, 83);
}
.h2 {
font-size: 15pt;
}
| .footer { | ||
| background-color: rgb(5, 5, 5); | ||
| text-align: center; | ||
| margin: 100px solid; |
There was a problem hiding this comment.
Since margin can't have a solid value, this line has no effect, you can remove it completely.
first project is ready for feedback.
Regards,
Klaudia