A Pen by Alex Weissman

Thumbnail
This awesome code was written by alexweissman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexweissman ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Alex Weissman</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="biginfo">
  <div class="biginfo-icon">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150">
  </div>
  <div class="biginfo-content">
    <div class="biginfo-header">
      Blah Blah
    </div>
    <div class="biginfo-body">
      Some other very interesting things
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/alexweissman/a-pen-by-alex-weissman-NboGZE */
.biginfo {
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.biginfo-blue {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.biginfo .biginfo-icon {
    display: table-cell;
    vertical-align: top;
    padding-left: 15px;
    padding-right: 10px;
    vertical-align: middle;
    font-size: 3em;
}

.biginfo .biginfo-content {
    display: table-cell;
    width:100%;
    vertical-align: top;
    text-align: left;
    padding-right: 15px;
}

.biginfo .biginfo-header {
    font-size: 2.8em;
}

.biginfo .biginfo-body {
    font-size: 1em;
}

@media (min-width: 992px) {
    .biginfo {
        margin-bottom: 20px;
    }

    .biginfo .biginfo-icon {
        font-size: 5em;
    }

    .biginfo .biginfo-header {
        font-size: 4.8em;
    }
}

Comments