-1

soy un completo novato en diseño web y quiero utilizar Materialized CSS para hacer el frontend de mi sistema, necesito crear tarjetas como estas para mostrar información como las de este sitio de ejemplo: clic aquí

ademas de que me gustaria que se miraran tal cual se ve en ese sitio, con las tarjetas tengan ese efecto que están desde la parte superior donde termina el efecto parallax, no se si me he explicado bien pero muchas gracias por su atencion espero puedan ayudarme

Imagen de ejemplo: introducir la descripción de la imagen aquí

2
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. tu pregunta se considera como muy amplia porque no has demostrado que has probado hasta ahora. Debes investigar y venir con una consulta concreta
    – gbianchi
    el 20 sep. 2017 a las 0:22
  • Y dónde está tu problema? No sabes aplicar las clases de materialize? No sabes estructurar el código html? Necesitamos que seas más específico en tu planteamiento.
    – Muriano
    el 20 sep. 2017 a las 6:52

1 respuesta 1

1

Para crear cualquier tipo de tarjetas tiene la guía principal de materialize:
http://materializecss.com/cards.html

Te dejo el modelo de la carta que quieres utilizando únicamente Materialize y css te dejo una imagen de como quedo el resultado: introducir la descripción de la imagen aquí

 <!--CARTA-->
    <div class="row">
    <div class="col s12 m6">
      <div class="card white darken-1">
        <div class="card-content white-text">
          <span class="card-title black-text">Sept 19,2017</span>
        </div>
        <div class="card-action s12">
            <!--N0TICIA 1-->
            <div class="row">
                <div class="col s12"></div>
                <span class="col s3 grey-text hour">
                        <i class="tiny material-icons">watch_later</i>  19:11 pm
                </span>
                <div class="col s9">
                    <h5 class=" thumb">UX LEAD</h5>
                    <span class="links blue-text">Aerolab</span>
                    <span class="links grey-text"><i class="tiny material-icons">work</i> Full Time</span>
                    <span class="links grey-text"><i class="tiny material-icons">folder_open</i> Design</span>
                    <span class="links grey-text"><i class="tiny material-icons">location_on</i> Argentina,Buenos Aires</span>
                </div>
            </div>
            <!--N0TICIA 2-->
            <div class="row">
                <div class="col s12"></div>
                <span class="col s3 grey-text hour">
                        <i class="tiny material-icons">watch_later</i>  19:11 pm
                </span>
                <div class="col s9">
                    <h5 class=" thumb">QA ANALYST</h5>
                    <span class="links blue-text">Aerolab</span>
                    <span class="links grey-text"><i class="tiny material-icons">work</i> Full Time</span>
                    <span class="links grey-text"><i class="tiny material-icons">folder_open</i> Sys Admin</span>
                    <span class="links grey-text"><i class="tiny material-icons">location_on</i> Argentina,Buenos Aires</span>
                </div>
            </div>

        </div>
      </div>
    </div>
  </div>
1
  • muchas gracias, esto es lo que esperaba que me ayudaran :) el 20 sep. 2017 a las 16:32

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.