Anne-Catherines Project 1 #54
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The button "flyer" looks a bit different than the other buttons. Why is that? And how can I make, that if you click on the Mail-image (below), that it will open autmatically a new e-mail with my e-mailadress on it? ac.minnig@bluewin.ch should be the e-mail adress.
There was a problem hiding this comment.
Hi Anne-Catherine!
Great idea to recreate an existing website :) Having a reference to compare with is nice!
Pay attention to only add relevant code: I see you added many things in your css file that had nothing to do with your project. 😉
Keep up the good work! 🔥
code/index.html
Outdated
Comment on lines
0
to
85
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Project Name</title> | ||
| <title>New Zwischenziel 🏨 🏔</title> | ||
| <link rel="stylesheet" type="text/css" href="style.css" /> | ||
| <!-- dont forget to add a css file and link it here! --> | ||
| <!-- If you're using google fonts, that should be added here --> | ||
| <img class="hero" src="../images/Zwischenziel.png" alt="Zwischenziel" /> | ||
| </head> | ||
| <body> | ||
| <!-- | ||
| Write your code here inside the body to make it appear in the browser. | ||
| Below is an example on how to use an image tag. Copy it and add it in the body, but outside the comment tag if you want to see how it looks like on the website. Then you can change the size and other styling for it in the css file. | ||
|
|
||
| <img src="example-recipe-background.png" alt="Banana Bread"> | ||
| <p> | ||
| „zwischenziel“ ist ein verein, der leerstehende gastro- und hotelflächen | ||
| entlang der nationalstrasse n11 zur zwischennutzung an interessierte | ||
| personen oder gruppen zur befristeten weitermiete vermittelt. | ||
| <br /> | ||
| <br /> | ||
| im fokus steht die förderung und ermöglichung von erfolgreichen | ||
| zwischennutzungen mit positiven effekten auf die gesellschaft, wirtschaft | ||
| und kultur. der verein ist nicht gewinnorientiert. allfällige | ||
| überschüssige gelder werden in weitere projekte investiert. | ||
| <br /> | ||
| <br /> | ||
| </p> | ||
| <br> | ||
| <br> | ||
| <a class="button" href="../PDF/zwischenziel-flyer.pdf" download="zwischenziel-flyer.pdf" target="_blank"> | ||
| flyer | ||
| </a> | ||
| <a class="button" href="../PDF/statuten-zwischenziel.pdf" download="statuen-zwischenziel.pdf" target="_blank"> Statuten | ||
|
|
||
| </a> | ||
| <a class="button" href="../PDF/zwischenziel-konzept.pdf" download="zwischenziel-konzept.pdf" target="_blank"> Konzept | ||
|
|
||
| </a> | ||
| <br /> | ||
| <img class="gleitschirmbild" src="../images/Gleitschirm.png" alt="Gleitschirm" /> | ||
| <h2>unsere bisherigen projekte:</h2> | ||
| <a class="button" href="../PDF/eisfeld.pdf" download="eisfeld.pdf" target="_blank"> | ||
| eisfeld | ||
| </a> | ||
| <a class="button" href="../PDF/skikeller_zwsi.pages.pdf" download="skikeller-zweisimmen.pdf" target="_blank"> | ||
| skikeller | ||
| </a> | ||
| <!-- | ||
| PDFS: source is important. select the right yource with enterint "./" or "../" | ||
| --> | ||
| <br/> | ||
| <br/> | ||
| <img class="sitzbankbild" src="../images/Sitzbank.png" alt="Sitzbank" /> | ||
| <p> | ||
| <br/> | ||
| <br/> | ||
| wir versuchen oftmals im rahmen von zwischennutzungen kulturelle projekte | ||
| für jugendliche mit einzubeziehen. wer solche projekte unterstützen | ||
| möchte, meldet sich bitte beim verein. hierbei sind auch sponsorenverträge | ||
| mit verlinktem logo möglich. wir gehen gerne auf ihre wünsche ein! | ||
| </p> | ||
| <br/> | ||
| <br/> | ||
| <div class="kontaktbox"> | ||
| <p> | ||
| verein zwischenziel | p.adr. n11 architekten | ||
| gewerbestrasse 4 | ch-3770 zweisimmen | ||
| tel. +41 (0)33 722 33 11 | ||
| IBAN CH37 8085 6000 0025 2631 3 | ||
| </p> | ||
| <br/> | ||
| <br/> | ||
| <div class="kontaktbilder"> | ||
| <img src="../images/mailpic-45.webp" alt="Mail" href=""> | ||
| <br/> | ||
| <img class="facebook-image" src="../images/f_logo_RGB-Blue_58.png" alt="Logo-Facebook"> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
| <!-- | ||
| how to make text and pictures full screen ? | ||
| Text is centered but i cannot edit the margin of the text. Text shoudl only a pear in a narrow box, and should not appear full screan and dont go until the edge. | ||
| Button: i.d.R. mind 48 pixel gross machen bei Padding, damit man es auf Mobilephone gut anklciken kann. | ||
| --> | ||
| <h1>Hello there! 👋🏼</h1> | ||
| </body> | ||
| </html> No newline at end of file | ||
| </html> |
There was a problem hiding this comment.
You have two folders with index.html and style.css files, but I figured this one wasn't the right one, so I ignored it.
Comment on lines
1
to
128
| -webkit-font-smoothing: antialiased; | ||
| } | ||
| /* | ||
| 6. Improve media defaults | ||
| */ | ||
| img, | ||
| picture, | ||
| video, | ||
| canvas, | ||
| svg { | ||
| display: block; | ||
| max-width: 100%; | ||
| } | ||
| /* | ||
| 7. Remove built-in form typography styles | ||
| */ | ||
| input, | ||
| button, | ||
| textarea, | ||
| select { | ||
| font: inherit; | ||
| } | ||
| /* | ||
| 8. Avoid text overflows | ||
| */ | ||
| p, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| overflow-wrap: break-word; | ||
| } | ||
| /* | ||
| 9. Create a root stacking context | ||
| */ | ||
| #root, | ||
| #__next { | ||
| isolation: isolate; | ||
| } | ||
| body { | ||
| background-color: lightblue; | ||
| background-color: rgb(255, 255, 255); | ||
| text-align: center; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| color: rgb(70, 69, 69); | ||
| margin: 0; | ||
| } | ||
| p { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-weight: lighter; | ||
| color: rgb(70, 69, 69); | ||
| text-align: center; | ||
| margin: 0 auto; | ||
| max-width: 500px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| color: rgb(70, 69, 69); | ||
| text-align: center; | ||
| } | ||
| .button { | ||
| background-color: antiquewhite; | ||
| border-radius: 10px; | ||
| border: none; | ||
| display: inline-block; | ||
| text-decoration: none; | ||
| padding: 40px 40px; | ||
| font-size: 20px; | ||
| color: rgb(70, 69, 69); | ||
| margin: 10px 10px; | ||
| } | ||
| .kontaktbox { | ||
| background-color: grey; | ||
| text-align: center; | ||
| } | ||
| .hero { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
| .gleitschirmbild { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
| .sitzbankbild { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
| .kontaktbilder { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: auto; | ||
| flex-direction: row; | ||
| size: small; | ||
| } |
There was a problem hiding this comment.
You have two folders with index.html and style.css files, but I figured this one wasn't the right one, so I ignored it.
Comment on lines
+11
to
+12
| <!-- dont forget to add a css file and link it here! --> | ||
| <!-- If you're using google fonts, that should be added here --> |
There was a problem hiding this comment.
Good practice: remove all commented out code.
Comment on lines
+8
to
+10
| <menu> | ||
| <a href="./projekte.html">Projekte</a> | ||
| </menu> |
There was a problem hiding this comment.
Since you shouldn't put content in head, it would be better to move this in the body
| </menu> | ||
| <!-- dont forget to add a css file and link it here! --> | ||
| <!-- If you're using google fonts, that should be added here --> | ||
| <img class="hero" src="../images/Zwischenziel.png" alt="Zwischenziel" /> |
There was a problem hiding this comment.
Same for this image, move it in the body
Comment on lines
+138
to
+152
| .hero { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
| .gleitschirmbild { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
| .sitzbankbild { | ||
| object-fit: cover; | ||
| display: block; | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
Since they all share the same styling, you should have only one class for all of them. You would then follow the DRY (don't repeat yourself) rule, which is quite important in the coding world 💯
| border: none; | ||
| display: inline-block; | ||
| text-decoration: none; | ||
| padding: 40px 40px 40px 40px; |
There was a problem hiding this comment.
If the four values are the same, you can use:
padding: 40px;
| padding: 40px 40px 40px 40px; | ||
| font-size: 20px; | ||
| color: rgb(70, 69, 69); | ||
| margin: 10px 10px; |
There was a problem hiding this comment.
Same here when the values are the same:
margin: 10px;
Comment on lines
+26
to
+30
| <br /> | ||
| <br /> | ||
| </p> | ||
| <br> | ||
| <br> |
There was a problem hiding this comment.
Try setting some margin instead of line breaks if you want to add some whitespace in your page 👍
| @@ -0,0 +1,90 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
The folders structure is a bit confusing, but I understood that the relevant and more recent code what the one in the "project-p1-first-webpage-master" folder, so I reviewed only starting with this file.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I tried to recreate abit the website of my association, that I founded togheter with two friends. the original website of our association "Zwischenziel" is on www.zwischenziel.ch and was made with a cms program.