Created
October 30, 2019 09:00
-
-
Save Levik/1665774ed291582d8842506591d0d8d3 to your computer and use it in GitHub Desktop.
// source https://jsbin.com/basomig
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> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .menu { | |
| float: left; | |
| width: 20%; | |
| } | |
| .menuitem { | |
| padding: 8px; | |
| margin-top: 7px; | |
| border-bottom: 1px solid #f1f1f1; | |
| } | |
| .main { | |
| float: left; | |
| width: 60%; | |
| padding: 0 20px; | |
| overflow: hidden; | |
| } | |
| .right { | |
| background-color: lightblue; | |
| float: left; | |
| width: 20%; | |
| padding: 10px 15px; | |
| margin-top: 7px; | |
| } | |
| @media only screen and (max-width:800px) { | |
| /* For tablets: */ | |
| .main { | |
| width: 80%; | |
| padding: 0; | |
| } | |
| .right { | |
| width: 100%; | |
| } | |
| } | |
| @media only screen and (max-width:500px) { | |
| /* For mobile phones: */ | |
| .menu, .main, .right { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| <!--В head сайта один раз подключите библиотеку--> | |
| <script src="https://yastatic.net/pcode/adfox/loader.js" crossorigin="anonymous"></script> | |
| </head> | |
| <body style="font-family:Verdana;"> | |
| <!--AdFox START--> | |
| <!--levg--> | |
| <!--Площадка: FS Video PCODE-12667 / 1 / PCODE-12667--> | |
| <!--Категория: <не задана>--> | |
| <!--Тип баннера: 1HTML--> | |
| <div id="adfox_157242441692415021"></div> | |
| <script> | |
| window.Ya.adfoxCode.create({ | |
| ownerId: 227803, | |
| containerId: 'adfox_157242441692415021', | |
| params: { | |
| p1: 'cgufa', | |
| p2: 'fgca', | |
| puid1: '', | |
| puid2: '', | |
| puid3: '', | |
| puid4: '', | |
| puid5: '', | |
| puid6: '', | |
| puid7: '', | |
| puid8: '', | |
| puid9: '', | |
| puid10: '', | |
| puid11: '', | |
| puid12: '', | |
| puid33: '', | |
| puid63: '' | |
| } | |
| }); | |
| </script> | |
| <div style="background-color:#f1f1f1;padding:15px;"> | |
| <h1>Cinque Terre</h1> | |
| <h3>Resize the browser window</h3> | |
| </div> | |
| <div style="overflow:auto"> | |
| <div class="menu"> | |
| <div class="menuitem">The Walk</div> | |
| <div class="menuitem">Transport</div> | |
| <div class="menuitem">History</div> | |
| <div class="menuitem">Gallery</div> | |
| </div> | |
| <div class="main"> | |
| <h2>The Walk</h2> | |
| <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> | |
| <img src="https://www.w3schools.com/html/img_5terre.jpg" style="width:100%"> | |
| </div> | |
| <div class="right"> | |
| <h2>What?</h2> | |
| <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p> | |
| <h2>Where?</h2> | |
| <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p> | |
| <h2>Price?</h2> | |
| <p>The Walk is free!</p> | |
| </div> | |
| </div> | |
| <div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment