-
Notifications
You must be signed in to change notification settings - Fork 91
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
created first project #52
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,18 +4,35 @@ | |
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Project Name</title> | ||
<!-- dont forget to add a css file and link it here! --> | ||
<!-- If you're using google fonts, that should be added here --> | ||
<title>JO Gommiswald</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"/> | ||
<style> | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); | ||
</style> | ||
</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"> | ||
|
||
--> | ||
<h1>Hello there! 👋🏼</h1> | ||
<nav> | ||
<div class="dropdown"> | ||
<a class="drop white" href="./index.html">NACHWUCHS <i class="arrow down"></i></a> | ||
<div class="dropdown-content"> | ||
<a class="white" href="./jo.html">JO</a><br> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are some other ways to ensure all your |
||
<a class="white" href="./piccolo.html">PICCOLO</a> | ||
<a class="white" href="./turnen.html">TURNEN</a> | ||
</div> | ||
</div> | ||
<a class="white" href="./termine.html">TERMINE</a> | ||
<a class="white" href="./kontakt.html">KONTAKT</a> | ||
</nav> | ||
<header id="titel"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since it's standard to use class names more than id for styling purposes, here you could use instead |
||
<h1>JO GOMMISWALD</h1> | ||
</header> | ||
<div class="about"> | ||
<p>Die JO Gommiswald vermittelt den Kindern im Alter von 4 - 15 Jahren die Freude am Schneesport. | ||
Wir bieten Ski und Snowboard als Breiten- und Rennsport sowie ein Konditionstraining an. | ||
Von 4 - 7 Jahren gehen die Kinder in die Piccolo. Ab 7 Jahren gehören sie der JO an.</p> | ||
</div> | ||
<footer> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good use of the |
||
<p>@ Skiclub Gommiswald</p> | ||
</footer> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,46 @@ | ||||||||||||||||||||||
<!DOCTYPE html> | ||||||||||||||||||||||
<html> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<head> | ||||||||||||||||||||||
<meta charset="utf-8" /> | ||||||||||||||||||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||||||||||||||||||||
<title>JO Gommiswald</title> | ||||||||||||||||||||||
<link rel="stylesheet" type="text/css" href="style.css"/> | ||||||||||||||||||||||
<style> | ||||||||||||||||||||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); | ||||||||||||||||||||||
</style> | ||||||||||||||||||||||
</head> | ||||||||||||||||||||||
<body> | ||||||||||||||||||||||
<nav> | ||||||||||||||||||||||
<div class="dropdown"> | ||||||||||||||||||||||
<a class="drop white" href="./index.html">NACHWUCHS <i class="arrow down"></i></a> | ||||||||||||||||||||||
<div class="dropdown-content"> | ||||||||||||||||||||||
<a class="white" href="./jo.html">JO</a><br> | ||||||||||||||||||||||
<a class="white" href="./piccolo.html">PICCOLO</a> | ||||||||||||||||||||||
<a class="white" href="./turnen.html">TURNEN</a> | ||||||||||||||||||||||
</div> | ||||||||||||||||||||||
</div> | ||||||||||||||||||||||
<a class="white" href="./termine.html">TERMINE</a> | ||||||||||||||||||||||
<a class="white" href="./kontakt.html">KONTAKT</a> | ||||||||||||||||||||||
</nav> | ||||||||||||||||||||||
<header> | ||||||||||||||||||||||
<h2>JO</h2> | ||||||||||||||||||||||
</header> | ||||||||||||||||||||||
<div class="about"> | ||||||||||||||||||||||
<img src="./images/jo.jpeg"> | ||||||||||||||||||||||
<p>Die JO unterteilt sich in folgende Gruppen:<br><br> | ||||||||||||||||||||||
Ski Fungruppe: Teilnahme an den Trainings-, sowie am LinthCUP- und Clubrennen<br><br> | ||||||||||||||||||||||
Ski Funracegruppe: Teilnahme an den Trainings, an allen LinthCUP- und Clubrennen<br><br> | ||||||||||||||||||||||
Ski Renngruppe: Teilnahme an den Trainings, Lizenz- oder Animationsrennen, inklusive LinthCUP- und Clubrennen, | ||||||||||||||||||||||
Teilnahme am Trainingslager im Herbst und an den Trainingsweekends erwünscht<br><br> | ||||||||||||||||||||||
Snowboard: Für Kinder, die selbständig Snowboardfahren können und weiter an ihrer Fahrtechnik arbeiten möchten</p> | ||||||||||||||||||||||
</div> | ||||||||||||||||||||||
<div class="coach"> | ||||||||||||||||||||||
<p><img src="./images/urs.jpeg" style="width:80px;height:80px;"> | ||||||||||||||||||||||
Ansprechsperson:<br><a class="black" href="./kontakt.html">Urs Kaufmann</a></p> | ||||||||||||||||||||||
Comment on lines
+39
to
+40
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
You could improve the readability here by changing line for each tag (with proper indentation). |
||||||||||||||||||||||
</div> | ||||||||||||||||||||||
<footer> | ||||||||||||||||||||||
<p>@ Skiclub Gommiswald</p> | ||||||||||||||||||||||
</footer> | ||||||||||||||||||||||
</body> | ||||||||||||||||||||||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>JO Gommiswald</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"/> | ||
<style> | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); | ||
</style> | ||
</head> | ||
<body> | ||
<nav> | ||
<div class="dropdown"> | ||
<a class="drop white" href="./index.html">NACHWUCHS <i class="arrow down"></i></a> | ||
<div class="dropdown-content"> | ||
<a class="white" href="./jo.html">JO</a><br> | ||
<a class="white" href="./piccolo.html">PICCOLO</a> | ||
<a class="white" href="./turnen.html">TURNEN</a> | ||
</div> | ||
</div> | ||
<a class="white" href="./termine.html">TERMINE</a> | ||
<a class="white" href="./kontakt.html">KONTAKT</a> | ||
</nav> | ||
<header> | ||
<h2>Kontakt</h2> | ||
</header> | ||
<section class="kontakt"> | ||
<div class="name"> | ||
<p>Urs Kaufmann</p> | ||
<a href="mailto:simone.stillhard@gmail.com">MAIL</a> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well done with the |
||
<p>Telefon: *****</p> | ||
</div> | ||
<div class="name"> | ||
<p>Jérôme Stillhard</p> | ||
<a href="mailto:simone.stillhard@gmail.com">MAIL</a> | ||
<p>Telefon: *****</p> | ||
</div> | ||
<div class="name"> | ||
<p>Lisa Mattes</p> | ||
<a href="mailto:simone.stillhard@gmail.com">MAIL</a> | ||
<p>Telefon: *****</p> | ||
</div> | ||
</section> | ||
<footer> | ||
<p>@ Skiclub Gommiswald</p> | ||
</footer> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>JO Gommiswald</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"/> | ||
<style> | ||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); | ||
</style> | ||
</head> | ||
<body> | ||
<nav> | ||
<div class="dropdown"> | ||
<a class="drop white" href="./index.html">NACHWUCHS <i class="arrow down"></i></a> | ||
<div class="dropdown-content"> | ||
<a class="white" href="./jo.html">JO</a><br> | ||
<a class="white" href="./piccolo.html">PICCOLO</a> | ||
<a class="white" href="./turnen.html">TURNEN</a> | ||
</div> | ||
</div> | ||
<a class="white" href="./termine.html">TERMINE</a> | ||
<a class="white" href="./kontakt.html">KONTAKT</a> | ||
</nav> | ||
<header> | ||
<h2>Piccolo</h2> | ||
</header> | ||
<div class="about"> | ||
<img src="./images/piccolo.jpeg"> | ||
<p>Das Piccoloteam gibt den Kindern die Gelegenheit, | ||
den spielerischen Umgang mit den Skis zu üben. | ||
Dieses Angebot gilt für alle, ob Anfänger oder kleine Rennfahrer, | ||
auch für Nichtmitglieder des Skiclub.</p> | ||
<p>Das Piccolo-Lied, gesungen von der 2. Klasse von Mirco Büsser in Eschenbach<br><br> | ||
<audio controls> | ||
<source src="./images/clublied.mp3" type="audio/mpeg"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice addition with the mp3! 🔥 |
||
</audio> | ||
</p> | ||
</div> | ||
<div class="coach"> | ||
<p><img src="./images/jerome.jpeg" style="width:80px;height:80px;"> | ||
Ansprechsperson:<br><a class="black" href="./kontakt.html">Jérôme Stillhard</a></p> | ||
</div> | ||
<footer> | ||
<p>@ Skiclub Gommiswald</p> | ||
</footer> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,125 @@ | ||
/* Here in the css file you'll write your styling. make sure to link the css file to the html file. If it's linked correctly you should see a light blue background. */ | ||
|
||
body { | ||
background-color: lightblue; | ||
font-family: 'Roboto', Verdana, Calibri, sans-serif; | ||
font-size: 14px; | ||
margin: 0; | ||
} | ||
|
||
h1, h2 { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great that you avoided here to repeat the same code twice for two tags! It's always good to keep our code DRY (don't repeat yourself). You could also give them a class name and it would do the same. |
||
font-family: 'Segoe UI', Verdana, Calibri, sans-serif; | ||
font-size: 50px; | ||
text-align: center; | ||
margin: 0; | ||
} | ||
|
||
a.black:link, a.black:visited { | ||
color: black; | ||
text-decoration: underline; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
a.white:link, a.white:visited { | ||
color: whitesmoke; | ||
text-decoration: none; | ||
} | ||
|
||
#titel { | ||
background-image: url(./images/gruppe.jpeg); | ||
background-size: cover; | ||
height: 600px; | ||
} | ||
h1 { | ||
color: rgb(22, 22, 76); | ||
padding: 15px; | ||
} | ||
|
||
header { | ||
background-color: rgb(38, 62, 168); | ||
padding: 10px; | ||
} | ||
h2 { | ||
color: whitesmoke; | ||
} | ||
|
||
nav { | ||
padding-top: 20px; | ||
padding-right: 40px; | ||
Comment on lines
+42
to
+43
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There's a shorthand allowing to right it on one line: |
||
background-color: rgb(38, 62, 168); | ||
text-align: right; | ||
word-spacing: 8px; | ||
font-size: 16px; | ||
} | ||
.arrow { | ||
border: solid whitesmoke; | ||
border-width: 0 1px 1px 0; | ||
display: inline-block; | ||
padding: 3px; | ||
transform: rotate(45deg); | ||
-webkit-transform: rotate(45deg); | ||
Comment on lines
+50
to
+55
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice job with the arrow 🔽 |
||
} | ||
|
||
.drop { | ||
border: none; | ||
} | ||
.dropdown { | ||
position: relative; | ||
display: inline-block; | ||
} | ||
.dropdown-content { | ||
display: none; | ||
position: absolute; | ||
min-width: 100px; | ||
text-align: center; | ||
background-color: rgb(38, 62, 168); | ||
width: 100%; | ||
z-index: 1; | ||
} | ||
.dropdown-content a { | ||
font-size: 16px; | ||
} | ||
.dropdown:hover .dropdown-content { | ||
display: block; | ||
} | ||
|
||
.about { | ||
margin-left: 100px; | ||
margin-right: 100px; | ||
Comment on lines
+82
to
+83
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same shorthand as for padding here: |
||
} | ||
.about img { | ||
width: 100%; | ||
} | ||
|
||
.coach { | ||
display: flex; | ||
margin: 30px 100px; | ||
} | ||
.coach img { | ||
float: right; | ||
object-fit: cover; | ||
border-radius: 50%; | ||
} | ||
|
||
table { | ||
width: 100%; | ||
border-collapse: collapse; | ||
} | ||
th, td { | ||
font-size: 18px; | ||
text-align: left; | ||
padding: 40px; | ||
border-bottom: solid black; | ||
} | ||
|
||
.kontakt { | ||
display: flex; | ||
height: 500px; | ||
} | ||
.name { | ||
display: flex; | ||
flex-direction: column; | ||
padding: 50px; | ||
} | ||
|
||
footer { | ||
background-color: rgb(38, 62, 168); | ||
color: whitesmoke; | ||
margin: 0; | ||
padding: 7px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice to have some goals to improve further your website! 😄