Diskuze: Webová stránka pro mobilní zařízení - automatické zmenšení stránky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Jakub Klindera

Člen

Jakub Klindera:27.6.2017 8:11

Zdravíčko,
potřeboval byl celou svou stránku upravit pro zařízení s menším displejem. Když se stránka otevře třeba na mobilu, tak aby se ta stránka automaticky upravila. Děkuji

<!DOCTYPE html>
<html>
<head>
        <title>Jakub Klindera</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <meta charset="utf-8">
        <meta name="keywords" content="portfolio, jakub, Klindera" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="author" content="klindera" />
        <link rel="shortcut icon" href="images/ikona.ico" />
</head>
<body>

<div id="nav">
<ul>
                <li><a href="index.html">Domů</a></li>
                <li><a href="abilities.html">Znalosti</a></li>
                <li><a href="projects.html">Projekty</a></li>
                <li><a href="teamspeak.html">Teamspeak 3</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li class="leanguage"><a href="en/index.html">English</a></li>


</ul>
</div>


<div class="name">

        <img src="images/photo.png" alt="photo" margin-down="25px">

                <p><b>Jakub Klindera</b></p>
                <p class="second">Internetová vizitka</p>
</div>




<div class="footer">
        <p><b>&copy Jakub Klindera</b></p>
        </div>





</body>
</html>

a CSS

body{

}

#nav{
        background-color: #008ae6;
        width: 100%;
        height: 60px;
        position: fixed;
        top: 0px;
        left: 0px;
        box-shadow: 3px 3px 3px grey;

}

#nav ul li{
        list-style-type: none;
}

#nav .leanguage{
        float: right;

}

#nav ul li a{

        font-size: 24px;
        color: white;
        text-decoration: none;
        float: left;
        margin: 5px 20px 0px 20px;

}

button a{
text-decoration: none;
font-size: 24px;
text-align: center;
color: black;

}

button{
        padding: 5px 5px 5px 5px;
}

#nav ul li a:hover, .active {
        color: grey;
}

.active{
        color: grey;
}

.name{
        width: 900px;
        margin: 200px auto 150px auto;
        font-size: 28px;
        text-align: center;
        font-style: bold;
}

.bg{
        background: grey;
        height: 350px;
        right: 0px;

}


.text{
        width: 900px;
        height: auto;
        font-size: 20px;
        float: center;
        text-align: block;
        margin: 50px auto 150px auto;
        font-family: Arial;
}




h1{
        font-size: 32px;
        font-weight: normal;
        text-align: center;
        text-shadow: 1px 1px 1px;
}

.footer{
        width: 100%;
        height: 30px;
        margin-top: 25px;
text-align: right;
}

.footer p{)

        font-size: 18px;
        font-family: Arial;
        font-style: strong;
        bottom: 0px;
}

.second{
        color: grey;
        font-family: Calibri;
}

#bg{
        background: #e6e6ff;
        width: 100%;
        height: 350px;
}

#pcontent{
        width: 900px;
        margin: 150px auto 150px auto;
        font-size: 28px;
        text-align: center;
        font-style: bold;
}

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

.itnetwork a{
        text-decoration: none;
}

Odpovědět

27.6.2017 8:11

Marek Měkuta

Člen

Marek Měkuta:27.6.2017 8:30

Doporučuji pročíst místní tutoriály:
https://www.itnetwork.cz/…ni-webdesign

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

27.6.2017 8:30

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 2 zpráv z 2.

Nejčastěji vyhledáváné

Diskuze: Webová stránka pro mobilní zařízení - automatické zmenšení stránky