Cards

<div class="card">
    <img class="card-img-top" src="../../assets/img/theme/light/placeholder.png" alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card shadow-none">
    <div class="p-3 d-flex">
        <div>
            <div class="icon icon-shape rounded-circle bg-success text-white mr-4">
                <i data-feather="check"></i>
            </div>
        </div>
        <div>
            <span class="h6">300+ components</span>
            <p class="text-sm text-muted mb-0">
                Built to be customized.
            </p>
        </div>
    </div>
</div>

<div class="card hover-translate-y-n10 hover-shadow-lg">
    <div class="card-body">
        <div class="pb-4">
            <img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject" style="height: 50px; width: 50px;">

        </div>
        <div class="pt-2 pb-3">
            <h5>Modular</h5>
            <p class="text-muted mb-0">
                All components are built to be used in any combination.
            </p>
        </div>
    </div>
</div>

<div class="card hover-translate-y-n10 hover-shadow-lg">
    <div class="card-body">
        <div class="pb-4">
            <div class="icon bg-dark text-white rounded-circle icon-shape shadow">
                <i data-feather="droplet"></i>
            </div>
        </div>
        <div class="pt-2 pb-3">
            <h5>Modular</h5>
            <p class="text-muted mb-0">
                All components are built to be used in any combination.
            </p>
        </div>
    </div>
</div>

<div class="card mb-5 hover-translate-y-n10">
    <div class="d-flex p-5">
        <div>
            <span class="badge badge-warning badge-pill">New</span>
        </div>
        <div class="pl-4">
            <h5>Listen to the nature</h5>
            <p>
                Design made simple with a clean and smart HTML markup.
            </p>
        </div>
    </div>
    <div>
        <img src="../../assets/img/svg/illustrations/illustration-5.svg" class="img-fluid img-center" style="height: 200px;" />
    </div>
</div>

<div class="card mb-0" style="max-width: 28rem;">
    <div class="p-5">
        <div>
    <div class="mb-5 text-center">
        <h6 class="h3 mb-1">Login</h6><p class="text-muted mb-0">Sign in to your account to continue.</p></div>
    <span class="clearfix"></span><form>
    <div class="form-group">
        <label class="form-control-label">Email address</label>
        <div class="input-group input-group-merge">
            <input type="email" class="form-control form-control-prepend" id="input-email" placeholder="name@example.com">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="user"></i></span>
            </div>
        </div>
    </div>
    <div class="form-group mb-0">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <label class="form-control-label">Password</label>
            </div>
            <div class="mb-2">
                <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
            </div>
        </div>
        <div class="input-group input-group-merge">
            <input type="password" class="form-control form-control-prepend" id="input-password" placeholder="Password">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="key"></i></span>
            </div>
        </div>
    </div>
    
    <div class="mt-4">
        <button type="button" class="btn btn-block btn-primary">Sign in</button></div>
</form>

    <div class="py-3 text-center">
        <span class="text-xs text-uppercase">or</span>
    </div>
    <!-- Alternative login -->
    <div class="row">
        <div class="col-sm-6">
            <a href="#" class="btn btn-block btn-neutral btn-icon mb-3 mb-sm-0">
                <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/github.svg" alt="Image placeholder"></span>
                <span class="btn-inner--text">Github</span>
            </a>
        </div>
        <div class="col-sm-6">
            <a href="#" class="btn btn-block btn-neutral btn-icon">
                <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/google.svg" alt="Image placeholder"></span>
                <span class="btn-inner--text">Google</span>
            </a>
        </div>
    </div>
    
    <!-- Links -->
    <div class="mt-4 text-center"><small>Not registered?</small>
        <a href="card.html" class="small font-weight-bold">Create account</a></div>
</div>

    </div>
</div>

<div class="card shadow-lg border-0" style="max-width: 100%;">
    <div class="card-body px-5 py-5 text-center text-md-left">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="mb-2">Do you gave any questions about Quick.</h5>
                <p class="mb-0">
                    Our support team is available for you anytime.
                </p>
            </div>
            <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                <a href="#" class="btn btn-warning btn-icon rounded-pill">
                    <span class="btn-inner--icon">
                        <i data-feather="phone"></i>
                    </span>
                    <span class="btn-inner--text">Contact us</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="card bg-section-dark border-0 rounded-lg" style="max-width: 100%;">
    <div class="card-body px-5">
        <div class="row">
            <div class="col-md-6">
                <div class="d-flex align-items-center align-items-center mb-3">
                    <div>
                        <div class="icon icon-sm icon-shape bg-warning text-white rounded-circle mr-3">
                            <i data-feather="airplay"></i>
                        </div>
                    </div>
                    <span class="h6 text-white mb-0">Quick</span>
                </div>
                <h5 class="text-white pt-4">Infinite solutions with only one template.</h5>
                <p class="text-white opacity-8">
                    With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.
                </p>
            </div>
            <div class="col-12 col-md-6 mt-4 mt-md-0 pr-4 pb-3 d-flex align-items-end justify-content-md-end">
                <a href="#" class="btn btn-white btn-icon">
                    <span class="btn-inner--text">Learn more</span>
                    <span class="btn-inner--icon">
                        <i data-feather="arrow-right" class="text-warning"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>