91 lines
2.9 KiB
HTML
91 lines
2.9 KiB
HTML
<!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> |