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

Simone created a portfolio page #27

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

SimoneStillhard
Copy link

No description provided.

Copy link

@HIPPIEKICK HIPPIEKICK left a comment

Choose a reason for hiding this comment

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

Nice job with flexbox, Simone! There are still some minor things to look over to make it fully responsive, but you're getting there. Keep up the good work!

<title>Simone Steiger</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');

Choose a reason for hiding this comment

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

Nice with a google font!

Comment on lines +22 to +39
<div class="talent" style="width: 200px; height: 250px;">
<a href="./staging.html">Home Staging</a>
</div>
<div class="talent" style="width: 290px; height: 250px;">
<a href="./model.html">Werbemodel</a>
</div>
<div class="talent" style="width: 240px; height: 250px;">
<a href="./sprecher.html">Sprecherin</a>
</div>
<div class="talent" style="width: 200px; height: 250px;">
<a href="./moderation.html">Moderatorin</a>
</div>
<div class="talent" style="width: 290px; height: 250px;">
<a href="./sugaring.html">Sugaring</a>
</div>
<div class="talent" style="width: 240px; height: 250px">
<a href="./theater.html">Schauspielerin</a>
</div>

Choose a reason for hiding this comment

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

Is there a reason these are not the same width? 🤔 Also, wouldn't it be nice if these were images 😍

Comment on lines +43 to +44
<div>tel: +41 78 788 28 78</div>
<div>mail: [email protected]</div>

Choose a reason for hiding this comment

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

Use <p> for texts

Comment on lines +13 to 19
<header class="main">
<h1>SIMONE STEIGER</h1>
<img src="./images/main.jpg">
<span>Mit viel Freude spreche ich Dokumentationen, Hörbücher, Werbetexte und
vieles mehr für Sie ein. Gerne moderiere ich Ihren Event. Auch für
Fernsehproduktionen oder als Werbemodel bin ich buchbar.</span>
</header>

Choose a reason for hiding this comment

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

Nice header! It would be nice if you had the same header on all pages - so that the whole page is even more aligned (although I like that you're reusing the colors etc). Also, a navbar would be nice :)

Choose a reason for hiding this comment

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

Skärmavbild 2022-11-07 kl  11 56 11

The header gets a little crowded in mobile, maybe you'd want to make the layout different on small screens?

Comment on lines +31 to +38
<img src="./images/stage3.jpg">
<img src="./images/stage2.jpeg">
<iframe width="480" height="270" src="https://www.youtube.com/embed/cIi89wHNmTE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<img src="./images/stage1.jpeg">
<img src="./images/stage4.jpeg">

Choose a reason for hiding this comment

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

Some of the images (and the video) are too wide for mobile, and it's causing a horizontal scroll effect that we'd like to avoid

Comment on lines +96 to +101
.gallery {
display: flex;
flex-direction: column;
align-items: center;
margin: 40px 0px;
}

Choose a reason for hiding this comment

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

These are also causing a horizontal scroll on some screen sizes. Try adding flex-wrap: wrap; to make them wrap when they don't fit :)

Comment on lines +113 to +118
footer {
display: flex;
justify-content: space-around;
background-color: rgb(200, 240, 250);
padding: 20px;
}

Choose a reason for hiding this comment

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

Very nice flexboxing!

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