<header>
<h1>Responsive Dividers</h1>
</header>
<article class="wrapper">
<div class="row">
<!-- card 1 -->
<div class="card col col-auto splitContent">
<div class="container">
<!-- Start row -->
<div class="row">
<!-- Start col -->
<div class="col col-auto">
<div class="cardSect">
<div class="item">
<div class="head">
<div class="icon">
<i class="fas fa-bug big"></i>
</div>
<div class="title">
John Doe
</div>
</div>
<div class="content">
Professional Cat Food Eater who writes his tasklists in MS Paint. He started with Trello, and was quoted saying, "it just takes to long to type words."
</div>
</div>
</div>
</div>
<!-- End col -->
<!--Divider!-->
<div class="col col-auto" id="dividerWrap">
<div class="contentDivider">
<div class="dividedText"><strong>AND</strong></div>
</div>
</div>
<!--divider end-->
<!-- Start col -->
<div class="col col-auto">
<div class="cardSect">
<div class="item">
<div class="head">
<div class="icon">
<i class="fas fa-snowplow big"></i>
</div>
<div class="title">
Jane Plaza
</div>
</div>
<div class="content">
Architect & Engineer, also professional cat food eater who once thought lemurs were not lemurs. This led to a small but significant misunderstanding when she tried checking a koala at LAX due to laws surrounding trafficing exotic animals.
</div>
</div>
</div>
</div>
<!-- End col -->
</div>
<!-- End Row-->
</div>
<!-- End Container-->
</div>
<!-- End Card 1 -->
<!-- card 1 -->
<div class="card col col-auto splitContent">
<div class="container">
<!-- Start row -->
<div class="row split">
<!-- Start col -->
<div class="col col-auto ">
<div class="cardSect">
<div class="item">
<div class=head>
<div class="title">
John Doe
</div>
</div>
<div class="content">
Professional Cat Food Eater who writes his tasklists in MS Paint. He started with Trello, and was quoted saying, "it just takes to long to type words".
</div>
</div>
</div>
</div>
<!-- End col -->
<!--Divider!-->
<div class="col col-auto" id="dividerWrap">
<div class="contentDivider">
<div class="dividedText">
<div class="icon">
<i class="medium fas fa-cocktail"></i>
</div>
</div>
</div>
</div>
<!--divider end-->
<!-- Start col -->
<div class="col col-auto">
<div class="cardSect">
<div class="item">
<div class="head">
<div class="title">
Jane Plaza
</div>
</div>
<div class="content">
Architect & Engineer, also professional cat food eater who once thought lemurs were not lemurs. This led to a small but significant misunderstanding when she tried checking a koala at LAX due to laws surrounding trafficing exotic animals.
</div>
</div>
</div>
<!-- End col -->
</div>
<!-- End Row-->
</div>
<!-- End Container-->
</div>
<!-- End Card 1 -->
</div>
<!--End wrapper row-->
</article>@import url('https://fonts.googleapis.com/css?family=Amiko|Poppins|Work+Sans');
body {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}
$amiko-stack: Amiko, "Helvetica Neue", Helvetica, Arial, sans-serif;
//theme
/*colors*/
$colors: (
'cyprus': hsl(198, 100%, 13%),
'ebb': hsl(0, 0%, 91%),
'corn': hsl(44, 95%, 48%),
'cerise': hsl(318, 100%, 50%),
'cadillac': hsl(318, 41%, 47%),
'tardis-blue': hsl(207, 100%, 18%),
//scheme-base
'sherpa-blue': hsl(198, 100%, 13%),
'calypso': hsl(197, 40%, 39%),
'spring-green': hsl(165, 95%, 48%),
'sunset-orange': hsl(5, 88%, 61%),
'cardinal': hsl(350, 78%, 42%),
//dark and light
'midnight': hsl(207, 100%, 8%),
);
$headerSizes: 48px 40px 31px 25px 20px 16px;
$index: 1;
@while $index <= 6 {
h#{$index}, .h#{$index} {
font-size: nth($headerSizes, $index);
}
$index: $index + 1;
}
.wrapper {
max-width: 100%;
margin-left: 10%;
margin-right: 10%;
padding-right:auto;
padding-left:auto;
display: flex;
flex-flow: column wrap;
}
.container {
padding: 2em;
margin: auto;
}
.card {
text-align: left;
padding: 1em;
margin: 1em;
border: 2px solid #d3d3d3;
border-radius: 0.5em;
.container {
padding: 0;
min-width: 300px;
}
}
.splitContent {
justify-content: space-between;
min-width: 50%;
}
.col {
flex: 1 2 0;
max-width: 100%;
&.col-auto {
position: relative;
padding-left:15px;
padding-right: 15px;
}
}
.row {
display: flex;
flex-flow: row wrap;
margin: 0 -15px 0 -15px;
}
.cardSect {
align-content: center;
justify-content: center;
margin: 10px;
min-width: 180px;
display: flex;
flex-wrap: wrap;
}
.icon {
.big {
font-size: 50px;
}
.medium {
font-size: 35px;
}
.small {
font-size: 20px;
}
.xs {
font-size: 10px;
}
}
.item {
& > .head {
text-align: center;
margin-bottoom: 5px;
.title{
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
.icon {
margin-bottom: 10px;
}
}
.content {
font-size: 15px;
}
}
@media (max-width: 991.98px) {
.title {
text-align: center;
}
.cardSect {
justify-content: center;
min-height: 100px;
}
#dividerWrap {
flex-basis: 0;
flex-grow: 1;
min-width: 90%;
}
.item {
display: block;
min-width: 300;
}
.contentDivider {
margin: 15px 0 15px 0;
font-size: 20px;
.dividedText {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
&:before,
&:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
}
&:after {
margin: 0 0 0 20px;
}
}
}
}
@media (min-width: 992px) {
#dividerWrap {
flex-basis: 0;
flex-grow: 1;
max-width: 20px;
padding: -10px 0 -10px;
justify-content: center;
}
.split {
justify-content: center;
}
.contentDivider {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
justify-self: center;
height: 100%;
min-width: 100%;
.dividedText {
&:before,
&:after {
position: absolute;
content: "";
width: 1px;
left: 50%;
border-left: 2px solid black;
}
&:before {
bottom: 50%;
top: 0;
margin-bottom: 20px;
}
&:after {
top: 50%;
bottom: 0;
margin-top: 20px;
}
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.