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

created first project #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
10 changes: 4 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
# Project Name
# Project JO Gommiswald

Replace this readme with your own information about your project.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
It's the webpage of our Skiclub. We train kids in skiing and we use the webpage mainly for organization with the parents.

## The problem

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
The tab 'Termine' is supposed to be interactive and with some links, but I havn't been able to do that yet.
Also, I would like to add a registration form in 'Kontakt' and of course the real adresses.
Comment on lines +6 to +7

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! 😄


## View it live

Expand Down
Binary file added code/images/clublied.mp3
Binary file not shown.
Binary file added code/images/gruppe.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/jerome.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/jo.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/lisa.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/piccolo.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/turnen.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added code/images/urs.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 28 additions & 11 deletions code/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Choose a reason for hiding this comment

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

There are some other ways to ensure all your a tags here end up on different lines (wrapping each of them in a div for example).

<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">

Choose a reason for hiding this comment

The 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 class="titel" (and .titel instead of #titel in css)

<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>

Choose a reason for hiding this comment

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

Good use of the header and footer tags!

<p>@ Skiclub Gommiswald</p>
</footer>
</body>
</html>
46 changes: 46 additions & 0 deletions code/jo.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

Choose a reason for hiding this comment

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

Suggested change
<p><img src="./images/urs.jpeg" style="width:80px;height:80px;">
Ansprechsperson:<br><a class="black" href="./kontakt.html">Urs Kaufmann</a></p>
<p>
<img src="./images/urs.jpeg" style="width:80px;height:80px;">
Ansprechsperson:
<br>
<a class="black" href="./kontakt.html">
Urs Kaufmann
</a>
</p>

You could improve the readability here by changing line for each tag (with proper indentation).

</div>
<footer>
<p>@ Skiclub Gommiswald</p>
</footer>
</body>
</html>
50 changes: 50 additions & 0 deletions code/kontakt.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>

Choose a reason for hiding this comment

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

Well done with the mailto: 👍

<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>
49 changes: 49 additions & 0 deletions code/piccolo.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">

Choose a reason for hiding this comment

The 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>
126 changes: 123 additions & 3 deletions code/style.css
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 {

Choose a reason for hiding this comment

The 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.
Side note: h1 is usually bigger than h2 (just food for thoughts 😄 ).

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;

Choose a reason for hiding this comment

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

text-decoration: underline; is default behaviour for a tag, so you can remove that line.

}
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

Choose a reason for hiding this comment

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

There's a shorthand allowing to right it on one line:
padding: 20px 40px 0 0; (the four values are from top to left in clockwise order)

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

Choose a reason for hiding this comment

The 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

Choose a reason for hiding this comment

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

Same shorthand as for padding here:
margin: 0 100px 0 100px;
But it can even be shorter when top/bottom and left/right are the same:
margin: 0 100px;

}
.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;
}
Loading