RESPONSIVE CARDS - BS4

by Carlos Figueiredo

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

CSS

/*
Tutorial Name: Bootstrap 4 Tutorial
Author: Samuel Dalusung
*/

@import 'main.css';


/* GENERAL STYLES
-------------------------------------------------*/
body {
    font-family:'Lato', sans-serif;
    font-size:1em;
    color:#777;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
    color:#333;
    line-height:1.4;
    font-weight:700;
}

.mx-width {
    max-width:960px;
    margin:0 auto;
}

a,a:hover {
    color:#563d7c;
    text-decoration:none;
}

img {
    max-width:100%;
}

header {
    padding-bottom:50px;
}

.intro {
    font-family:'Lato';
    font-size:60px;
    line-height:1;
    font-weight:300;
    color:#fff
}

.learn {
    font-family:'Lato';
    font-size:27px;
    line-height:1.4;
    font-weight:300;
    color:#fff;
}

.jumbotron-fluid {
    padding:0;
}


/* PARALLAX
-------------------------------------------------*/
.parallax {
    text-align:center;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed!important;
    overflow:hidden;
}

.parallax-pattern-overlay {
    background-image:url(../img/pattern.png);
    background-repeat:repeat;
}


/* HEADING
-------------------------------------------------*/
.heading {
    padding-bottom:15px;
    text-align:center;
    max-width:960px;
    margin:0 auto;
    padding-top:80px;
}

.heading h2 {
    font-weight:600;
    font-family:'Raleway';
    font-size:40px;
    color:#333;
    margin:0;
    padding:5px;
}

.heading h2::first-letter {
    color:#563d7c;
    font-weight:700;
}

.heading h3 {
    font-size:1em;
    line-height:1.7;
}

#site-title {
    max-width:150px;
}


/* CONTACT
-------------------------------------------------*/
input.form-control {
    background:#fff;
    border:solid 1px #ddd;
    color:#000;
    padding:15px 30px;
    margin-right:3%;
    margin-bottom:30px;
    outline:none;
    border-radius: 0;
}



textarea.form-control {
    background:#fff;
  ...