projects_college
/
GIS-2020-SoSe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload Aufgabe 03

This commit is contained in:
Justin Dretvic 2020-05-15 16:58:46 +02:00
parent fd8c29bc92
commit 19a14226fb
21 changed files with 726 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
Aufgaben/Aufgabe_03_2020-05-13/about_me.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="about_me.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> About Me </title>
<meta charset="UTF-8">
</head>
<body>
<svg width="650" height="160">
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
<text fill="#ffffff" font-size="50" x="200" y="60"> A B O U T </text>
<text fill="#ffffff" font-size="50" x="260" y="110"> M E </text>
</svg>
<div class="navigation">
<ul>
<li>
<a href="about_me.html" class="active"> About Me! </a>
</li>
<li>
<a href="contact.html"> Contact </a>
</li>
<li>
<a href="portfolio.html"> Portfolio </a>
</li>
</ul>
</div>
<div class="achthundert">
<div>
<p id="dollar"> Here you get ( o-o)~[ 20&#x20AC; ] </p>
<p id="aplus"> Now you HAVE TO get me an A++ (ò-ó) </p>
</div>
<div id="heading">
<h1> This is real, this is me</h1>
<h2> This is exactly, where I'm supposed to be ♫ </h2>
</div>
<div id="pokemon">
<h4> I'm a D I G I M O N </h4>
<a href="https://wallpaperaccess.com/full/31008.jpg">
<img src="files/pokeball.png" alt="pokeball" width="200" height="240" />
</a>
<div>
<label>Süß, oder?</label>
<input type="checkbox">
</div>
</div>
<table>
<tr>
<th> WHICH </th>
<th> ONE </th>
<th> AM </th>
<th> I? </th>
</tr>
<tr>
<td class="eagle"> <embed class="eagle" src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
</tr>
<tr>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
<td id="peep"> <embed src="files/robin-redbreast-in-tree-5038867_640.jpg" type="image/jpeg" width="100"
height="100"> </td>
<td class="eagle"> <embed src="files/eagle.jpg" type="image/jpeg" width="100" height="100"> </td>
</tr>
</table> <br>
<div id="kasten_außen">
<div class="kasten">
Quick Mafs! <br>
<code>
x = 5; <br>
y = 3; <br>
x + y = 8;
</code>
</div>
<div class="kasten">
<ol>
<li> Ich kann schon </li>
<li> den Zahlenbereich </li>
<li> von 1 bis 20 </li>
</ol>
</div>
</div>
<div id="dozent">
<p> Ich saß zu viele Stunden an der Aufgabe, irgendwann hab ich das Design nur noch sehr einfach gehalten.
Bitte
vergebt mir, Eure Dozentheit! :c</p>
</div>
</div>
<footer>
<div>
<p> Dieser Inhalt steht in einem footer! </p>
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
<p> Alle Bilder, die keine Logos sind, wurden von
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
<div class="second_nav">
<a href=""> <i class="fa fa-facebook-square"></i> </a>
<a href=""> <i class="fa fa-instagram"></i> </a>
<a href=""> <i class="fa fa-envelope"></i> </a>
<a href=""> <i class="fa fa-xing"></i> </a>
</div>
</div>
</footer>
</body>
</html>

89
Aufgaben/Aufgabe_03_2020-05-13/basic.css Normal file
View File

@ -0,0 +1,89 @@
p,a,h1,h2,h3,h4,h5,h6{
font-family: sans-serif;
}
body {
background-image: url(bg.png);
background-color: #03396c;
margin: 0;
}
footer {
position: relative;
bottom: 0;
width: 100% ;
background-color: #005b96;
padding: 30px 20px;
text-align: center;
border-top: solid #011f4b;
}
footer a {
text-decoration: none ;
color: black;
}
a {
text-decoration: none;
}
svg {
margin: 0px 30px 10px;
}
svg text {
color: transparent;
}
.navigation ul {
list-style-type: none;
position: fixed;
top: 0;
width: 240px;
background-color: #005b96;
margin: 0px 0px 0px 80%;
padding: 0px 5px;
align-items: center;
border: solid #011f4b;
border-radius: 0px 0px 15px 15px;
}
.navigation li {
float: left;
}
.navigation a.active {
color: #011f4b;
font-weight: bold;
}
.navigation a {
display: block;
color: white;
padding: 4px 6px;
}
.navigation a:hover {
color: #00cc00;
}
.achthundert {
width: 800px ;
margin: 0px auto;
padding: 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.second_nav a {
text-decoration: none;
font-size: 30px;
color: black;
}
.second_nav a :hover{
color: white;
}

BIN
Aufgaben/Aufgabe_03_2020-05-13/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 B

72
Aufgaben/Aufgabe_03_2020-05-13/contact.css Normal file
View File

@ -0,0 +1,72 @@
.socialMedia {
display: grid;
grid-template-columns: 65% 30%;
column-gap: 5%;
margin: 20px 0px 0px 0px;
padding: 20px;
background-color: #005b96;
border: solid #011f4b;
border-radius: 15px;
width: 80%;
text-align: center;
}
.contact_me {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px 0px 20px 0px;
padding: 20px;
background-color: #005b96;
border: solid #011f4b;
border-radius: 15px;
width: 80%;
}
.contact_me form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.contact_me input, textarea{
margin: 2px 0px 5px;
}
.socialMediaText h1 {
font-size: 50px;
margin: 10px 0px;
}
.socialMediaText p {
margin: 2px 0px;
}
.socialMediaText{
margin: auto;
}
.socialMedia i {
margin: auto;
}
.socialMedia a :hover{
color: white;
}
.socialMedia a {
text-decoration: none ;
color: black;
}
#extra {
font-size: 10px;
color: lightgrey;
}
#extra a {
text-decoration: underline;
color: lightgrey;
}

116
Aufgaben/Aufgabe_03_2020-05-13/contact.html Normal file
View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Contact </title>
<meta charset="UTF-8">
</head>
<body>
<header>
<div class="navigation">
<ul>
<li>
<a href="about_me.html"> About Me! </a>
</li>
<li>
<a href="contact.html" class="active"> Contact </a>
</li>
<li>
<a href="portfolio.html"> Portfolio </a>
</li>
</ul>
</div>
<svg width="650" height="160">
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
<text fill="#ffffff" font-size="40" x="200" y="70"> C O N T A C T </text>
</svg>
</header>
<div class="achthundert">
<div class="socialMedia">
<div class="socialMediaText">
<h1> Facebook </h1>
<h2> Justin Dretvic </h2>
</div>
<a href="https://www.facebook.com/justin.dretvic.1">
<i class="fa fa-facebook-square" style="font-size:150px"></i>
</a>
</div>
<div class="socialMedia">
<div class="socialMediaText">
<h1> Instagram </h1>
<h2> @justin_da_ghost </h2>
</div>
<a href="https://www.instagram.com/justin_da_ghost/">
<i class="fa fa-instagram" style="font-size:150px"></i>
</a>
</div>
<div class="socialMedia">
<div class="socialMediaText">
<h1> Xing </h1>
<h2> Justin Dretvic </h2>
</div>
<a href="https://www.xing.com/profile/Justin_Dretvic/cv">
<i class="fa fa-xing" style="font-size:150px"></i>
</a>
</div>
<div class="socialMedia">
<div class="socialMediaText">
<h1> E-Mail </h1>
<h2> Justin.Dretvic@hs-furtwangen.de </h2>
</div>
<a href="mailto:Justin.Dretvic@hs-furtwangen.de">
<i class="fa fa-envelope" style="font-size:150px"></i>
</a>
</div>
<div class="contact_me">
<h1>Kontaktiere mich doch!</h1>
<form>
<input type="text" placeholder="Vorname">
<input type="text" placeholder="Nachname">
<input type="text" placeholder="E-Mail">
<textarea id="textInput" placeholder="Nachricht"></textarea>
<p id="extra">Mit Absenden der Nachricht bestätige ich <br>den <a href="files/leertext.pdf">Datenschutz</a></p>
<input type="submit" onclick="alert('Ihre Nachricht wurde verschickt')">
</form>
</div>
<!-- <div class="quick_tip">
<p> Look for stuff py pressing <kbd>Ctrl + F</kbd> </p>
<p> Hier ist eine <a href="files/leertext.pdf">PDF</a> mit Leertext verlinkt! </p>
</div> -->
</div>
<footer>
<div>
<p> Dieser Inhalt steht in einem footer! </p>
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
<p> Alle Bilder, die keine Logos sind, wurden von
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
<div class="second_nav">
<a href=""> <i class="fa fa-facebook-square"></i> </a>
<a href=""> <i class="fa fa-instagram"></i> </a>
<a href=""> <i class="fa fa-envelope"></i> </a>
<a href=""> <i class="fa fa-xing"></i> </a>
</div>
</div>
</footer>
</body>
</html>

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/Battle_Cry_High_Pitch.mp3 Normal file
View File

Binary file not shown.

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/eagle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/f_logo_RGB-Blue_58.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/fb_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/freedom.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 901 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/glyph-logo_May2016.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/insta_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/leertext.pdf Normal file
View File

Binary file not shown.

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/pokeball.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/pokemon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/robin-redbreast-in-tree-5038867_640.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
Aufgaben/Aufgabe_03_2020-05-13/files/title.mp3 Normal file
View File

Binary file not shown.

68
Aufgaben/Aufgabe_03_2020-05-13/portfolio.css Normal file
View File

@ -0,0 +1,68 @@
.containment {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
#youtube {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 99%;
height: 100%;
border: solid #011f4b;
}
h1, h3{
border: solid #011f4b;
border-radius: 30px;
padding: 10px;
background-color: #005b96;
color: white
}
#anchor_tag {
text-decoration: none;
color: black;
border: dotted #011f4b;
background-color: #b3cde0;
padding: 5px;
}
#button {
color: #011f4b;
font-weight: bold;
background-color: #b3cde0;
padding: 5px;
margin: 25px 0px 10px;
}
#audio {
display: flex;
flex-direction: column;
align-items: center ;
background-color: #005b96;
border: solid #011f4b;
border-radius: 100px;
color: white;
margin: 30px 0px 30px;
padding: 30px;
}
#audio audio {
border: solid #03396c;
border-radius: 100px;
margin-top: 10px;
}
#audio p {
margin: 2px
}
span {
color: red;
font-weight: bolder;
}

91
Aufgaben/Aufgabe_03_2020-05-13/portfolio.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Portfolio </title>
<meta charset="UTF-8">
</head>
<body>
<header>
<svg width="650" height="160">
<ellipse cx="325" cy="0" rx="300" ry="150" stroke="#011f4b" stroke-width="5" fill="#005b96" />
<text fill="#ffffff" font-size="50" x="140" y="70"> P O R T F O L I O </text>
</svg>
<div class="navigation">
<ul>
<li>
<a href="about_me.html"> About Me! </a>
</li>
<li>
<a href="contact.html"> Contact </a>
</li>
<li>
<a href="portfolio.html" class="active"> Portfolio </a>
</li>
</ul>
</div>
</header>
<div class="achthundert">
<h1> Willkommen auf meiner Website</h1>
<h3> Die Website zeigt Ihnen ein paar HTML-Tags </h3>
<h5> <del> Ich hab jetzt schon 3 HTML-Elemente </del> </h5>
<a id="anchor_tag" href="#anchor"> Don't click on me </a> <br><br>
<div>
<label><span>So</span> wurden Farben früher in HTML verwendet: </label>
<input type="color">
</div>
<button id="button"> Sinnloser Button. ACHTUNG! SINNLOS!!! </button> <br><br>
<div class="containment">
<iframe id="youtube" src="https://www.youtube.com/embed/-8SY-1f6xn0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe> <br><br>
</div>
<div id="audio">
<p> Don't you dare pressing on the play-button!</p>
<p> I warned you! </p>
<audio controls id="anchor">
<source src="files/Battle_Cry_High_Pitch.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio> <br>
</div>
</div>
<footer>
<div>
<p> Dieser Inhalt steht in einem footer! </p>
<p> Jegliche Inhalte werden nicht monetär verwendet! </p>
<p> Alle Bilder, die keine Logos sind, wurden von
<a href="https://pixabay.com/de/"> Pixabay</a> bezogen </p>
<div class="second_nav">
<a href=""> <i class="fa fa-facebook-square"></i> </a>
<a href=""> <i class="fa fa-instagram"></i> </a>
<a href=""> <i class="fa fa-envelope"></i> </a>
<a href=""> <i class="fa fa-xing"></i> </a>
</div>
</div>
</footer>
</body>
</html>

161
Aufgaben/Aufgabe_03_2020-05-13/tags_used.html Normal file
View File

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title> used tags </title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<th> tag </th>
<th> Nutzen</th>
<th> portfolio </th>
<th> About_me </th>
<th> contact </th>
</tr>
<tr>
<td> &lt;h1–6&gt; </td>
<td> header </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;p&gt; </td>
<td> paragraph</td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;del&gt; </td>
<td> deleted </td>
<td> [X]</td>
<td> [ ]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;a&gt; </td>
<td> anchor </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;ul&gt; </td>
<td> unordered list </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;ol&gt; </td>
<td> ordered list </td>
<td> [ ]</td>
<td> [X]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;div&gt; </td>
<td> Container </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;table&gt; </td>
<td> Tabelle </td>
<td> [ ]</td>
<td> [X]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;code&gt; </td>
<td> code-block</td>
<td> [ ]</td>
<td> [X]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;img&gt; </td>
<td> image </td>
<td> [ ]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;button&gt; </td>
<td> button </td>
<td> [X]</td>
<td> [ ]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;iframe&gt; </td>
<td> iframe </td>
<td> [X]</td>
<td> [ ]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;audio&gt; </td>
<td> audio control </td>
<td> [X]</td>
<td> [ ]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;br&gt; </td>
<td> break </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;embed&gt; </td>
<td> embed </td>
<td> [ ]</td>
<td> [X]</td>
<td> [ ]</td>
</tr>
<tr>
<td> &lt;label&gt; </td>
<td> label </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;input&gt; </td>
<td> input </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;footer&gt; </td>
<td> footer </td>
<td> [ ]</td>
<td> [ ]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;blockquote&gt; </td>
<td> blockquote </td>
<td> [ ]</td>
<td> [ ]</td>
<td> [X]</td>
</tr>
<tr>
<td> &lt;b&gt; </td>
<td> </td>
<td> [X]</td>
<td> [X]</td>
<td> [X]</td>
</tr>
</table>
</body>
</html>

2
Steckbrief/steckbrief.htm
View File

@ -14,9 +14,11 @@ body {
<body>
<!-- Hier die Links zu den gelösten Aufgaben einstellen, aktuelle oben, alte stehen lassen! Format: Aufgabenbezeichnung, Datum -->
<a href="https://github.com/YamiDesu/GIS-SoSe-2020/issues" taget="_blank"> Github Reposiroty → Issues <br> </a>
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html" target="_blank"> Aufgabe_03_2020-05-13 <br> </a>
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/portfolio.html" target="_blank"> Aufgabe_02_2020-05-06 </a> &
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_02_2020-05-06/tags_used.html" target="_blank"> tags_used <br> </a>
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_01_2020-04-29/index.html" target="_blank"> Aufgabe_01_2020-04-29 <br> </a>
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_00_2020-04-22/index.html" target="_blank"> Aufgabe_00_2020-04-22 <br> </a>
</body>
</html>