Material Design Cards

In this example below you will see how to do a Material Design Cards with some HTML / CSS and Javascript

Material Design için Cards cheatsheet hazırladım, buyrun.

Thumbnail
This awesome code was written by berkantfidan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright berkantfidan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material Design Cards</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="tr">
<head>
  <meta charset="UTF-8" />
  <title>Material Cards</title>
  
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body style="padding: 32px;">
  
  <h1 class="title">Material Kartlar</h1>
  
  <h3 class="mdl-card__title-text">Card #01</h3>
  <div class="mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Geaah Pissi Piss</h2>
      </div>
    
      <div class="mdl-card__media">
        <img src="http://placekitten.com/g/400/200" alt="" />
      </div>
    
      <div class="mdl-card__supporting-text">
        This is the supporting text for this card beybe.
      </div>
  </div>
  
  <br />
  
 <div class="mdl-card mdl-shadow--8dp welcome-card">
    <div class="mdl-card__title primary-title">
       <h2 class="mdl-card__title-text primary-title-text">Welcome</h2>
    </div>
   
   <div class="mdl-card__supporting-text">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ut autem vitae doloribus numquam natus atque sed laborum consequatur quia.
   </div>
   
   <div class="mdl-card__actions mdl-card--border">
     <button class="mdl-button mdl-js-button mdl-button--accent mdl-js-ripple-effect">
       Click Here
     </button>
   </div>
  </div>
  <br />
  <hr />
  
  <h2>Kendimizi Deniyoruz</h2>
  
  <div class="newsteller">
    <div class="mdl-card mdl-shadow--3dp">
    <div class="cloud-background">
      <div class="mdl-card__title">
        <div class="mdl-card__title-text">Get exclusive content from my free newsteller</div>
      </div>
      <div class="mdl-card__title">
        <div class="mdl-card__subtitle-text">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum, tenetur nostrum perferendis commodi ea praesentium soluta, at neque rem?</p>
        </div>
      </div>
      <div class="mdl-card__title">
        <div class="mdl-card__subtitle-text">
          Enter your email below to sign-up.
        </div>
      </div>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <button class="mdl-button mdl-js-button mdl-button--accent mdl-js-ripple-effect">SEND ME AN ANGEL</button>
    </div>
  </div>
  </div>
  
  
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/berkantfidan/material-design-cards-obxVQN */
.primary-title{
  background: url('https://placekitten.com/g/520/200');
  height: 150px;
}
.primary-title-text.mdl-card__title-text{
  color: white;
  text-shadow: 2px 1px 3px #000;
}

.welcome-card.mdl-card{
  width: 520px;
}

.newsteller{
  width: 450px;
  margin: 50px auto;
  padding-bottom: 20px;
}
.cloud-background{
  background: url('http://adrianhenrydev.com/udemy-mdl/sky-173742_1280.jpg') no-repeat;
  height: 300px;
  text-align: center;
}
.cloud-background .mdl-card__subtitle-text{
  color: #000;
  font-weight: bold;
}

Comments