Autor Zpráva
strangerisimo
Profil *
#1 · Zasláno: 29. 4. 2016, 21:33:46
Odpovědět Citovat
Ahoj, web sice není dokončený, ale chtěl bych se vás zeptat na váš názor na tuto úvodní stránku. Chtěl bych slyšet kritiku popřípadě i s řešením, co se týče kódu.
Vím, že bez chyb to nebude, ale myslím a troufám si tvrdit, že nejhorší to také není, přeci jen... Web funguje jak má, ale chtěl bych si poslechnout názor většího počtu lidí, protože víc hlav, víc ví a za každou radu jak něco vylepšit budu rád. Já sám osobně neznám všechny triky jak něco udělat lépe, ale někdo jiný by možná mohl něco nadhodit, co by bylo použitelné. :-)

Zde přikládám zdrojový kód:
Index: 
<?php include("lang/core.php"); ?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title><?=$lang["website-title"];?></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,600">
        
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script defer src="assets/js/main.js"></script>
    </head>
    
    <body>
        <?php
            include("inc/header.php");
            
            $page = 'index';
            $disallowed_paths = array('header', 'footer');
            if (!empty($_GET['page'])) {
                $tmp_page = basename($_GET['page']);
            if (!in_array($tmp_page, $disallowed_paths) && file_exists("inc/{$tmp_page}.php"))
                $page = $tmp_page;
            }
            
            echo "<div id='body-box'><div class='container'><div class='body-box-content'>";
            include("inc/$page.php");
            echo "</div></div></div>";

            include("inc/footer.php");
        ?>
    </body>
</html>

header.php 
<script>
function callMenu() {
    document.getElementsByClassName("menu-full")[0].classList.toggle("responsive");
}

function callMenuBottom() {
    document.getElementsByClassName("menu-full-bottom")[0].classList.toggle("responsive");
}
</script>

<nav id="nav-primary">
    <div class="container">
        <ul class="menu-full">
            <li><a href="#" class="active">Portal</a></li>
            <li><a href="#">Forum</a></li>
            <?php
                if(!isset($_COOKIE["logged"])) {
                    echo "
                        <li><a href='#'>Sign in</a></li>
                        <li><a href='#'>Sign up</a></li>
                    ";
                } else {
                    echo "
                        <li><a style='color: #d02a30;' href='#'>strangereu</a></li>
                    ";
                }
            ?>
            <li class="icon">
                <a href="javascript:void(0);" onclick="callMenu()">☰</a>
            </li>
        </ul>
    </div>
</nav>

<header id="header-main">
    <div class="container">
        <img class="logo-main" src="/assets/img/banner.png"/>
        <span class="welcome-message">Welcome, guest...</span>
        <div class="slidebar">
            <div class="ann">*** <span style="font-style: normal; font-weight: 600;">We are finally launching!</span> This is pure awesomeness, <span style="color: #d02a30;">Twisted Gamers 3.0</span> has  finally been released! ***</div>
            <img class="slide" src="/assets/img/homeslider_01.jpg"/>
        </div>
    
        <nav id="nav-secondary">
            <ul class="secondary-menu-full">
                <li><a class="active" href="#">Dashboard</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS: 
html, body {
    font-family: "Open Sans", sans-serif;
    height: 100%;
}

body {
    background: url("/assets/img/background.jpg") top left / cover no-repeat;
    background-attachment: fixed;
}

* {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100% !important;
    height: auto;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, img {
    display: block;
}

.container {
    max-width: 1080px;
    margin: auto;
}

/* Global */
#nav-primary {
    background: #f5f5f5;
    border-bottom: 2px solid #d02a30;
    overflow: hidden;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999999;
}

#nav-primary ul.menu-full {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#nav-primary ul.menu-full li {
    float: left;
}

#nav-primary ul.menu-full li a {
    display: inline-block;
    padding: 13px 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #454545;
    font-size: 15px;
    transition: 0.3s;
    text-align: center;
}
#nav-primary ul.menu-full li a.active {
    color: #d02a30;
}
#nav-primary ul.menu-full li a:hover {
    color: #d02a30;
}

#nav-primary ul.menu-full li.icon {
    display: none;
}

/* secondary */
#header-main {
    margin-top: 50px;
}

#header-main .welcome-message {
    float: right;
    color: #fff;
    font-style: italic;
}

#header-main .slidebar {
    width: 100%;
    border-top: 2px solid #d02a30;
    overflow: auto;
    position: relative;
}
#header-main .slidebar .slide {
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
}
#header-main .slidebar .ann {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-style: italic;
    font-size: 14px;
    padding: 5px 0px;
    text-align: center;
    z-index: 2;
    position: absolute;
    width: 100%;
}

#nav-secondary {
    background: #d02a30;
    overflow: hidden;
}

#nav-secondary ul.secondary-menu-full {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#nav-secondary ul.secondary-menu-full li {
    float: left;
}

#nav-secondary ul.secondary-menu-full li a {
    display: inline-block;
    padding: 13px 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 15px;
    transition: 0.3s;
    text-align: center;
}
#nav-secondary ul.secondary-menu-full li a.active, #nav-secondary ul.secondary-menu-full li a:hover {
    background: #EB2F36;
}

.body-box-content {
    background: #fff;
    min-height: 250px;
    padding: 10px;
}

#footer-bot {
    overflow: auto;
}

#footer-bot .footer-content {
    background: #d02a30;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 5px;
}

/* 480px */
@media screen and (max-width: 680px) {
    body {font-size: 0.4em;}

    #nav-primary ul.menu-full li:not(:first-child) {display: none;}
    #nav-primary ul.menu-full li.icon {
        float: right;
        display: inline-block;
    }
    
    #nav-primary ul.menu-full.responsive {position: relative;}
    #nav-primary ul.menu-full.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    #nav-primary ul.menu-full.responsive li {
        float: none;
        display: inline;
    }
    #nav-primary ul.menu-full.responsive li a {
        display: block;
        text-align: left;
    }
}

/* 720px */
@media screen and (min-width: 681px) {
    body {font-size: 0.6em;}
    .container {
        width: 650px;
    }
    
    #nav-primary ul.menu-full li a:first-of-type, #nav-primary ul.menu-full li a:last-of-type {
        padding-left: 0px;
    }    
}

/* 980px */
@media screen and (min-width: 980px) {
    body {font-size: inherit;}
    .container {
        width: 980px;
    }
}

/* 1280px */
@media screen and (min-width: 1280px) {
    body {font-size: inherit;}
    .container {
        width: 1080px;
    }
}

footer.php 
<footer id="footer-bot">
    <div class="container">
        <div class="footer-content">
            Twisted Gamers Portal &copy; 2016-2017 revision
        </div>
    </div>
</footer>

Ukázka: stranger.twisted-gamers.net
Časová prodleva: 10 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0