Untitled

unknown
plain_text
2 years ago
4.7 kB
Indexable
Never
*{
    margin:0;
    padding:0;

}
#text p { 
    position: absolute;
    top: 200px;
}
body{
    background-color: rgb(65, 65, 65);
}
#navbar h1{
    display: flex;
    align-items: center;
    justify-content: center;
    top:2.55em;
    height:10%;
    width:100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    position: relative;
    background-color: rgb(65,65,65);
    color:aqua;
}

#text{
    position: relative;
    height: 100%;
    width: 100%;
    top:5em;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    color:rgb(208, 255, 0);
}
#texth{
    position: relative;
    height: 100%;
    width: 100%;
    top:5em;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    color:rgb(208, 255, 0);
}

#navbarsep{
    position: absolute;
    top:10px;
    height:100px;
    width: 100%;
    background-color: rgb(208, 255, 0);
}
#navbar a{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 32px;
    color: aqua;
    text-decoration: none;
    transition: transform 0.7s ease-out;
}

#navbar a:hover{
    color:rgb(208, 255, 0);
    transform: scale(1.2);
    transition: transform 0.7s;
}

#navbare{
    height: 5em;
    width: 100%;
    position: absolute;
    background-color: rgb(65, 65, 65);
    display:flex;
    justify-content:space-around;
    align-items: center;
}


//PRAKTIKUM.HTML

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="navbar">
        <div id="navbarsep"> <p>-</p> </div>
        <div id="navbare">
            <a href="index.html">Hauptmenü</a>
            <a href="praktikum.html">Praktikum</a>
            
        </div>
        <h1>Praktikum</h1>  
    </div>
    <div id="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis possimus ex exercitationem esse laudantium dolorem, inventore sunt nostrum. Officiis nam beatae ipsam quos eaque autem unde accusantium facere, nihil magnam amet eos in voluptatum adipisci quidem quae tempora eligendi doloribus fugiat! Reprehenderit ipsa, minima officia magnam voluptatibus quia ipsam modi, facilis, necessitatibus voluptatum unde illo maiores consectetur consequatur voluptas? Repudiandae ipsa nobis hic eius! Molestiae ratione molestias similique perferendis at quas earum dolores, explicabo voluptas ipsam. Tenetur, totam enim. Mollitia deserunt doloribus ut ea impedit vel accusamus non quis aperiam eligendi iste modi sequi ipsam numquam voluptatibus est possimus aut aliquid, perferendis deleniti fugit libero ratione! Quas sint dicta voluptate unde accusamus quidem repellendus, quam alias officiis dolorem ipsa, animi, aut vero. Dolores expedita, temporibus optio mollitia consequatur quis ipsa in quisquam. Assumenda laborum dolores debitis laudantium voluptatum veniam asperiores nulla alias, minima labore quis odio facilis. Alias excepturi enim tenetur maiores, repellat aperiam quisquam odit reiciendis distinctio consequatur vel. Facere ratione neque nesciunt laborum illum inventore voluptate deleniti vero corporis rerum molestias magni ipsum unde sunt aut natus, aliquid fuga ullam? Quod labore fugiat dolor deleniti nihil temporibus suscipit, rem officiis maxime voluptatem, ducimus repellat harum! Ipsum, amet nostrum?</div>
    </body>
</html>


//INDEX.HTML
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="navbar">
        <div id="navbarsep"> <p>-</p> </div>
        <div id="navbare">
            <a href="index.html">Hauptmenü</a>
            <a href="praktikum.html">Praktikum</a>
            
        </div>
        <h1>Hauptmenü</h1>  
    </div>
<div id="texth">
    Das ist das Hauptmenü.
</div>
</body>
</html>