Features Fehler

  • Ich brauche mal Eure Hilfe.

    ich bin dabei eine Webseite zu erstellen und habe Probleme Features.


    Ich möchte ein paar Icons hinzufügen und komme nicht weiter.


    Alle stimmt bis ich die Klasse eingebe dann verschwindet auf einmal die linke Spalte(wrapper)


    Suche schon seit Std nach einer Lösung aber komme nicht weiter.


    Bitte um schnelle Hilfe


    hier der html code:


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>Eine erste Seite</title>


    <link rel="stylesheet" type="text/css" href="./vendor/skeleton/normalize.css" />

    <link rel="stylesheet" type="text/css" href="./vendor/skeleton/skeleton.css" />

    <link rel="stylesheet" type="text/css" href="./css/styles.css" />

    <link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,700" rel="stylesheet" />

    <link

    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

    rel="stylesheet"

    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"

    crossorigin="anonymous" />

    </head>

    <body>

    <header class="header">

    <div class="container">

    <div class="header-brand-wrapper">

    <a class="header-brand" href="index.html">ESCAPE</a>

    </div>

    <nav class="header-navbar">

    <ul class="header-navbar-links">

    <li>Home</li>

    <li>Services</li>

    <li>Clients</li>

    <li>Team</li>

    <li>Contact</li>

    </ul>

    </nav>

    </div>

    <div class="container">

    <div class="slogan">

    <div class="slogan-top">

    Können Sie eine Webseite für uns entwickeln?

    </div>

    <div class="slogan-bottom">

    Ja, wir können das!

    </div>

    <button class="solgan-button">

    Mehr erfahren!

    </button>

    </div>

    </div>

    </header>


    <div class="service">

    <div class="container">

    <div class="row">

    <div class="eight columns">

    <h1 class="service-title">Web <strong>Development</strong></h1>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat.

    </p>

    <p>

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

    adipiscing elit.

    </p>

    </div>

    <div class="four columns">

    <div class="service-icon">

    <i class="fa fa-html5" aria-hidden="true"></i>

    </div>

    </div>

    </div>

    </div>

    </div>

    <div class="service service-gray">

    <div class="container">

    <div class="row">

    <div class="four columns">

    <div class="service-icon">

    <i class="fa fa-id-card-o" aria-hidden="true"></i>

    </div>

    </div>

    <div class="eight columns">

    <h1 class="service-title">Identity <strong>Branding</strong></h1>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat.

    </p>

    <p>

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

    adipiscing elit.

    </p>

    </div>

    </div>

    </div>

    </div>

    <div class="features">

    <div class="container">

    <div class="row">

    <div class="six columns">

    <div class="feature-icon">

    </div>

    <div class="six columns">

    2. Spalte

    </div>


    </div>

    </div>

    </body>

    </html>

    ---------------------------------------------------------------------------

    css Code:


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>Eine erste Seite</title>


    <link rel="stylesheet" type="text/css" href="./vendor/skeleton/normalize.css" />

    <link rel="stylesheet" type="text/css" href="./vendor/skeleton/skeleton.css" />

    <link rel="stylesheet" type="text/css" href="./css/styles.css" />

    <link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,700" rel="stylesheet" />

    <link

    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

    rel="stylesheet"

    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"

    crossorigin="anonymous" />

    </head>

    <body>

    <header class="header">

    <div class="container">

    <div class="header-brand-wrapper">

    <a class="header-brand" href="index.html">ESCAPE</a>

    </div>

    <nav class="header-navbar">

    <ul class="header-navbar-links">

    <li>Home</li>

    <li>Services</li>

    <li>Clients</li>

    <li>Team</li>

    <li>Contact</li>

    </ul>

    </nav>

    </div>

    <div class="container">

    <div class="slogan">

    <div class="slogan-top">

    Können Sie eine Webseite für uns entwickeln?

    </div>

    <div class="slogan-bottom">

    Ja, wir können das!

    </div>

    <button class="solgan-button">

    Mehr erfahren!

    </button>

    </div>

    </div>

    </header>


    <div class="service">

    <div class="container">

    <div class="row">

    <div class="eight columns">

    <h1 class="service-title">Web <strong>Development</strong></h1>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat.

    </p>

    <p>

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

    adipiscing elit.

    </p>

    </div>

    <div class="four columns">

    <div class="service-icon">

    <i class="fa fa-html5" aria-hidden="true"></i>

    </div>

    </div>

    </div>

    </div>

    </div>

    <div class="service service-gray">

    <div class="container">

    <div class="row">

    <div class="four columns">

    <div class="service-icon">

    <i class="fa fa-id-card-o" aria-hidden="true"></i>

    </div>

    </div>

    <div class="eight columns">

    <h1 class="service-title">Identity <strong>Branding</strong></h1>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat.

    </p>

    <p>

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

    adipiscing elit.

    </p>

    </div>

    </div>

    </div>

    </div>

    <div class="features">

    <div class="container">

    <div class="row">

    <div class="six columns">

    <div class="feature-icon">

    </div>

    <div class="six columns">

    2. Spalte

    </div>


    </div>

    </div>

    </body>

    </html>

  • Ich hoffe, ich habe das richtig verstanden, was du willst...


    Dein css

    .feature-icon {

    width: 70px;

    high: 70px;

    background-color: black;

    border-radius: 35px;


    }


    Du hast da^ nen Tippfehler...


    Zum Problem: Ganz grob gesagt: Kein min-height oder Inhalt = nix sichtbar