Features Fehler

paradiesvogel24 · #1 (**permalink**) 05.10.2017, 11:51

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

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>

Code:

body {
    font-family: 'Muli', sans-serif;
} 

	/**
	* Header-Bereich
	*/

.header {
    height: 620px;
    background-image: url("../img/header-background-edited.jpg");
    background-size: cover;
    background-position: 50% 62%;
}

.header-navbar-links {
    color: white;
    float: right;
    margin-top: 50px;
}

.header-navbar-links li {
    float: left;
    list-style-type: none;
    margin-left: 26px;
    text-shadow: 0px 0px 2px black;
}
.header-brand-wrapper {
    margin-top: 50px;
    float: left;
}
.header-brand {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: bold;
    font-size: 150%;
    display: block;
    margin-top: -9%;
    text-shadow: 0px 0px 2px black;
}
.slogan {
    padding-top: 120px;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 0px 2px black;
}
.slogan-top {
    font-size: 170%;
    font-weight: lighter;
} 
.slogan-bottom {
    font-size: 250%;
    font-weight: bold;
}
.solgan-button {
    margin-top: 50px;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 2px black;
}
.solgan-button:hover {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 2px black;
}

/**
	* Service-Bereich
	*/

.service {
    padding-top: 100px;
    padding-bottom: 85px;
}
.service-gray {
    background-color: rgb(245, 245, 245);
}
.service-title {
    font-weight: lighter;
    color: rgb(30, 30, 30);
}
.service p {
    color: rgb(117, 117, 117);
}
.service-icon {
    color: rgb(224, 224, 224);
    font-size: 1250%;
    text-align: center;
    margin-top: -10%;
    margin-bottom: -20%;
}

/**
	* Features-Bereich
	*/
.features { 
	padding-top:100px;
	padding-bottom: 100px;
}

.feature-icon {
		width: 70px;
		high: 70px;
		background-color: black;
		border-radius: 35px;

}

cloned · #2 (**permalink**) 05.10.2017, 12:20

Hallo, bitte füge den Code doch mittels [ CODE ] Blöcken ein (gibt auch einen Button über dem Editor dafür)

Was meinst du außerdem mit "die Klasse"?

Wo ist dein CSS Code, du hast zweimal HTML gepostet. Wo willst du welche Icons einbauen?

paradiesvogel24 · #3 (**permalink**) 05.10.2017, 19:34

So habe das jetzt geändert

Hoffe das wir jetzt weiterkommen.

cloned · #4 (**permalink**) 06.10.2017, 08:01

Bitte lies nicht nur die erste Zeile meines Kommentares sondern auch die nächsten 2 Sätze und beantworte diese doch.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Fehler: $(blabla...) is null... Was bedeutet das und wie kann ich es beheben?	pkipper	Javascript & Ajax	2	04.05.2010 09:16
Fehler im Code	koshiro	(X)HTML	23	07.12.2009 13:39
Fehler bzw. Warnungen für eine Lightbox	empfei	(X)HTML	3	24.10.2009 14:27
PHP: ereg_replace verursacht fehler nach Umstellung auf UTF-8	braindead	Serveradministration und serverseitige Scripte	5	02.07.2007 10:28