modul:ffit:css:learningunits:lu01:loesungen:portfolio

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
modul:ffit:css:learningunits:lu01:loesungen:portfolio [2024/09/05 14:28] – angelegt kdemircimodul:ffit:css:learningunits:lu01:loesungen:portfolio [2024/09/12 15:45] (aktuell) – kdemirci
Zeile 1: Zeile 1:
-====== LU01.L01 Portfolio ======+====== LU01.L01 - Portfolio ======
  
 ===== HTML ===== ===== HTML =====
Zeile 41: Zeile 41:
             <p class="lead"><b>Hi!</b> Mein Name ist <b>Kamil Demirci</b>. Schön, dass du auf meine Webseite gelandet bist. Hier findest du Informationen über mich und meine abgeschlossenen Projekte.</p>             <p class="lead"><b>Hi!</b> Mein Name ist <b>Kamil Demirci</b>. Schön, dass du auf meine Webseite gelandet bist. Hier findest du Informationen über mich und meine abgeschlossenen Projekte.</p>
             <div class="button-group">             <div class="button-group">
 +                <a class="button" href="#">Button 1 →</a>
 +                <a class="button" href="#">Button 1 →</a>
 +                <a class="button" href="#">Button 1 →</a>
 +                <a class="button" href="#">Button 1 →</a>
                 <a class="button" href="#">Button 1 →</a>                 <a class="button" href="#">Button 1 →</a>
                 <a class="button" href="#">Button 2 →</a>                 <a class="button" href="#">Button 2 →</a>
Zeile 49: Zeile 53:
         </div>         </div>
     </section>     </section>
 +
 +    <section class="about-me">
 +        <div class="about-me-left">
 +            <h2>Über mich</h2>
 +            <p>Text</p>
 +        </div>
 +        <div class="about-me-right">
 +            <p>HTML</p>
 +            <div class="skill-wrapper">
 +                <div class="skill-inner html">90%</div>
 +            </div>
 +            <p>CSS</p>
 +            <div class="skill-wrapper">
 +                <div class="skill-inner css">80%</div>
 +            </div>
 +            <p>PHP</p>
 +            <div class="skill-wrapper">
 +                <div class="skill-inner php">70%</div>
 +            </div>
 +            <p>JS</p>
 +            <div class="skill-wrapper">
 +                <div class="skill-inner js">50%</div>
 +            </div>
 +        </div>
 +    </section>
 +
 +    <section class="services">
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/80">
 +                <h3>Marketing</h3>
 +                <p>Text</p>
 +            </div>
 +        </div>
 +
 +    </section>
 +
 +    <section class="services">
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +        <div class="services-item">
 +            <div class="services-item-inner">
 +                <img src="https://placehold.it/600">
 +            </div>
 +        </div>
 +    </section>
 +
 </body> </body>
 </html> </html>
Zeile 65: Zeile 174:
     font-family: 'Arial', sans-serif;     font-family: 'Arial', sans-serif;
 } }
 +
 +img {
 +    max-width: 100%;
 +    height: auto;
 +}
 +
 .header { .header {
     display: flex;     display: flex;
Zeile 103: Zeile 218:
 } }
 .lead { font-size: 36px; } .lead { font-size: 36px; }
-.button-group { display: flex; }+.button-group { display: flex; flex-wrap: wrap }
 .button { .button {
     display: block;     display: block;
Zeile 113: Zeile 228:
     margin-right: 15px;     margin-right: 15px;
     box-shadow: 4px 4px 0 lightgray;     box-shadow: 4px 4px 0 lightgray;
 +}
 +
 +.button:hover {
 +    background-color: red;
 +}
 +
 +.button:active {
 +    background-color: blue;
 +}
 +
 +.button:focus {
 +    background-color: yellow;
 +}
 +
 +.button:last-child {
 +    border: 5px solid green;
 +}
 +
 +.button:nth-child(even) {
 +    border: 5px solid yellow;
 +}
 +
 +.button:nth-child(odd) {
 +    border: 5px solid blue;
 +}
 +
 +.about-me {
 +    display: flex;
 +    padding: 30px 50px;
 +    border-bottom: 1px solid lightgray;
 +}
 +
 +.about-me-left, .about-me-right {
 +    width: 50%;
 +}
 +
 +.skill-wrapper {
 +    border: 2px solid black;
 +    box-shadow: 4px 4px 0 lightgray;
 +}
 +
 +.skill-inner {
 +    padding: 15px;
 +    text-align: right;
 +    color: white;
 +}
 +
 +.html {
 +    width: 90%;
 +    background-color: green;
 +}
 +
 +.css {
 +    width: 80%;
 +    background-color: blue;
 +}
 +
 +.php {
 +    width: 70%;
 +    background-color: red;
 +}
 +
 +.js {
 +    width: 50%;
 +    background-color: brown;
 +}
 +
 +.services {
 +    display: flex;
 +    padding: 30px 50px;
 +    border-bottom: 1px solid lightgray;
 +    flex-wrap: wrap;
 +    margin: 0 -15px;
 +}
 +
 +.services-item {
 +    width: 33.33%;
 +    padding: 15px;
 +}
 +
 +.services-item-inner {
 +    padding: 15px;
 +    border: 2px solid black;
 } }
 </code> </code>
  • modul/ffit/css/learningunits/lu01/loesungen/portfolio.1725539306.txt.gz
  • Zuletzt geändert: 2024/09/05 14:28
  • von kdemirci