Landingpage (anfänger)

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

basti1012 · 28. Juli 2020

Das sieht ja schon fast so aus.

verschieb dein </header> mal hier vor

Dann hast du es fast geschaft.

Den rest bekommst du dann bestimmt hin.

EDIT:

dein Container <div class="headercon">

kannst du eigentlich weg lassen ( bei der jetzigen Version ) , das height:100vh kann auch der <header> übernehmen

Robert1609 · 28. Juli 2020

perfekt hat geklappt vielen Dank!

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

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

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

Robert1609 · 28. Juli 2020

Hm.. viel ist hier nicht los

basti1012 · 28. Juli 2020

Zitat von Robert1609

Hm.. viel ist hier nicht los

man kann ja auch nicht 24/7 hier an Pc sitzen.

Aber ja ich kucke mal

basti1012 · 28. Juli 2020

Wenn ich DEINEN Code bei Codepen reinkopiere

* Link entfernt, weil existiert nicht mehr *

Sieht das so aus.

Was soll da den geändert werden?

Und Dein Code aus Post 4# geht ja gar nicht

Code

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

die ersten beiden Zeilen sind ok , aber 3,4,5 auf allen Elementen anzuwenden kann nur schiefgehen

Landingpage (anfänger)

Jetzt mitmachen!

Teilen

Tags