Answers for "simple html card"

CSS
3

how to create a card using css

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 15%;
  height: 200px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5%;
  }
  
  .card:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    width: 20%;
    height: 250px;
  }
Posted by: Guest on August-13-2021
0

CARD WITH IMAGE CSS

<div class="card">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="https://amzn.to/3jOaZKL">Test 1</a></li>
        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
        <li class="tab"><a href="#test6">Test 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">Test 1</div>
      <div id="test5">Test 2</div>
      <div id="test6">Test 3</div>
    </div>
  </div>
Posted by: Guest on October-10-2020

Browse Popular Code Answers by Language