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.

Sign up for GitHub

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

Jump to bottom

Julia's project 2 #23

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

Julia's project 2 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5267ae2
added about.html
julialeut Oct 25, 2021
c263c2b
made the about.html
julialeut Oct 25, 2021
c233a21
made the about.html
julialeut Oct 25, 2021
9045272
Delete project-p2-layouts-master directory
julialeut Oct 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions code/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

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

Hi there! 😊 I'm Karin, and I will review your code today.

<html>

<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">
<title>Textildesign</title>
<link rel="stylesheet" href="./style.css" />
<!-- dont forget the meta tag for responsiveness -->
</head>

<body>
<header>
Copy link

Choose a reason for hiding this comment

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

Nice to see that you are using semantic HTML-tags. Great work! 👍

<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="header-text">
<h1>Anna Leutert</h1>
<h2>Handweberin, Textil- und Farbdesignerin</h2>
Comment on lines +21 to +22
Copy link

Choose a reason for hiding this comment

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

This is also very good. Using a correct hierarchy in titles/text-tags makes your site better according to Google. Meaning your SEO is on point! 🙂

</div>
</header>

<nav id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="active" href="about.html">Über Mich</a></li>
<li><a href="aktuell.html">Aktuell</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Tipps & Tricks</a></li>
</ul>
</nav>

<main class="">

<!--über mich / vorstellen -->

<section class="about-container">
<section class="text-container">
<div>
<h3>Mit viel Begeisterung weben.</h3>
<p>Mein ganzes Leben schon bin ich fasziniert von bunten Fäden, und was daraus gemacht werden kann. Ich fühle
mich wohl beim Weben, das ist meine Welt. Ich Stricke auch sehr viel. Mit bunten Fäden, alles mit bunten
Fäden. Und da kommt schon das nächste..... bunt. Farbe! Farbe und wie sie wirkt, und warum sie so wirkt, und
welches ist an dieser Stelle die Beste aller Farben. Das beschäftigt mich. Das Intressiert mich. Das ist
meine Welt. Das ist mein Beruf.</p>
<p>Ich bin Mutter von 4 tollen Töchtern. </p>
Comment on lines +44 to +49
Copy link

Choose a reason for hiding this comment

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

Looking at this in the browser shows that the text-block is very wide. To make it easier for the visitor to read the text, you could add a max-width to your text-block, or even to a parent tag (text-container for example). 😊

</div>
<!--Trennlinie-->
<hr class="solid">
Copy link

Choose a reason for hiding this comment

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

The hr-tag is not used that often nowadays, because of it's lack of customization options. A <span>-tag would give you a lot more options if you want to add a visual element to separate your sections. For example, you can use borders, width and height, and even gradients and drop shadow. 🎨😄

<div>
<h3>Werdegang</h3>
<section class="tabelle">
<div class="line">
<div class="year">
1981 - 1984
</div>
<div>
Ausbildung, Handweberin EFZ, BFF Bern
</div>
</div>
<div class="line">
<div class="year">
1984
</div>
<div>
Praktikum, Leinenweberei Bern </div>
</div>



</section>
</div>
</section>
<div class="picture">
<img src="/img/portrait.JPG" alt="portrait" style="width:100%;max-width:500px;">
</div>
</section>

</main>

<footer>
<!-- newsletter -->
<section class="newsletter-container">
Copy link

Choose a reason for hiding this comment

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

This comment is an overall thought: GREAT naming of your tags. You can easily follow your code and understand what divs contains what content, and what they're for. Keep up the good work! 🌟


</section>
<!-- instagram -->
<section class="insta-container">

</section>

</footer>
</body>

</html>
147 changes: 131 additions & 16 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,133 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Project Name</title>
<link rel="stylesheet" href="./style.css" />
<!-- dont forget the meta tag for responsiveness -->
</head>
<body>
<header>
<!-- If you want a header with a title, logo and a navbar, here is where you should add that. -->
</header>

<main class="">
<!-- The main container to use as the flex parent for your card layout, the main content of the site should be in here. -->
</main>
</body>
</html>

<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">
<title>Textildesign</title>
<link rel="stylesheet" href="./style.css" />
<!-- dont forget the meta tag for responsiveness -->
</head>

<body>
<header>
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="header-text">
<h1>Textildesign</h1>
<h2>Anna Leutert</h2>
</div>
Comment on lines +20 to +23
Copy link

Choose a reason for hiding this comment

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

As you are very good with naming, it could be nice to know that this part of a webpage is usually called a hero-section. 😊

</header>

<nav id="navigation">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">Über Mich</a></li>
<li><a href="aktuell.html">Aktuell</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Tipps & Tricks</a></li>
</ul>
</nav>

<main class="">

<!--über mich / vorstellen -->

<section class="welcome-container">
<section class="text-container">
<h3>Mit viel Begeisterung weben.</h3>
<p>Mein ganzes Leben schon bin ich fasziniert von bunten Fäden und was daraus gemacht werden kann. Ich fühle
mich
wohl beim Weben, das ist meine Welt.</p>
<a href="about.html" class="button"> Mehr zu meiner Person</a>
</section>
<div class="picture">
<img src="/img/portrait.JPG" alt="portrait" style="width:100%;max-width:500px;">
Copy link

Choose a reason for hiding this comment

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

To reach the images more easily, you could add your image-folder to the code-folder. The path you've used now suggests that the img-folder is located within the code-folder, if you want to reach a folder outside of the code-folder, you would need to write ../img/portrait.JPG (with 2 dots before the slash). 😊

</div>
</section>

<!-- shop -->

<section class="shop-container">
<h2>Shop</h2>
<div>
<a href="" class="shop-cart">
<img src="/img/turin.jpg" alt="Bild Turin">
<p>Webanleitung Turin für Kissen</p>
</a>
<a href="" class="shop-cart">
<img src="/img/turin.jpg" alt="Bild Turin">
<p>Webanleitung Turin für Kissen</p>
</a>
<a href="" class="shop-cart">
<img src="/img/turin.jpg" alt="Bild Turin">
<p>Webanleitung Turin für Kissen</p>
</a>
</div>
<section class="text-container">
<p>
Im online Shop finden Sie diverse Webanleitungen. Die Sie als PDF Datei bestellen können.
</p>
<a href="shop.html" class="button"> Mehr </a>
</section>

</section>

<!-- aktuell -->

<section class="news-container">
<h2>Aktuell</h2>
<div>
<img src="/img/aktuell.jpg" alt="Bild Aktuell">
<div class="news-text">
<p>Alle Daten zu aktuellen Kursen und Ausstellungen.
</p>
<a href="aktuell.html" class="button"> Mehr</a>
</div>
</div>
</section>

<!-- portfolio -->

<section class="portfolio-container">
<h2>Portfolio</h2>
<div class="gallery">
<img src="/img/portfolio/decke01.jpg" alt="decke01" class="photo">
<img src="/img/portfolio/decke02.jpg" alt="decke02" class="photo">
<img src="/img/portfolio/decke03.jpg" alt="decke03" class="photo">
<img src="/img/portfolio/decke04.jpg" alt="decke04" class="photo">
<img src="/img/portfolio/decke05.jpg" alt="decke05" class="photo">
<img src="/img/portfolio/decke06.jpg" alt="decke06" class="photo">
</div>

<a href="portfolio.html" class="button"> Mehr</a>
</section>

<!-- tipps / tricks -->

<section class="blog-container">
<h2>Tipps & Tricks</h2>

<a href="blog.html" class="button"> Mehr</a>

</section>
</main>

<footer>
<!-- newsletter -->
<section class="newsletter-container">

</section>
<!-- instagram -->
<section class="insta-container">

</section>

</footer>
</body>

</html>
Loading