Autor | Zpráva | ||
---|---|---|---|
strangerisimo Profil * |
#1 · Zasláno: 29. 4. 2016, 21:33:46
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 © 2016-2017 revision </div> </div> </footer> Ukázka: stranger.twisted-gamers.net |
||
Časová prodleva: 8 let
|
0