Last active
December 25, 2015 07:19
-
-
Save abennouna/6938137 to your computer and use it in GitHub Desktop.
Bidaya, votre site Web adaptatif et optimisé - Deuxième partie : RESS en PHP, HTML et CSS adaptatifs - http://tellibus.com/blog/101
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* ************************************************************************** *\ | |
| * Code HTML et PHP du site monopage Bidaya * | |
| * Billet de blog : http://tellibus.com/blog/101 * | |
| * Démo : http://tellibus.com/bidaya/index-02.php * | |
| * CC-BY-SA tellibus.com * | |
| \* ************************************************************************** */ | |
| // DetectMobileBrowsers.com - Version du 09/09/2013 | |
| $userAgent = $_SERVER['HTTP_USER_AGENT']; | |
| if (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $userAgent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($userAgent, 0, 4))) { | |
| $isMobile = true; | |
| } else { | |
| $isMobile = false; | |
| } | |
| ?> | |
| <!doctype html> | |
| <html dir="ltr" lang="fr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Site Web gratuit et optimisé | Bidaya</title> | |
| <link rel="stylesheet" type="text/css" href="css/bidaya.css"> | |
| <!-- Sur le site Bidaya optimisé, il est inutile de zoomer sur appareils tactiles --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <?php if ($isMobile) { ?> | |
| <!-- Optimisation du viewport mobile --> | |
| <meta name="HandheldFriendly" content="True"> | |
| <meta name="MobileOptimized" content="320"> | |
| <!-- Mobile IE : activation de la technologie ClearType pour plus de lisibilité --> | |
| <meta http-equiv="cleartype" content="on"> | |
| <?php } ?> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="/" id="logo"><img src="img/logo-bidaya.png" width="50" height="50" alt="Logo Bidaya"></a> | |
| <a href="#" id="nav_toggle">Menu</a> | |
| <nav id="header_nav"> | |
| <a href="#section_bidaya" class="nav-item nav-item-active">Bidaya</a> | |
| <a href="#section_responsive" class="nav-item">Base adaptative</a> | |
| <a href="#section_optimized" class="nav-item">Structure optimisée</a> | |
| <a href="#section_license" class="nav-item">Licence</a> | |
| </nav> | |
| </header> | |
| <section id="section_bidaya" class="hero"> | |
| <?php if (!$isMobile) { ?> | |
| <aside id="hero_image"> | |
| <img src="img/hero-image.png" width="346" height="277" alt="Logo Bidaya"> | |
| </aside> | |
| <?php } ?> | |
| <h1>Bidaya : votre site adaptatif performant</h1> | |
| <h2>Concevez votre site Web sur une base gratuite et optimisée</h2> | |
| <a href="#section_responsive" id="cta">Commencez »</a> | |
| </section> | |
| <section id="section_responsive" class="main-section"> | |
| <h2>Un site monopage sur bureau et multi-écrans sur mobiles</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <section id="section_optimized" class="main-section"> | |
| <h2>Démarrez sur une base déjà optimisée sur Apache et PHP</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <section id="section_license" class="main-section"> | |
| <h2>Code gratuit, même à usage commercial (avec attribution)</h2> | |
| <div class="column"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="column"> | |
| <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> | |
| </div> | |
| </section> | |
| <footer> | |
| <p> | |
| <a href="http://twitter.com/tellibus"><img src="img/twitter.png" width="39" height="39" alt="Logo Twitter"></a> | |
| <a href="http://fb.com/tellibus"><img src="img/facebook.png" width="39" height="39" alt="Logo Facebook"></a> | |
| <a href="http://github.com/tellibus"><img src="img/github.png" width="39" height="39" alt="Logo Github"></a> | |
| </p> | |
| <p>Licence : CC-BY-SA 3.0 <a href="http://tellibus.com">tellibus.com</a></p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ************************************************************************** *\ | |
| * Styles adaptatifs du site monopage Bidaya * | |
| * Billet de blog : http://tellibus.com/blog/101 * | |
| * Démo : http://tellibus.com/bidaya/index-02.php * | |
| * CC-BY-SA tellibus.com * | |
| \* ************************************************************************** */ | |
| /************* Réinitialisation des styles des balises utilisées **************/ | |
| html, body, div, h1, h2, p, header, footer, nav, section { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| header, nav, section, aside, footer { | |
| display: block; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| /************************** Fin de réinitialisation ***************************/ | |
| /******************************* Styles communs *******************************/ | |
| body { | |
| font: 16px/20px Helvetica, Arial, sans-serif; | |
| color: #666; | |
| } | |
| a { | |
| color: #333; | |
| } | |
| a:hover, a:active, a:focus { | |
| color: #000; | |
| } | |
| header { | |
| margin-bottom: 10px; | |
| border-bottom: solid 2px #000; | |
| overflow: hidden; | |
| } | |
| #logo { | |
| line-height: 0; | |
| } | |
| .nav-item { | |
| text-decoration: none; | |
| } | |
| .nav-item-active { | |
| font-weight: bold; | |
| } | |
| h1 { | |
| margin-top: 20px; | |
| font-size: 36px; | |
| line-height: 44px; | |
| } | |
| .main-section h2 { | |
| font-size: 20px; | |
| } | |
| .hero h2 { | |
| font-size: 24px; | |
| margin-top: 30px; | |
| line-height: 28px; | |
| font-weight: normal; | |
| } | |
| #cta { | |
| text-decoration: none; | |
| color: #fff; | |
| font-weight: bold; | |
| background: #444; | |
| padding: 10px 50px; | |
| margin: 20px auto; | |
| text-align: center; | |
| border-radius: 5px; | |
| border: solid 1px #000; | |
| display: inline-block; | |
| font-size: 20px; | |
| } | |
| .hero, .main-section { | |
| border-bottom: solid 2px #000; | |
| padding: 10px; | |
| overflow: hidden; | |
| } | |
| .column { | |
| margin-top: 20px; | |
| } | |
| footer { | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| /*************************** Fin des styles communs ***************************/ | |
| /**************** Petits écrans : largeurs inférieures à 480 px ***************/ | |
| @media screen and (max-width: 480px) { | |
| body { | |
| text-align: center; | |
| } | |
| #logo { | |
| float: left; | |
| padding: 10px; | |
| } | |
| #nav_toggle { | |
| font-size: 20px; | |
| float: right; | |
| background: url(../img/dropdown.png) 100% center no-repeat; | |
| padding-right: 35px; | |
| text-decoration: none; | |
| line-height: 70px; | |
| margin-right: 10px; | |
| } | |
| #header_nav { | |
| display: none; | |
| clear: both; | |
| } | |
| .nav-item { | |
| display: block; | |
| padding: 10px 0; | |
| border-top: solid 2px #000; | |
| } | |
| .nav-item-active { | |
| background: #ddd; | |
| } | |
| .hero, .main-section { | |
| text-align: center; | |
| } | |
| #hero_image { | |
| display: none; | |
| } | |
| } | |
| /********************* Fin des styles pour petits écrans **********************/ | |
| /********* Ecrans suffisamment larges : largeurs supérieures à 480 px *********/ | |
| @media screen and (min-width: 481px) { | |
| #nav_toggle { | |
| display: none; | |
| } | |
| .nav-item { | |
| display: inline-block; | |
| } | |
| .nav-item-active { | |
| text-decoration: underline; | |
| } | |
| } | |
| /*************** Fin des styles pour écrans suffisamment larges ***************/ | |
| /******** Ecrans de largeur moyenne : comprises entre 481 px et 768px *********/ | |
| @media screen and (min-width: 481px) and (max-width: 768px) { | |
| #logo { | |
| display: block; | |
| margin: 10px; | |
| } | |
| #header_nav { | |
| display: block; | |
| text-align: center; | |
| border-top: solid 2px #000; | |
| } | |
| .nav-item { | |
| padding: 15px 10px; | |
| } | |
| .hero, .main-section { | |
| text-align: center; | |
| } | |
| } | |
| /*************** Fin des styles pour écrans de largeur moyenne ****************/ | |
| /*************** Ecrans larges : largeurs supérieures à 768 px ****************/ | |
| @media screen and (min-width: 769px) { | |
| header { | |
| padding: 10px; | |
| } | |
| #logo { | |
| float: left; | |
| } | |
| #header_nav { | |
| float: right; | |
| } | |
| .nav-item { | |
| margin: 15px 10px; | |
| } | |
| #hero_image { | |
| float: right; | |
| margin-left: 40px; | |
| } | |
| .column { | |
| display: inline-block; | |
| width: 30%; | |
| margin-right: 3%; | |
| vertical-align: top; | |
| } | |
| } | |
| /********************* Fin des styles pour écrans larges **********************/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Blog post: http://tellibus.com/blog/101-Bidaya-votre-site-Web-adaptatif-et-optimisé--Deuxième-partie--RESS-en-PHP-HTML-et-CSS-adaptatifs