Beiträge von Robert1609

Robert1609 · 28. Juli 2020

Hm.. viel ist hier nicht los

Robert1609 · 28. Juli 2020

nein irgendwas stimmt da nicht. könntest du vielleicht mal drüber schauen - wenn es nicht zuviel Umstände macht :)...

Robert1609 · 28. Juli 2020

hab es herausgefunden

CSS:

Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* FARBEN

HINTERGRUNDFARBE: #24252A
AKZENTE: #0088A9

*/

* {
    font-family: "poppins", verdana, sans-serif;
    box-sizing: border-box;

}

body {
    background-color: #24252A;
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
}

/* == NAVIGATIONSBAR == */
li, a, button {
    font-family: "Poppins";
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    height: 100vh;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    padding: 8px 30px;
}

.nav_links li a:hover {
    color: red;
}

button {
    padding: 9px 25px;
    background-color: green;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 20px;
}

button:hover {
    background-color: red;
    color: white;
    border: none;
}

/* == NAVIGATIONSBAR ENDE == */

/* HEADER BILD */

.mainheader {
    margin: auto;
}

.mainheader h1 {
    font-family: "Great Vibes", verdana, sans-serif;
    font-size: 100px;
    color: white;
    text-shadow: 1px 1px 7px black;
    margin: 0;

}
.mainheader slogan {
    color: white;
    font-size: 30px;
    font-weight: 100;
    font-variant: small-caps;
    letter-spacing: 1rem;
    float: right;
    
}


/* HEADER BILD ENDE */


/* == BODY INHALT == */
.bodycontent {
    color: white;
    padding: 30px 10%;
    font-weight: 200;
}


/* == BODY INHALT ENDE == */

Alles anzeigen

Robert1609 · 28. Juli 2020

ich hab jetzt in der CSS folgendes umgestellt - jetzt schaut es so aus.. warum?

Code

* {
    font-family: "poppins", verdana, sans-serif;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
}

EDIT:

und irgendwie ist das ganze nicht wirklich horizontal ausgerichtet..

ich bin anfänger

Robert1609 · 28. Juli 2020

perfekt hat geklappt vielen Dank!

Robert1609 · 28. Juli 2020

Hallo,

ich weiß nicht wie ich das machen soll.. bitte um hilfe

ich möchte die page wie auf dem Bild haben.

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="navbar.css">
    <title>Navigationsbar</title>
</head>

<body>



    <!--   HEADER BILD-->
    <div class="headercon">
        <header>
            <!--<img class="logo" src="logo.svg" alt="logo">-->
            <nav>
                <ul class="nav_links">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">SPEISEN</a></li>
                    <li><a href="#">WEINE</a></li>
                    <li><a href="#">RESERVIERUNG</a></li>
                    <li><a href="#">BESTELLUNG</a></li>
                    <li><a href="#">IMPRESSUM</a></li>

                </ul>
            </nav>
            <a class="cta" href="#"><button>Contact</button></a>
        </header>
        <div class="mainheader">
            <h1>Pizzeria Arcobalen</h1>
            <slogan>sentire e vivere l'Italia</slogan>
        </div>
    </div>
    <!--   HEADER BILD ENDE-->
    

    <!--    BODY INHALT -->
    <div class="bodycontent">
        <div class="maincontent">
            <h2>Willkommen in Italien</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint aliquid nam voluptas minima voluptatum odio eligendi, consequatur earum neque consectetur excepturi dolor beatae vero voluptatem praesentium animi magni laudantium ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, harum porro vitae dignissimos, id repudiandae quis odit. Repellendus dolorum reiciendis aliquam perspiciatis commodi veritatis. Reiciendis voluptas, quod rerum veritatis dolor.</p>
        </div>

      
    </div>
    <!--    BODY INHALT ENDE -->





</body>

</html>

Alles anzeigen

CSS

Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* FARBEN

HINTERGRUNDFARBE: #24252A
AKZENTE: #0088A9

*/

* {
    font-family: "poppins", verdana, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #24252A;
}

/* == NAVIGATIONSBAR == */
li, a, button {
    font-family: "Poppins";
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    padding: 8px 30px;
}

.nav_links li a:hover {
    color: red;
}

button {
    padding: 9px 25px;
    background-color: green;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 20px;
}

button:hover {
    background-color: red;
    color: white;
    border: none;
}

/* == NAVIGATIONSBAR ENDE == */

/* HEADER BILD */
.headercon {
    height: 100vh;
}

.mainheader {
    margin: auto;
}

.mainheader h1 {
    font-family: "Great Vibes", verdana, sans-serif;
    font-size: 100px;
    color: white;
    text-shadow: 1px 1px 7px black;

}
.mainheader slogan {
    color: white;
    font-size: 30px;
    font-weight: 100;
    font-variant: small-caps;
    letter-spacing: 1rem;
    
}


/* HEADER BILD ENDE */


/* == BODY INHALT == */
.bodycontent {
    color: white;
    padding: 30px 10%;
    font-weight: 200;
}


/* == BODY INHALT ENDE == */

Alles anzeigen

Beiträge von Robert1609

Landingpage (anfänger)

Landingpage (anfänger)

Landingpage (anfänger)

Landingpage (anfänger)

Landingpage (anfänger)

Landingpage (anfänger)