Durchschimmernder Text

HTML/CSS :: Aufgabe #11

1 Lösung

Anfänger - HTML/CSS von Luigi - 19.11.2020 um 13:54 Uhr

Schreibe einen Text mit einem geschlossenen Zeilenfall (Blocksatz) mit einem umliegenden roten Rahmen. Der Text hat einen Abstand vom Rahmen von ca. 10 Pixel. In diesem Text sind Wörter unterstrichen, fett und kursiv geschrieben. Lege auf den Text eine hellblaue Kachel, durch diese Kachel schimmert der Text durch.

Zum besseren Verständnis ein Bild im Anhang!

Es ist darauf zu achten, das das Stylesheet in dem HTML eingebettet ist!

Viel Spaß!

Bitte melden Sie sich an um zur Aufgabenbeschreibung eine Frage zu stellen.

Frage stellen

Bitte melden Sie sich an um eine Lösung einzureichen.

Lösung einreichen

Lösungen:

von thet1983 (800 Punkte) - 08.07.2021 um 11:48 Uhr

HTML-Code

<!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">
    <meta name="author" content="thet1983">
    <title>Train HTML #11</title>
    <!-- CSS STYLE START -->
    <style>
        
    html,body{
        scroll-behavior: smooth;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    

    .wrapper {
        position: relative;
        height: fit-content;
        margin: 10% auto;

    }
    
    .opacity {
        position: fixed;
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        background-color: rgb(204, 220, 253);
        opacity: 0.9;
    }
    

    </style>
    <!-- CSS STYLE END -->
</head>
<body>
    <div class="wrapper">
        <blockquote>
            Lorem ipsum <strong>dolor</strong> sit amet consectetur adipisicing elit. <em>Blanditiis</em> ad non obcaecati exercitationem deserunt itaque harum omnis <u>consectetur</u> impedit mollitia, dignissimos natus recusandae voluptatem illum <small>laboriosam</small> libero consequuntur fuga fugit!
        </blockquote>
        <div class="opacity"> </div>
    </div>
    
</body>
</html>

Bitte melden Sie sich an um eine Kommentar zu schreiben.

Kommentar schreiben