<footer id="boot">
<ul class="flex cards">
<li><h2>Card 1</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
</li>
<li><h2>Card 2</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
</li>
<li><h2>Card 3</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
</li>
</ul>
<ul class="flex cards">
<li><h2>Card 1</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
</li>
<li><h2>Card 2</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
</li>
</ul>
</footer>
/*flex*/
#boot {
width: 100%;
bottom: 0%;
float: left;
position: relative;
z-index: 9;
margin-bottom: 8em;
}
#boot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
padding-bottom: 1%;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border-radius: 5px;
background-color: #00237E;
color: #fff;
flex: 1 1 200px;
}
.cards h2 {
background-color: #00237E;
margin: 0;
font-size: 2vw;
font-family: "BebasNeue Regular";
color: #CFD8DC;
padding-top: 1vw;
padding-right: 1vw;
padding-left: 1vw;
}
.cards p {
padding-top: 1vw;
padding-right: 1vw;
padding-left: 1vw;
padding-bottom: 1vw;
float: right;
font-size: 1.2em;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
line-height: 1.5em;
}
.flex li {
margin: 0.5em;
}
@media (max-width: 1280px) {
#boot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
padding-bottom: 1vw;
padding-top: 1vw;
padding-right: 1vw;
padding-left: 1vw;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border-radius: 5px;
background-color: #00237E;
color: #fff;
flex: 1 1 200px;
}
.cards h2 {
background-color: #00237E;
margin: 0;
font: 2rem "BebasNeue Regular";
color: #CFD8DC;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
.cards p {
padding: 5%;
float: right;
font-size: 1.4vw;
}
.flex li {
margin: 0.5em;
}
}
@media (max-width: 800px) {
#boot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
padding-bottom: 0%;
padding-top: 0%;
padding-right: 0%;
padding-left: 0%;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border-radius: 5px;
background-color: #00237E;
color: #fff;
flex: 1 1 200px;
}
.cards h2 {
background-color: #00237E;
margin: 0;
font: 2rem "BebasNeue Regular";
color: #CFD8DC;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
.cards p {
padding: 5%;
float: right;
font-size: medium;
}
.flex li {
margin: 0.5em;
}
}