JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<script src="//fonts.googleapis.com/css?family=Roboto"></script>
        <header>
            <dev class="header">
            <h1>Berlin - Hauptstadt der BRD</h1>
            <img src="img/logo.png" alt="Logo der Seite Berlin. Graphik des Brandenburger Tors" title="Brandenburger Tors"> 
            </dev>
        </header>
        
        <div class="mainframe">
        <nav><div class="menu">
            <ul>
            <li><a href="index.html">Startseite</a></li>
            <li><a href="aboutus.html">Über uns</a></li>
            <li><a href="berlin.html">Über die Stadt</a></li>
            <li><a href="sights.html">Sehenswürdigkeiten</a></li>
            <li><a href="info-html.html">Themen zu GWP</a></li>
            </ul></div>
        </nav>
    
        <section>
        <h2>Reine Fakten</h2>
            <ul>
            <li>Gründungsjahr: 26. Januar 1244</li>
            <li>Anzahl der Einwohner: 3.469.849 (31. Dezember 2014)</li>
            <li>Fläche: 891,68 km²</li>
            <li>Anzahl der Bezirke: 12</li>            
            </ul>
        </section>
        
        <h2>Etwas über Berlin.</h2>
        <blockquote>
        <p>Berlin ist die Bundeshauptstadt der Bundesrepublik Deutschland und zugleich eines ihrer Länder. Die Stadt Berlin ist mit über 3,4 Millionen Einwohnern die bevölkerungsreichste und mit 892 Quadratkilometern die flächengrößte Gemeinde Deutschlands sowie nach Einwohnern die zweitgrößte der Europäischen Union. Sie bildet das Zentrum der Metropolregion Berlin/Brandenburg (6 Millionen Einw.) und der Agglomeration Berlin (4,4 Millionen Einw.). Der Stadtstaat unterteilt sich in zwölf Bezirke. Neben den Flüssen Spree und Havel befinden sich im Stadtgebiet kleinere Fließgewässer sowie zahlreiche Seen und Wälder.</p>

<p>Urkundlich erstmals im 13. Jahrhundert erwähnt, war Berlin im Verlauf der Geschichte und in verschiedenen Staatsformen Residenz- und Hauptstadt Brandenburgs, Preußens und des Deutschen Reichs. Ab 1949 war der...

CSS

* {
    font-family: Roboto;
    /*

    Щоб юзати цей шрифт, тре додати таку хуйню в <head>:
    
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    */
}

body {
    background-color: #AABD00; /* Новий колір */
}

.header {
    display: inline-block;
    background-color: #0D2C54; /* Новий колір */
    height: 60px;
    width: 75%;
    margin-left: 12.5%;
    
}

.header img {
    float: right;
    height: 50px;
    /* margin: -67px 5px 5px 5px; */
    
}

h1 {
    color: white;
    margin-top: 9px;
    margin-left: 10px;
    display: inline-block;
}

nav ul {
    margin: 0; /* Забираємо зайві відступи */
    padding: 0;
}

nav ul li {
    display: inline-block; /* Тут поміняв на inline-block, щоб можна було вказати висоту ссилці */
    font-size: 1.3em;
    margin-right: 50px;
}

nav ul li:hover {
    background: #D6310D; /* інший колір по наведенню на LI */
}

nav ul li a {
    line-height: 2.5em; /* висота ссилки і відступи */
    height: 2.5em;
    padding: 1em;
    text-decoration: none;
    color: #FFFFFF;
}

.menu {
    background-color: #F6511D; /* Новий колір */
}

.mainframe {
    width: 75%;
    margin-left: 12.5%;
    background-color: #FFFFFF; /* Новий колір */
    padding-bottom: 50px;
}

section ul li {
    margin-left: 25px;
}

h2 {
    margin-left: 25px;
    
}

h3 {
    margin-left: 25px;
}

p {
    margin-left: 25px;
    line-height: 175%; /* для більшої висоти рядків в абзаці */
}

footer {
    margin-left: 25px;
}

cite {
    margin-left: 25px;
}

blockquote {
    border-left: 10px solid #FFB400; /* Новий колір */
}