9.11 📦Aufgabe: Portfolio Web Site
Erstellen Sie eine Website wie im Video, ändern Sie jedoch die Informationen, wie Ihren Namen und Ihre Skills.
Schritte:
- Kopieren Sie die HTML-Datei, ändern Sie nicht den Namen der Klassen.
- Verwenden Sie die Icons von der fontawesome.com Website. Versuchen Sie, selbst zu recherchieren, wie Sie diese Seite nutzen können.
- Wenn Sie fertig sind, schicken Sie die Seite dem Trainer, auf dem Discord-Server.
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<title></title>
</head>
<body>
<header>
<a href="#" class="logo"></a>
<nav class="navigation">
<a href="#Skills"></a>
<a href="#projects"></a>
<a href="#contact"></a>
</nav>
</header>
<section class="main">
<div>
<h2></h2>
<h3></h3>
<a href="#" class="main-btn"></a>
<div class="social-icons">
<a href="#"><i></i></a>
<a href="#"><i></i></a>
</div>
</div>
<div class="imagecont">
</div>
</section>
<!--
Skilss
-->
<section class="cards" id="Skills">
<H2 class="title"></H2>
<div class="content">
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-brands fa-css3-alt"></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-brands fa-git"></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fa-solid fa-database"></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="more">
<a href="" class="main-btn"></a>
</div>
</section>
<!--
projects
-->
<section class="projects" id="projects">
<h2 class="title"></h2>
<div class="content">
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="">
</div>
<div class="project-info">
<p class="project-category"></p>
<strong class="project-title">
<span></span>
<a href="#" class="more-details"></a>
</strong>
</div>
</div>
</div>
</section>
<!--
contact
-->
<section class="cars-contact" id="contact">
<h2 class="title"></h2>
<div class="content">
<div class="card">
<div class="icon">
<i class="fas fa-phone"></i>
</div>
<div class="info">
<h3></h3>
<p>+</p>
</div>
</div>
<div class="card">
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="info">
<h3></h3>
<p></p>
</div>
</div>
</div>
</section>
<!--
fotter
-->
<footer class="footer">
<p class="footer-tittle">Copyrights @ <span></span></p>
<div class="social-icons">
<a href="#"><i></i></a>
<a href="#"><i></i></a>
</div>
</footer>
</body>
</html>