Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

first upload of the learning project #62

Open
wants to merge 26 commits into
base: master
Choose a base branch
from

Conversation

Sabrina-Lombriser
Copy link

I created a wedding website with several information about the wedding
I'm struggling with the alignment of the different boxes

Copy link

@NadiaPosch NadiaPosch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The basic structure of your html looks very good, well done! 💪🏽 I've made a few suggestions where you could simplify or improve UX but it's a great foundation 👍 Amazing how far you've come in just a few weeks. You can really be proud of yourself 😊

code/style.css Outdated Show resolved Hide resolved
code/style.css Outdated Show resolved Hide resolved
code/index.html Outdated
Comment on lines 264 to 280
<li class="wishlist">
<div class="wunsch-container">
<div class="wunsch-Bild">
<img
class="image-wunsch"
src="./images/Abendessen.jpg"
alt="Bild zNacht"
/>
</div>
<div class="wunsch-Text">
<p>
Gemütliches Nachtessen <br />
<strong>100 CHF</strong>
</p>
</div>
</div>
</li>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could simplify the html structure for all the li elements as follows (with a few CSS changes; see other comment):

Suggested change
<li class="wishlist">
<div class="wunsch-container">
<div class="wunsch-Bild">
<img
class="image-wunsch"
src="./images/Abendessen.jpg"
alt="Bild zNacht"
/>
</div>
<div class="wunsch-Text">
<p>
Gemütliches Nachtessen <br />
<strong>100 CHF</strong>
</p>
</div>
</div>
</li>
<li class="wishlist wunsch-container">
<img
class="image-wunsch"
src="./images/Abendessen.jpg"
alt="Bild zNacht"
/>
<p class="wunsch-Text">
Gemütliches Nachtessen <br />
<strong>100 CHF</strong>
</p>
</li>

code/style.css Outdated
Comment on lines 253 to 256
.wishlist {
padding-bottom: 20px;
width: 33%;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To simplify the li structure as mentioned, you'd have to make the following changes:

Suggested change
.wishlist {
padding-bottom: 20px;
width: 33%;
}
.wishlist {
flex-direction: column;
align-items: center;
padding-bottom: 20px;
width: 33%;
}

code/index.html Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants