API tools faq
paste
Advertisement
Fhernd

index.html

Fhernd
Sep 13th, 2017
253
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  6.     <!--Importar la fuente de los íconos de Google-->
  7.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  8.     <!--Importar la hojas de estilos de materialize css-->
  9.     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  10.     <link href="css/index.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  11.     <title>Contenedores y Sistema de Rejilla</title>
  12. </head>
  13. <body>
  14. <div class="row">
  15.     <div class="s12 col amber darken-3 barra-superior">
  16.         <div class="row">
  17.             <div class="col l5 m8 s12">
  18.                 <img src="img/browser.png" alt="ShareUrCode" class="logo" style="float: left"/>
  19.                 <div class="input-field" style="float: left">
  20.                     <input id="icon_prefix" type="text" class="validate" placeholder="Buscar" style="float: left">
  21.                     <i class="material-icons right" style="float: left">account_circle</i>
  22.                 </div>
  23.             </div>
  24.             <div class="col l7 m4">
  25.  
  26.             </div>
  27.         </div>
  28.     </div>
  29.     <div class="s2 m2 l2 col blue-grey lighten-5 columna-grupos push-s10">
  30.         <span>Columna para los grupos</span>
  31.     </div>
  32.     <div class="s10 m7 l7 col white columna-principal pull-s2 z-depth-1">
  33.         <div class="row">
  34.             <div class="s12 m12 l8 col white columna-publicaciones">
  35.                 <div class="contenedor-write-publicacion card amber lighten-4">
  36.  
  37.                 </div>
  38.                 <div class="contenedor-publicacion card amber lighten-4">
  39.                     <div class="row contenido-publicacion">
  40.                         <div class="s12 col">
  41.                             <video src="media/vid1.mov" autoplay controls
  42.                                   class="responsive-video media-element"></video>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="contenedor-publicacion card amber lighten-4">
  47.                     <div class="row contenido-publicacion">
  48.                         <div class="s12 col">
  49.                             <p class="flow-text">
  50.                                 Hola, quiero compartirles mi experiencia como programador web.
  51.                                 He aprendido mucho de diseño front-end mediante diversos frameworks
  52.                                 CSS y la verdad me siento muy a gusto desarrollando con Materialize CSS.
  53.                             </p>
  54.                             <blockquote>
  55.                                 En esta ocasión estoy aprendiendo a implementar texto adaptativo, imágenes y video.
  56.                                 Me ha resultado muy sencillo implementar cada uno de estos elementos puesto que el
  57.                                 Framework
  58.                                 lo hace muy sencillo. Sin embargo me surge una pregunta, tengo problemas
  59.                                 al usar un video desde la web, ¿Alguien puede ayudarme?
  60.                             </blockquote>
  61.                         </div>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.             <div class="l3 offset-l1 col white columna-news hide-on-med-and-down">
  66.                 <div class="contenedor-noticias amber lighten-4">
  67.                     <h5 class="center-align">Últimas noticias</h5>
  68.                     <p class="truncate">
  69.                         -Se ha publicado la última versión de Java 8.
  70.                     </p>
  71.                     <img src="img/img2.jpg" class="responsive-img"/>
  72.                     <p class="truncate">
  73.                         -Nueva versión de JavaScript
  74.                     </p>
  75.                     <img src="img/img3.jpg" class="responsive-img"/>
  76.                     <p class="truncate">
  77.                         -Se aproxima la conferencia de desarrollo web.
  78.                     </p>
  79.                     <img src="img/img4.jpg" class="responsive-img"/>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     <div class="m3 l3 col white columna-chat hide-on-small-only">
  85.         <div class="row">
  86.             <div class="s12 col blue-grey bloque-feed">
  87.                 <h5>Bloque para las actividades recientes</h5>
  88.             </div>
  89.             <div class="s12 col grey lighten-1 bloque-chat">
  90.                 <h5>Bloque para el chat</h5>
  91.             </div>
  92.         </div>
  93.     </div>
  94.  
  95. </div>
  96.  
  97. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  98. <script type="text/javascript" src="js/materialize.min.js"></script>
  99. </body>
  100. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!