Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Responsive-1</title>
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
- <style>
- header, footer {
- padding: 15px;
- background-color: #aaa;
- text-align: center;
- }
- .main {
- margin: 20px 0;
- }
- </style>
- </head>
- <body>
- <div class="container-fluid">
- <header>Responsive Web</header>
- <div class="row main">
- <div class="menu col-sm-12 col-md-3">
- <div class="btn btn-secondary col-sm-12">MENU 1</div>
- <div class="btn btn-primary col-sm-12">MENU 2</div>
- <div class="btn btn-warning col-sm-12">MENU 3</div>
- <div class="btn btn-danger col-sm-12">MENU 4</div>
- <div class="btn btn-dark col-sm-12">MENU 5</div>
- </div>
- <div class="col-sm-12 col-md-6">
- <h2>Media Query Responsive Web</h2>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, aspernatur incidunt hic dolorem repellat tempore minus totam ad molestiae labore veniam esse ut laudantium nobis iure illum culpa ipsam magni.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, aspernatur incidunt hic dolorem repellat tempore minus totam ad molestiae labore veniam esse ut laudantium nobis iure illum culpa ipsam magni.</p>
- </div>
- <div class="col-sm-12 col-md-3">
- <h3>Aside</h3>
- <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique consectetur quam sit accusamus blanditiis necessitatibus at quibusdam voluptatem velit quisquam eaque omnis eum ducimus libero, nemo, a nulla culpa modi?</p>
- </div>
- </div>
- <footer>© 2019 WEB All rights reserved.</footer>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment