<div class="container main">
<center>
<div class="row one">
<div class="col-sm-4 pic">
<img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1562038346/andrew_decristofaro.jpg">
</div>
<div class="col-sm-8 test1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
<center>
<br>
<p class="by">~ <b>Matthew Hussey</b></p>
</center>
</div>
</div><br><br>
<div class="row two">
<div class="col-sm-8 test1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
<center>
<br>
<p class="by">~ <b>Alisha Boe</b></p>
</center>
</div>
<div class="col-sm-4 pic">
<img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1562038385/Emily_20Rekstis.jpg">
</div>
</div><br><br>
<div class="row one">
<div class="col-sm-4 pic">
<img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1562038411/hqdefault.jpg">
</div>
<div class="col-sm-8 test1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
<center>
<br>
<p class="by">~ <b>Tiffany Briseno</b></p>
</center>
</div>
</div>
</center>
</div>
.main {
width: 70vw;
height: 90vh;
background: inherit;
padding: 1vw;
margin: auto;
position: relative;
top: 5vh
}
body {
background-color: black;
animation-name: background;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 2s;
font-family: 'Abel', sans-serif
}
img {
width: 10vw;
height: 10vw;
border: 2px solid blue;
transform: rotateY(180deg);
animation-name: photo;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s
}
.test1 {
background-color: white;
color: blue;
height: 10vw;
padding: 1vw;
font-size: 1.2vw;
animation-name: text;
animation-duration: 1s;
animation-fill-mode: forwards
}
@keyframes text {
from {
width: 0%;
font-size: 0vw
}
to {
width: 45vw;
font-size: 1.2vw
}
}
@keyframes photo {
from {
transform: rotateY(180deg)
}
to {
transform: rotateY(360deg)
}
}
@keyframes background {
from {
background-color: black
}
to {
background-color: #29b6f6
}
}
.by {
font-family: 'Dancing Script', cursive
}
@media only screen and (max-width: 425px) {
.main {
width: 100vw;
padding: 3vw;
height: auto
}
img {
height: 30vw;
width: 30vw;
margin: 5vw
}
.test1 {
height: 45vw;
padding: 3vw;
font-size: 3.6vw
}
}