I am a complete newbie in web design and I want to use Materialized CSS to make the frontend of my system, I need to create cards like these to show information like this example site: click here
besides that I would like you to look at what you see on that site, with the cards have that effect that are from the top where the parallax effect ends, I do not know if I explained myself well but thank you very much for your attention I hope you can help me.
Example image:
To create any type of cards you have the main materialize guide:
link
I leave you the model of the letter you want using only Materialize and css
I leave you an image of how the result was: 
<!--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>