Last active
April 19, 2020 11:42
-
-
Save pierrealexaline/f520dd538e30cf4356c6fd7ac7d9fb30 to your computer and use it in GitHub Desktop.
WCS - Responsive web design - html part
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Find the precious!</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <nav> | |
| <ul> | |
| <li class="current">FindThePrecious.com</li> | |
| <li>Fellows</li> | |
| <li>Contact us</li> | |
| </ul> | |
| </nav> | |
| <section> | |
| <div class="carousel"></div> | |
| </section> | |
| <section> | |
| <h2 class="title">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2> | |
| </section> | |
| <section class="news"> | |
| <article></article> | |
| <article></article> | |
| <article></article> | |
| </section> | |
| <form> | |
| <h2>Contact us</h2> | |
| <input type="email" placeholder="@"> | |
| <input type="text" placeholder="⌂"> | |
| <input type="text" placeholder="I have seen one of them"> | |
| <textarea placeholder="Your message"></textarea> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /* In fact we must do this way, because SEO, for google mobile first !*/ | |
| /* % used forr fonts and page and body block, elements relative to there parents | |
| /* pixel used for exact fit*/ | |
| *{ | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| display:flex; | |
| flex-direction:column; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size:100%; | |
| background:#111; | |
| } | |
| /* Mobile Styles */ | |
| section, | |
| form, | |
| nav{ | |
| display:flex; | |
| align-items: center; | |
| justify-content: center; | |
| background:#fff; | |
| width:100%; | |
| } | |
| form, | |
| nav{ | |
| flex-direction:column; | |
| } | |
| nav ul{ | |
| display:flex; | |
| flex-direction:row; | |
| background:#333; | |
| width:100%; | |
| list-style:none; | |
| border-bottom:1px solid #ddd; | |
| } | |
| nav ul li{ | |
| color:#eee; | |
| padding:10px 20px; | |
| } | |
| nav ul li:hover{ | |
| color:#444; | |
| background:#ddd; | |
| } | |
| .current{ | |
| font-size:1.1em; | |
| } | |
| h2{ | |
| font-size:1.6em; | |
| color:#444; | |
| padding:40px 0; | |
| width:80%; | |
| text-align:center; | |
| } | |
| h2 span{ | |
| font-size:0.75em; | |
| color:#777; | |
| display:block; | |
| } | |
| section{ | |
| flex-direction:column; | |
| } | |
| section.news{ | |
| flex-direction:row; | |
| justify-content:space-around; | |
| } | |
| article, | |
| .carousel{ | |
| display:none; | |
| } | |
| form{ | |
| border-bottom:40px solid #222; | |
| padding-bottom:60px; | |
| border-top:1px solid #ccc; | |
| } | |
| form h2{ | |
| text-align:center; | |
| } | |
| input,textarea{ | |
| width:80%; | |
| margin:5px 0; | |
| padding:8px; | |
| border-radius:4px; | |
| border:1px solid #bbb; | |
| } | |
| /* Desktop Styles */ | |
| @media only screen and (min-width: 961px){ | |
| section, | |
| form, | |
| nav{ | |
| max-width:990px; | |
| } | |
| .carousel{ | |
| display:inline-block; | |
| width:100%; | |
| height:280px; | |
| background:#ddd; | |
| } | |
| article{ | |
| display:inline-block; | |
| width:30%; | |
| height:180px; | |
| background:#ddd; | |
| } | |
| form h2{ | |
| text-align:left; | |
| } | |
| h2{width:90%;} | |
| h2 span{display:inline-block;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment