<body>
<div id="container">
<h2>OUR USERS STORIES FROM AROUND THE WORLD</h2>
<div id="user1" class="user"> <img id="user1_img" src="http://img.timeinc.net/time/daily/2010/1011/poy_nomination_agassi.jpg">
<p class="name">ROBERT STEVEN</p>
<p class="location">NEWYORK , USA</p>
<p class="cursor">''</p>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div id="user2" class="user"> `<img id="user2_img" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="name">EMMIE SMITH</p>
<p class="location">LONDON , UK</p>
<p class="cursor">''</p>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div id="user3" class="user"> <img id="user3_img" src="https://www.ebizfiling.com/wp-content/uploads/2017/12/images_20-3.jpg">
<p class="name">DAVID MILLER</p>
<p class="location">PARIS , GERMANY</p>
<p class="cursor">''</p>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</body>
<style type="text/css">body {
margin: 0;
padding: 0
}
#container {
width: 100%;
height: 640px;
background-image: url(16.jpg);
background-color: #E9EAEA;
margin: 0;
padding: 0
}
h2 {
text-align: center;
position: relative;
top: 30px;
color: black;
text-shadow: 2px 2px 2px violet
}
#user1,
#user2,
#user3 {
width: 24%;
height: 500px;
border-radius: 10px;
background-color: white;
display: inline-block;
margin-left: 15px;
box-shadow: 15px 8px 15px brown;
position: relative;
top: 40px;
left: 11%
}
#user1:hover,
#user2:hover,
#user3:hover {
background-color: aquamarine;
transition: 1s;
width: 27%;
height: 560px;
transform: rotate(-10deg);
animation-duration: 3s
}
#user1_img,
#user2_img,
#user3_img {
width: 110px;
height: 110px;
border-radius: 50%;
position: relative;
top: 5px;
left: 33%
}
.name {
font-size: 20px;
font-weight: bold;
color: darkblue;
text-align: center;
position: relative;
top: 5px
}
.location {
font-size: 20px;
font-weight: bold;
color: darkorange;
text-align: center;
position: relative;
top: -10px
}
.cursor {
font-size: 50px;
color: palevioletred;
margin-left: 10px;
position: relative;
top: -55px
}
.text {
font-size: 18px;
color: darkslategrey;
margin-left: 25px;
margin-right: 7px;
position: relative;
top: -115px
}
@media only screen and (max-width: 1200px) {
#user1,
#user2,
#user3 {
height: 600px
}
#container {
height: 740px
}
}
@media only screen and (max-width: 880px) {
#user1,
#user2,
#user3 {
height: 750px
}
#container {
height: 900px
}
#user1_img,
#user2_img,
#user3_img {
height: 70px;
width: 70px
}
.name,
.location {
font-size: 15px;
position: relative;
top: 10px
}
}
@media only screen and (max-width: 750px) {
#user1:hover,
#user2:hover,
#user3:hover {
height: 670px
}
}
@media only screen and (max-width: 653px) {
#user1,
#user2,
#user3 {
height: 800px
}
#container {
height: 950px
}
h2 {
font-size: 20px
}
#user1:hover,
#user2:hover,
#user3:hover {
height: 770px
}
}
@media only screen and (max-width: 610px) {
#container {
height: 1200px
}
#user1,
#user2,
#user3 {
display: block;
width: 80%;
height: 330px;
margin-bottom: 20px
}
#user1:hover,
#user2:hover,
#user3:hover {
height: 370px;
width: 85%
}
#user1_img,
#user2_img,
#user3_img {
position: relative;
left: 42%;
top: 10px
}
.name {
position: relative;
top: -7px
}
.location {
position: relative;
top: -20px
}
.cursor {
position: relative;
top: -75px
}
.text {
position: relative;
top: -155px
}
}
@media only screen and (max-width: 480px) {
#container {
height: 1670px
}
#user1,
#user2,
#user3 {
width: 70%;
height: 500px
}
#user1:hover,
#user2:hover,
#user3:hover {
height: 460px;
width: 85%
}
}
@media only screen and (max-width: 300px) {
#user1_img,
#user2_img,
#user3_img {
position: relative;
left: 35%;
height: 40px;
width: 40px
}
#user1,
#user2,
#user3 {
height: 600px
}
#container {
height: 2000px
}
}
@media only screen and (max-width: 262px) {
#user1,
#user2,
#user3 {
height: 750px
}
#container {
height: 2600px
}
#user1:hover,
#user2:hover,
#user3:hover {
height: 660px
}
}
@media only screen and (max-width: 213px) {
#user1,
#user2,
#user3 {
height: 900px
}
#container {
height: 3200px
}
#user1:hover,
#user2:hover,
#user3:hover {
height: 920px
}
}
@media only screen and (max-width: 192px) {
#user1,
#user2,
#user3 {
height: 1050px
}
#container {
height: 3400px
}
.cursor {
margin-left: 2px
}
.text {
margin-left: 10px
}
#user1_img,
#user2_img,
#user3_img {
position: relative;
left: 22%
}
}
</style>