Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
discount 30 + hiring
Avatar
Lukáš Havlíček:3.12.2021 23:17

Ahoj, dělal jsem si web HTML/CSS podle tutoriálu zde na stránkách. Dělal jsem to krok po kroku. Několikrát dokola a pokaždé nevypadal web jako na obrázku z tutoriálu. Jedná se mi o to, že mám obsah stránky nalepený na hlavičce webu. Přikládám screen a css styl. Předem děkuji za rady, v čem by mohla být chyba.
P.S.: Té fotce se nesmějte :D. Je 10let stará :D

CSS

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font-family: Poppins;
    background: #F9F9F9;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b
}

.centrovany {
    text-align: center;
}

h2 {
    font-size: 1.7em;
}

article h2 {
    font-size: 2em;
}

article h1 {
    margin: 0;
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 4px solid #EF6534;
}

article h1, h2, h3, h4, h5, h6 {
    padding: 10px 0;
    color: #00386B;
    width: max-content;
}

article header {
    height: 100px;
    background: none;
}

article section {
    margin: 0;
}

article section p {
    margin-bottom: 1.5em;
    line-height: 1.8em;
}

article section a {
    color: #EF6534;
}

#centrovac {
    margin: 0 auto;
    max-width: 960px;
}

article {
    padding: 80px 50px;
    flex: 1;
}

.vlevo {
    float: left;
    padding: 10px;
}

.domu-article {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px max-content;
}

.domu-article img {
    width: 300px;
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column: 2;
    filter: grayscale(1);
}

.reference-tlacitko {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}

body > header {
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    background: #00386B;
    color: white;
    width: 100%;
    z-index: 1;
}

#logo {
    background: url('obrazky/logo.png') no-repeat;
    background-size: 40px 40px;
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#logo > * {
    margin: 0 0 0 50px;
}

#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
}

#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}

#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}

nav ul {
    margin: 0;
    height: 100%;
    align-items: center;
    list-style-type: none;
    display: flex;
}

nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}

nav ul a {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}

.kontakt-tlacitko {
    background: #EF6534;
    padding: 10px 20px;
    border-radius: 20px;
}

.kontakt-tlacitko:hover, .reference-tlacitko:hover {
    filter: brightness(115%) contrast(85%);
    border: 0;
}

footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
}

footer a {
    color: white;
    text-decoration: none;
}

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
}

#dovednosti {
    border-collapse: collapse;
}

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

index.html

<!DOCTYPE html>

<html lang="cz-cs">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Moje první webová stránka</title>
    </head>

    <body>
        <header>
            <div id="logo">
                <h1>Lukáš<span>Havlíček</span></h1>
                <small>Webdeveloper</small>
            </div>

            <nav>
                <ul>
                    <li class="aktivni"><a href="index.html">Domů</a></li>
                    <li><a href="omne.html">O mně</a></li>
                    <li><a href="dovednosti.html">Dovednosti</a></li>
                    <li><a href="reference.html">reference</a></li>
                    <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <div id="centrovac" class="domu-article">
                <header>
                    <h1>O mně</h1>
                </header>

                <section>
                    <p>Vítejte na mém prvním webu. Psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                    <p>Jmenuji se Lukáš Havlíček. Pracuji jako retrakář v Distribučním centru Alber Hradec Králové.
                        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce.</a>
                    </p>
                    <p>Rád hraji hry na PC a koukám na filmy.</p>
                    <p>Mým hlavním koníčkem je <strong>Programování</strong>.</p>

                    <h2>Dovednosti</h2>
                    <p>Co umím jsem sepsal na stránce <a href="dovednosti.html">dovednosti.</a></p>

                    <p class="tlacitko-odstavec">
                        <a href="reference.html" class="reference-tlacitko">Moje reference</a>
                    </p>
                </section>

                    <img src="obrazky/foto.jpg" alt="Programátor Šneček" />
            </div>
        </article>

        <footer>
            Vytvořil &copy;Šneček 2021 pro <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>
        </footer>
    </body>
</html>
 
Odpovědět
3.12.2021 23:17
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.