ADXP Home page example

by David Simpson

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div>


 <!--  <img srcset="
   https://www.fillmurray.com/300/234   300w,
   https://www.fillmurray.com/768/234   768w,
   https://www.fillmurray.com/1024/234  1024w,
   https://www.fillmurray.com/1170/234  1170w" src="https://www.fillmurray.com/1170/234" alt="Example">
  -->
 
 
</div>

<div class="container">
  <div class="row">
    <div class="col col-12 col-lg-6 order-lg-6 order-1 nesting-container">

      <div class="container">




        <!-- Single item with left image in row -->
        <div class="row">
          <div class="col">
            <div class="card activity d-sm-flex flex-sm-row">
              <!-- https://github.com/twbs/bootstrap/issues/20794#issuecomment-397879618 -->
              <!--
                -->
              <!-- <img srcset="https://www.fillmurray.com/500/181 100w,
                         https://www.fillmurray.com/200/246 801w" src="https://www.fillmurray.com/200/246" class="card-img-top" alt="...">
               -->
              <img src="https://www.fillmurray.com/200/240" class="card-img-top" alt="...">
              <div class="card-body d-flex flex-column justify-content-between">
                <div>



                  <h4 class="card-title"><a target="_blank" rel="noreferrer noopener" href="https://marvelapp.com/1dh485hg/screen/54495173">Marvel Demo </a></h4>
                  <p class="card-text">Here's a link to the marvel demo that Matt created.</p>

                </div>
                <div...

CSS

body {
  padding: 20px;
  background: #f8f9fa;
  font-size: 14px;
}

.container {
  width: 100%;
  max-width: 100%;
  max-width: 1580px;
}

.col {
  /* border: solid 1px #eee; */
  padding: 10px;
}

.col.nesting-container {
  padding: 0;
  border: 0;
}

.btn-load-more {
  display: block;
  width: 100%;
  text-align: center;
}

.tint {
  color: hotpink;
}

.card-title a {
  color: #666;
}

.activity p {
  margin-bottom: 0.5rem;
}

.activity .actions {
  white-space: nowrap;
}

.activity .actions .btn-link {
  padding: 4px;
  font-size: 90%;
  color: #666;
}

.activity .actions .btn-link:hover {
  text-decoration: none;
}

.relevance {
  margin-left: 4px;
  color: rgb(212, 175, 55);
}

.relevance .gray {
  filter: grayscale(100%);
}

.author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta img.rounded-circle {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
}


/* -xs- only */

@media (max-width: 575.98px) {
  .card.d-sm-flex .card-img-top {
    max-height: 200px;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* -sm- */

@media (min-width: 576px) {
  .card.d-sm-flex .card-img-top {
    width: auto;
  }
}

/* -md- */

@media (min-width: 768px) {
  .activity .card-body.flex-row .meta {
    max-width: 30%;
  }
}