Advertisement
Guest User

Untitled

a guest
Dec 24th, 2016
230
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.38 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <title>Test</title>
  6.   <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  7.   <style type='text/css'>
  8.   .container {overflow:hidden}
  9.   .pc .news {width:50%; float:left}
  10.   .pc .blogposts {width:50%; float:right}
  11.   .mobile .news {width:auto}
  12.   .mobile .blogposts {width:auto}
  13.   </style>
  14.   <script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
  15.   <script type='text/javascript'>
  16.   var detectDevice = function() {
  17.     if ($(window).width() > 640) {
  18.       $('body').addClass('pc');
  19.       $('body').removeClass('mobile');
  20.     } else {
  21.       $('body').addClass('mobile');
  22.       $('body').removeClass('pc');
  23.     }
  24.   }
  25.   $(window).on('load', detectDevice);
  26.   $(window).on('resize', detectDevice);
  27.   </script>
  28. </head>
  29.  
  30. <body class='mobile'>
  31.  
  32. <div class='container'>
  33.   <div class='news'>
  34.     <p><strong>News</strong></p>
  35.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, urna vitae accumsan feugiat, felis justo vehicula ligula, vitae accumsan quam lorem at nisl. Vivamus auctor mollis velit, a interdum lorem suscipit sed. Morbi eget tristique enim. Vestibulum et augue et risus tempus porttitor a eget velit. Sed augue arcu, hendrerit ac libero non, finibus vulputate sapien. Nulla porttitor et nibh non porta. Nam varius ligula pretium sem porttitor euismod. Ut luctus viverra condimentum. Duis egestas orci vitae nunc volutpat pellentesque. Mauris feugiat et nulla vel dictum. Nullam vitae dui ac tortor pharetra molestie vel in elit. Suspendisse iaculis maximus quam vel semper. Vivamus dapibus accumsan ex vitae bibendum. Cras accumsan at mauris in vestibulum.</p>
  36.   </div>
  37.   <div class='blogposts'>
  38.     <p><strong>Blog</strong></p>
  39.     <p>Praesent ornare a ex quis hendrerit. Curabitur commodo mollis purus ut cursus. Maecenas at leo non tortor feugiat ornare sit amet quis tellus. Aliquam non eros id libero accumsan consectetur. Aenean in dui risus. Morbi ut augue viverra, commodo diam eu, finibus erat. Nullam vitae nisi sed purus eleifend auctor. Nulla massa libero, sagittis vitae ipsum at, euismod elementum lorem. Sed bibendum a lorem et tempor. Etiam mollis lectus sit amet ligula accumsan, quis accumsan dolor egestas. Nullam gravida massa vel metus viverra dignissim. Nullam malesuada neque nisi, eget convallis turpis semper eu.</p>
  40.   </div>
  41. </div>
  42.  
  43. </body>
  44.  
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement