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

project 1 yogadia final #55

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

project 1 yogadia final #55

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04171b8
project 1 yogadia final
Klaudiapalokaj Oct 8, 2022
6affe57
project 3
Klaudiapalokaj Nov 24, 2022
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
21 changes: 21 additions & 0 deletions code/Code/Abos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!--this links css to html-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<a href="./index.html">Home</a>
</head>
<body>
<div class="grey-box">
<h1 class="top-heading">Abos</h1>
<h2 class="second-heading">...</h2>
</div>
<!--this paragraph needs to be adapted-->
<div class="white-box">
</div>
</body>
</html>
Binary file added code/Code/Images/Angebot1.jpg
View file
Open in desktop
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/Code/Images/Angebot2.jpg
View file
Open in desktop
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/Code/Images/Angebot3.jpg
View file
Open in desktop
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/Code/Images/Angebot4.jpg
View file
Open in desktop
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/Code/Images/Angebot5.jpg
View file
Open in desktop
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/Code/Images/DSC_3865.jpg
View file
Open in desktop
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/Code/Images/DSC_6066.jpg
View file
Open in desktop
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/Code/Images/Hero0.jpg
View file
Open in desktop
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/Code/Images/Hero1_v1.jpg
View file
Open in desktop
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/Code/Images/Hero2.jpg
View file
Open in desktop
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/Code/Images/MYK1 2.jpg
View file
Open in desktop
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/Code/Images/Yogadia_Logo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions code/Code/Klassen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!--this links css to html-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<a href="./index.html">Home</a>
</head>
<body>
<div class="grey-box">
<h1 class="top-heading">Yoga in Zug</h1>
<h2 class="second-heading">Starte jetzt deinen Yogakurs</h2>
</div>
<!--this paragraph needs to be adapted-->
<div class="white-box">
<p>Lorem ipsum dolor sit amet, <a href="https://google.com">consetetur</a> sadipscing elitr, amet.</p>

<p>"Ist das Licht des Yoga einmal angezündet, erlischt es nie mehr. Je intensiver du übst, desto heller wird die Flamme leuchten"
(Zitat von B.K.S. Iyengar)</p>
</div>
<a href="https://google.com">Mehr Informationen</a>

<img src="./Images/LYZ3.jpg" alt="Yoga room">
</body>
</html>
21 changes: 21 additions & 0 deletions code/Code/Kontakt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!--this links css to html-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<a href="./index.html">Home</a>
</head>
<body>
<div class="grey-box">
<h1 class="top-heading">Abos</h1>
<h2 class="second-heading">...</h2>
</div>
<!--this paragraph needs to be adapted-->
<div class="white-box">
</div>
</body>
</html>
94 changes: 94 additions & 0 deletions code/Code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<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" />
<!--this links css to html-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<!--NAVIGATION-->
<menu class="menu-parent">
<img src="./Images/Yogadia_Logo.jpg" alt="Logo" class="menu-logo" />

<div class="menu-child 2">
Copy link

Choose a reason for hiding this comment

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

I don't see any class named 2 in your css, so you can remove this 😄

<a href="./Klassen.html">KLASSEN</a>
<a href="./Abos.html">ABOS</a>
<a href="./Über_mich.html">ÜBER MICH</a>
<a href="./Kontakt.html">KONTAKT</a>
</div>
</menu>

<!--HERO-->
<header>
<div class="hero-picture">
<img
src="Images/Hero1_v1.jpg"
alt="Hero"
style="width: 100%; height: 125%"
Copy link

Choose a reason for hiding this comment

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

You could put all images' styling in your css.

/>
<div class="hero-text">
<h1 class="h1">STARTE JETZT DEINE YOGA JOURNEY</h1>
<h2 class="h2">Lorem ipsum dolor sit amet, consectetur adipisici</h2>
<button class="button1">online buchen</button>
</div>
</div>
</header>

<!--BENEFITS-->

<!--ANGEBOT-->
<div class="angebot-titel">
<h1>YOGA ANGEBOT</h1>
</div>

<section class="section1">
<div class="spalte 1">
Copy link

Choose a reason for hiding this comment

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

Again, I'm not sure why you have this here, but class name should be only spalte according to your css (not spalte 1, spalte 2, etc.)

<h2>INDOOR VINYASA YOGA</h2>
<img src="images/Angebot1.jpg" width="350px" height="320px" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy
</p>
<button class="button2">jetzt buchen</button>
</div>

<div class="spalte 2">
<h2>OUTDOOR YOGA</h2>
<img src="images/Angebot4.jpg" width="350px" height="320px" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy
</p>
<button class="button2">jetzt buchen</button>
</div>

<div class="spalte 3">
<h2>YOGA FÜR FIRMEN</h2>
<img src="images/Angebot3.jpg" width="350px" height="320px" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy
</p>
<button class="button2">jetzt buchen</button>
</div>
</section>

<!--ÜBER MICH-->
<section></section>
<section></section>
Comment on lines +80 to +81
Copy link

Choose a reason for hiding this comment

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

I assume you want to add something here eventually, but in the meantime, it would be better to not leave empty tags.


<!--KONTAKT/IMPRESSUMDATENSCHUTZ-->
<footer>
<div class="footer">
<p class="footer-text">
Klaudia Palokaj<br />
<br />
<a href="mailto:yogadia@hotmail.com">yogadia@hotmail.com</a>
</p>
</div>
</footer>
</body>
</html>
151 changes: 151 additions & 0 deletions code/Code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
/***ALLGEMEIN***/
@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");

body {
font-family: "Abel", sans-serif;
color: black;
Copy link

Choose a reason for hiding this comment

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

color: black; is default, so no need to add it here.

margin: 0;
}

/***NAVIGATION***/

.menu-parent {
border: 0px solid transparent;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
Comment on lines +14 to +17
Copy link

Choose a reason for hiding this comment

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

Nice use of flexbox! Did you know that flex-direction: row; is default for flexbox? You could save a line by removing it 😄

}

.menu-logo {
width: 250px;
height: 80px;
}

.menu-child a {
display: inline-block;
padding: 10px 15px;
margin: 0 5px;
text-decoration: none;
background: white;
color: rgb(5, 5, 5);
border-radius: 4px;
}

.menu-child a:hover {
background: rgb(115, 14, 83);
color: white;
}
Comment on lines +35 to +38
Copy link

Choose a reason for hiding this comment

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

Great that you added :hover styling!


/***HERO***/

.hero-picture {
height: 450px;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.hero-text {
text-align: center;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(115, 14, 83);
}

.h1 {
font-size: 30pt;
}

.h2 {
font-size: 15pt;
color: black;
}
Comment on lines +50 to +66
Copy link

Choose a reason for hiding this comment

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

Here you could achieve the same thing (having only the h1 in another color) and save a line of code like this:

.hero-text {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.h1 {
  font-size: 30pt;
  color: rgb(115, 14, 83);
}

.h2 {
  font-size: 15pt;
}


.button1 {
Copy link

Choose a reason for hiding this comment

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

Little trick: you could add this property to all your buttons, so the pointer is the usual one for a button: cursor: pointer;

background-color: rgb(115, 14, 83);
color: rgb(245, 236, 242);
border: none;
height: 40px;
width: 200px;
font-size: 15pt;
border-radius: 4px;
}

.button1:hover {
background-color: white;
Copy link

Choose a reason for hiding this comment

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

Since the background is also white (or almost), it would be better for the eyes to have another color on hover.

color: rgb(115, 14, 83);
}

/***BENEFITS***/

/***ANGEBOT***/

.angebot-titel {
padding: 130px;
height: 30px;
text-align: center;
background-color: weiss;
}

.angebot-titel h1 {
font-size: 35pt;
color: rgb(115, 14, 83);
}

.section1 {
margin: 0, 10px;
display: flex;
height: 550px;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(255, 166, 0, 0.218);
}

.spalte {
margin: 60px 30px;
padding: 10px 30px;
width: 400px;
height: 500px;
background-color: weiss;
text-align: center;
}

.spalte h2 {
font-size: 15pt;
color: black;
}

.button2 {
background-color: rgb(115, 14, 83);
border: none;
color: rgb(245, 236, 242);
height: 40px;
width: 200px;
font-size: 15pt;
border-radius: 4px;
}

.button2:hover {
background-color: white;
color: rgb(115, 14, 83);
}

/***ÜBER MICH***/

/***FOOTER***/
.footer {
background-color: rgb(5, 5, 5);
text-align: center;
margin: 100px solid;
Copy link

Choose a reason for hiding this comment

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

Since margin can't have a solid value, this line has no effect, you can remove it completely.

padding: 50px;
}

.footer-text {
color: white;
text-decoration: none;
}
16 changes: 16 additions & 0 deletions code/Code/Über_mich.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>