API tools faq
paste
teslariu

css flexbox

teslariu
Mar 29th, 2022
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Layout con CSS FLEXBOX</title>
  8.     <style>
  9.         * {
  10.             box-sizing: border-box;
  11.         }
  12.         body {
  13.             font-family: Arial, Helvetica, sans-serif;
  14.         }
  15.  
  16.         header {
  17.             background-color: #666;
  18.             padding: 30px;
  19.             text-align: center;
  20.             font-size: 35px;
  21.             color: white;
  22.         }
  23.  
  24.         section {
  25.             display: -webkit-flex;
  26.             display: flex;
  27.         }
  28.        
  29.        
  30.         nav {
  31.             -webkit-flex: 1;
  32.             -ms-flex: 1;
  33.             flex: 1;
  34.             background: #ccc;
  35.             padding: 20px;
  36.         }
  37.  
  38.         nav ul {
  39.             list-style-type: none;
  40.             padding: 0;
  41.         }
  42.  
  43.         article {
  44.             -webkit-flex: 3;
  45.             -ms-flex: 3;
  46.             flex: 3;
  47.             padding: 10px;
  48.             background-color: #f1f1f1;
  49.         }
  50.        
  51.  
  52.         footer {
  53.             background-color: #777;
  54.             padding: 10px;
  55.             text-align: center;
  56.             color: white;
  57.         }
  58.  
  59.         /* Responsive layout */
  60.         @media (max-width: 600px) {
  61.             section  {
  62.                 -webkit-flex-direction: column;
  63.                 flex-direction: column;
  64.             }
  65.         }
  66.  
  67.  
  68.     </style>
  69. </head>
  70. <body>
  71.     <header>
  72.         <h2>Lenguajes de programación</h2>
  73.     </header>
  74.     <section>
  75.         <nav>
  76.             <ul>
  77.                 <li><a href="#">HTML</a></li>
  78.                 <li><a href="#">CSS</a></li>
  79.                 <li><a href="#">PHP</a></li>
  80.                 <li><a href="#">JavaScript</a></li>
  81.             </ul>
  82.         </nav>
  83.         <article>
  84.             <h1>HTML</h1>
  85.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae placeat itaque sit minima asperiores, molestiae provident recusandae quos tempore veritatis ab officia et. Iste praesentium beatae tempore vero deserunt architecto!</p>
  86.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit cumque optio aspernatur corporis error officia neque perferendis accusamus libero explicabo? Illum saepe esse veniam dolorem, quos quidem similique fugit sapiente.</p>
  87.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quas facilis adipisci libero, asperiores officiis illo tempora ea maxime animi nulla autem commodi quibusdam neque quisquam obcaecati doloremque cum aperiam.</p>
  88.         </article>
  89.     </section>
  90.     <footer>
  91.         <p>Footer</p>
  92.     </footer>
  93.  
  94.  
  95. </body>
  96. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!