Image Hotspot Custom Template 01-10
Custom Template 01
Parking Zone
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aliquid consequatur, corporis deserunt
doloremque ea eaque enim eum non perferendis praesentium repudiandae sunt tenetur totam unde ut vitae
voluptate.
<div class="imh-6310-custom-temp-01">
<div class="imh-6310-custom-temp-01-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="">
</div>
<div class="imh-6310-custom-temp-01-content">
<div class="imh-6310-custom-temp-01-title">Parking Zone</div>
<div class="imh-6310-custom-temp-01-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aliquid consequatur, corporis deserunt
doloremque ea eaque enim eum non perferendis praesentium repudiandae sunt tenetur totam unde ut vitae
voluptate.
</div>
<div class="imh-6310-custom-temp-01-read-more">
<a href="#">Read more</a>
</div>
</div>
</div>
.imh-6310-custom-temp-01 {
float: left;
width: 350px;
background: #ce165a;
border: 5px solid white;
box-shadow: 0 0 7px 0px black;
padding: 10px;
text-align: center;
font-family: sans-serif;
}
.imh-6310-custom-temp-01-icon img {
width: 100%;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-icon {
width: 100px;
height: 100px;
margin: 5px auto 10px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-icon i {
font-size: 40px;
color: #211a0f;
}
.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-title {
font-size: 26px;
color: #ffffff;
font-weight: 700;
}
.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-title:after {
content: "";
display: block;
width: 0;
height: 5px;
margin: 0 auto;
background: #ec4151;
transition: all 0.3s ease-in-out 0s;
}
.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-description {
font-size: 14px;
color: #ffffff;
font-weight: 500;
text-align: center;
line-height: 27px;
}
.imh-6310-custom-temp-01-read-more {
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
}
.imh-6310-custom-temp-01-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-09-read-more a:hover {
background: #259783;
}
@media only screen and (max-width: 990px) {
.imh-6310-custom-temp-01 {
margin-bottom: 30px;
}
}
@media only screen and (max-width: 767px) {
.imh-6310-custom-temp-01 {
min-height: 300px;
}
}
@media only screen and (max-width: 479px) {
.imh-6310-custom-temp-01 {
min-height: 320px;
}
}
Custom Template 02
Food Corner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga
libero
magni placeat possimus sequi
<div class="imh-6310-custom-temp-02">
<div class="imh-6310-custom-temp-02-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/10/fast_food.png" alt="demo-2">
</div>
<div class="imh-6310-custom-temp-02-content">
<div class="imh-6310-custom-temp-02-title">Food Corner</div>
<div class="imh-6310-custom-temp-02-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga
libero
magni placeat possimus sequi
</div>
<div class="imh-6310-custom-temp-02-read-more">
<a href="#">Read more</a>
</div>
</div>
</div>
.imh-6310-custom-temp-02 {
width: 350px;
border: 1px solid #41d7f7;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #b2fefa, #ffffff);
}
.imh-6310-custom-temp-02:before,
.imh-6310-custom-temp-02:after {
content: "";
display: block;
width: 50px;
height: 5px;
background: #41d7f7;
position: absolute;
left: 40px;
opacity: 1;
transition: all 0.5s ease 0s;
}
.imh-6310-custom-temp-02:before {
top: -3px;
}
.imh-6310-custom-temp-02:after {
bottom: -3px;
}
.imh-6310-custom-temp-02-icon img {
width: 100%;
}
.imh-6310-custom-temp-02-icon {
float: left;
width: 40%;
}
.imh-6310-custom-temp-02-content {
float: left;
width: 70%;
}
.imh-6310-custom-temp-02 .imh-6310-custom-temp-02-title {
font-size: 25px;
font-weight: 700;
color: #41d7f7;
}
.imh-6310-custom-temp-02 .imh-6310-custom-temp-02-description {
font-size: 15px;
color: rgb(0, 0, 0);
line-height: 25px;
font-family: sans-serif;
}
.imh-6310-custom-temp-02-read-more {
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
}
.imh-6310-custom-temp-02-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-02-read-more a:hover {
background: #259783;
}
@media only screen and (max-width: 990px) {
.imh-6310-custom-temp-02 {
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
.imh-6310-custom-temp-02-content {
text-align: center;
}
}
Custom Template 03
Gear Wheel
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
quisquam amet ab facere error debitis illo aut perferendis .
<div class="imh-6310-custom-temp-03">
<div class="imh-6310-custom-temp-03-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo3">
</div>
<div class="imh-6310-custom-temp-03-content">
<div class="imh-6310-custom-temp-03-title">Gear Wheel</div>
<div class="imh-6310-custom-temp-03-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
quisquam amet ab facere error debitis illo aut perferendis .</div>
<div class="imh-6310-custom-temp-03-read-more">
<a href="#">Read more</a>
</div>
</div>
</div>
.imh-6310-custom-temp-03 {
color: #1C6E87;
font-family: 'Poppins', sans-serif;
background: #fafad2;
text-align: center;
padding: 0 20px;
width: 350px;
border: 2px solid;
float: left;
}
.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-icon {
font-size: 80px;
transform: translateY(5px);
line-height: 100px;
width: 100px;
height: 100px;
margin: 0 auto 10px;
border: 2px solid #1C6E87;
overflow: hidden;
}
.imh-6310-custom-temp-03-icon img {
width: 100%;
display: block;
}
.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-content {
background-color: rgba(255, 255, 255, 0);
padding: 15px 15px 15px;
border: 10px solid #1C6E87;
border-left: none;
border-right: none;
float: left;
width: 100%;
}
.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-title {
color: #1c6e87;
font-size: 30px;
line-height: 35px;
font-weight: 600;
letter-spacing: 2px;
display: block;
}
.imh-6310-custom-temp-03-description {
font-size: 16px;
color: #444;
float: left;
width: 100%;
}
.imh-6310-custom-temp-03-read-more {
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
}
.imh-6310-custom-temp-03-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-03-read-more a:hover {
background: #259783;
}
@media screen and (max-width:990px) {
.imh-6310-custom-temp-03 {
margin-bottom: 40px;
}
}
Custom Template 04
Gear Wheel
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint
aspernatur sapiente doloremque temporibus? Fugit, iusto, illo corporis quod nesciunt dolorum optio deleniti amet
quibusdam explicabo quis asperiores ducimus excepturi quasi?
<div class="imh-6310-custom-temp-04">
<div class="imh-6310-custom-temp-04-title">Gear Wheel</div>
<div class="imh-6310-custom-temp-04-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint
aspernatur sapiente doloremque temporibus? Fugit, iusto, illo corporis quod nesciunt dolorum optio deleniti amet
quibusdam explicabo quis asperiores ducimus excepturi quasi?</div>
<div class="imh-6310-custom-temp-04-read-more">
<a href="#">Read more</a>
</div>
<div class="imh-6310-custom-temp-04-icon"><img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg"
alt="demo4"></div>
</div>
.imh-6310-custom-temp-04 {
width: 350px;
color: #444;
background: linear-gradient(3deg, #ffc44b, white, white, #ffffff);
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
padding: 20px 15px;
margin-top: 10px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%), 3px -3px #fcaa02;
border-radius: 7px;
}
.imh-6310-custom-temp-04-title {
color: #fff;
background-color: #FCAA02;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 6px 5px;
margin: 0 0 16px;
border-radius: 5px;
}
.imh-6310-custom-temp-04 .imh-6310-custom-temp-04-description {
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin: 0 0 15px;
display: block;
text-align: left;
}
.imh-6310-custom-temp-04 .imh-6310-custom-temp-04-icon {
color: #FCAA02;
font-size: 35px;
line-height: 35px;
}
.imh-6310-custom-temp-04-icon img {
width: 100px;
}
.imh-6310-custom-temp-04-read-more {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.imh-6310-custom-temp-04-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-04-read-more a:hover {
background: #259783;
}
@media screen and (max-width:990px) {
.imh-6310-custom-temp-04 {
margin-bottom: 40px;
}
}
Custom Template 05
Your title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam repellat sed dolorum, placeat dolorem quaerat eos asperiores iusto velit. Tenetur excepturi porro id, quia suscipit unde cumque asperiores adipisci eligendi?
<div class="imh-6310-custom-temp-05">
<div class="imh-6310-custom-temp-05-title">Your title</div>
<div class="imh-6310-custom-temp-05-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam repellat sed dolorum, placeat dolorem quaerat eos asperiores iusto velit. Tenetur excepturi porro id, quia suscipit unde cumque asperiores adipisci eligendi?</div>
<div class="imh-6310-custom-temp-05-read-more">
<a href="#">Read more</a>
</div>
<div class="imh-6310-custom-temp-05-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo5">
</div>
</div>
.imh-6310-custom-temp-05 {
width: 350px;
background: #00203F;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
padding: 0 0 25px;
margin: 0 auto 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
position: relative;
}
.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-title {
color: #fff;
background: linear-gradient(to right, #19bbd2, #2778ee);
font-size: 38px;
font-weight: 300;
padding: 0 0 3px;
margin: 0 0 25px;
border-radius: 10px 10px 0 0;
display: block;
}
.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-description {
color: #ffffff;
font-size: 13px;
line-height: 20px;
letter-spacing: 0.5px;
text-transform: capitalize;
margin: 0 0 25px;
font-family: sans-serif;
padding: 0 5px;
}
.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-icon {
color: #fff;
background: linear-gradient(to right, #19bbd2, #2778ee);
font-size: 40px;
line-height: 100px;
width: 130px;
height: 130px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
outline: 6px solid #00203f;
box-shadow: 0 0 9px 6px white;
}
.imh-6310-custom-temp-05-icon img {
width: 100%;
float: left;
}
.imh-6310-custom-temp-05.yellow .title {
color: #e69814;
}
.imh-6310-custom-temp-05-read-more {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.imh-6310-custom-temp-05-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-05-read-more a:hover {
background: #259783;
}
@media screen and (max-width:990px) {
.imh-6310-custom-temp-05 {
margin-bottom: 45px;
}
}
Custom Template 06
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra lectus quis placerat ultricies. Praesent ipsum turpis, mollis eget accumsan id, iaculis vel ipsum.
Car shop
<div class="imh-6310-custom-temp-06">
<div class="imh-6310-custom-temp-06-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra lectus quis placerat ultricies. Praesent ipsum turpis, mollis eget accumsan id, iaculis vel ipsum.
</div>
<div class="imh-6310-custom-temp-06-read-more">
<a href="#">Read more</a>
</div>
<div class="imh-6310-custom-temp-06-img">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo6">
</div>
<div class="imh-6310-custom-temp-06-title">Car shop</div>
</div>
.imh-6310-custom-temp-06 {
width: 350px;
background: linear-gradient(#ffffff, #9effee);
text-align: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
float: left;
}
.imh-6310-custom-temp-06 .imh-6310-custom-temp-06-description {
font-size: 15px;
color: #585656;
line-height: 27px;
margin: 15px;
font-family: cursive;
}
.imh-6310-custom-temp-06-img {
display: inline-block;
width: 130px;
height: 130px;
border: 5px solid #1bddc6;
margin-bottom: 15px;
position: relative;
background: #fff;
font-size: 50px;
color: #1bddc6;
box-sizing: border-box;
}
.imh-6310-custom-temp-06-img::after {
content: "";
border-width: 12px;
border-style: solid;
border-color: #1bddc6 #1bddc6 transparent transparent;
position: absolute;
bottom: -25px;
right: 20%;
transform: rotate(0deg);
}
.imh-6310-custom-temp-06-img img {
width: 100%;
height: auto;
}
.imh-6310-custom-temp-06-title {
display: block;
font-size: 22px;
font-weight: 700;
color: #413f3f;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 7px;
}
.imh-6310-custom-temp-06-read-more {
float: left;
width: 100%;
margin: 15px 0;
text-align: center;
}
.imh-6310-custom-temp-06-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-06-read-more a:hover {
background: #259783;
}
Custom Template 07
Car
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu dolor eget ante pretium commodo. Cum sociis
natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="imh-6310-custom-temp-07">
<div class="imh-6310-custom-temp-07-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo7">
</div>
<div class="imh-6310-custom-temp-07-title">Car</div>
<div class="imh-6310-custom-temp-07-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu dolor eget ante pretium commodo. Cum sociis
natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div class="imh-6310-custom-temp-07-read-more">
<a href="#">Read more</a>
</div>
</div>
.imh-6310-custom-temp-07 {
text-align: center;
padding: 50px 29px 5px;
border-top: 5px solid #000000;
position: relative;
width: 350px;
background: #3f51b5;
margin-top: 80px !important;
float: left;
}
.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon {
width: 120px;
height: 120px;
border: 5px solid #000000;
position: absolute;
top: -80px;
left: 0;
right: 0;
margin: 0 auto;
}
.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon img {
width: 100%;
height: auto;
}
.imh-6310-custom-temp-07-title {
float: left;
width: 100%;
font-size: 35px;
color: #fff;
font-weight: 500;
text-align: center;
}
.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-description {
font-size: 14px;
color: #ffffff;
line-height: 30px;
}
.imh-6310-custom-temp-07-read-more {
float: left;
width: 100%;
margin:20px 0;
text-align: center;
}
.imh-6310-custom-temp-07-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-07-read-more a:hover {
background: #259783;
}
@media only screen and (max-width: 479px) {
.imh-6310-custom-temp-07 {
padding: 80px 15px 5px;
}
.imh-6310-custom-temp-07::before {
top: 10px;
}
.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon {
width: 120px;
height: 120px;
top: -60px;
}
}
Custom Template 08
hotel
Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui
quaerat
fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
<div class="imh-6310-custom-temp-08">
<div class="imh-6310-custom-temp-08-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/10/fast_food.png" alt="demo8">
</div>
<div class="imh-6310-custom-temp-08-title">hotel</div>
<div class="imh-6310-custom-temp-08-description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui
quaerat
fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
<div class="imh-6310-custom-temp-08-read-more">
<a href="#">Read more</a>
</div>
</div>
.imh-6310-custom-temp-08 {
width: 350px;
color: #db7100;
background: #db7100;
font-family: 'Zen Maru Gothic', sans-serif;
text-align: center;
padding: 25px 20px;
border-radius: 10px;
position: relative;
z-index: 1;
float: left;
}
.imh-6310-custom-temp-08:before,
.imh-6310-custom-temp-08:after {
content: "";
background: linear-gradient(to right bottom, #fff, #eee);
border-radius: 10px 10px 80px 10px;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
z-index: -1;
}
.imh-6310-custom-temp-08:after {
background: #db7100;
width: 60px;
height: 60px;
border-radius: 10px 0 150% 0;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
}
.imh-6310-custom-temp-08 .imh-6310-custom-temp-08-icon {
background: transparent;
font-size: 45px;
line-height: 87px;
width: 50%;
margin: 0 auto 15px;
}
.imh-6310-custom-temp-08-icon img {
width: 100%;
}
.imh-6310-custom-temp-08-title {
font-size: 21px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 10px;
}
.imh-6310-custom-temp-08-description {
color: #555;
font-size: 15px;
line-height: 23px;
}
.imh-6310-custom-temp-08-read-more {
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
}
.imh-6310-custom-temp-08-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-08-read-more a:hover {
background: #259783;
}
@media only screen and (max-width: 990px) {
.imh-6310-custom-temp-08 {
margin: 0 0 30px;
}
}
Custom Template 09
Car Wash
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat
fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
<div class="imh-6310-custom-temp-09">
<div class="imh-6310-custom-temp-09-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo9">
</div>
<div class="imh-6310-custom-temp-09-title">Car Wash</div>
<div class="imh-6310-custom-temp-09-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat
fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
<div class="imh-6310-custom-temp-09-read-more">
<a href="#">Read more</a>
</div>
</div>
.imh-6310-custom-temp-09 {
width: 350px;
float: left;
background: linear-gradient(3deg, #ffeb3b, #03a9f4);
font-family: 'Montserrat', sans-serif;
text-align: center;
padding: 0px 25px 40px;
margin: 20px 0 0;
border-radius: 20px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.imh-6310-custom-temp-09:before,
.imh-6310-custom-temp-09:after {
content: "";
background: linear-gradient(to top, #008d86, #01a2a6);
width: 10px;
border-radius: 0 100px 100px 0;
position: absolute;
top: 110px;
bottom: 35px;
left: 0;
}
.imh-6310-custom-temp-09:after {
border-radius: 100px 0 0 100px;
left: auto;
right: 0;
}
.imh-6310-custom-temp-09 .imh-6310-custom-temp-09-icon {
color: #fff;
background: linear-gradient(-45deg, #008d86 49%, #01a2a6 50%);
font-size: 45px;
line-height: 92px;
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 100px;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: translateY(-20px);
overflow: hidden;
}
.imh-6310-custom-temp-09-icon img {
width: 100%;
}
.imh-6310-custom-temp-09-title {
color: #ffffff;
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 10px;
}
.imh-6310-custom-temp-09-description {
color: #000;
font-size: 14px;
line-height: 24px;
margin: 0;
}
.imh-6310-custom-temp-09-read-more {
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
}
.imh-6310-custom-temp-09-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-09-read-more a:hover {
background: #259783;
}
@media only screen and (max-width:990px) {
.imh-6310-custom-temp-09 {
margin: 20px 0 50px;
}
}
Custom Template 10
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat elit sed est semper, ultricies
maximus odio tempor. Ut viverra felis neque.
<div class="imh-6310-custom-temp-10">
<div class="imh-6310-custom-temp-10-icon">
<img src="https://wpmart.org/wp-content/uploads/2022/01/popcorn.png" alt="demo10">
</div>
<div class="imh-6310-custom-temp-10-content">
<div class="imh-6310-custom-temp-10-title">Lorem ipsum</div>
<div class="imh-6310-custom-temp-10-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat elit sed est semper, ultricies
maximus odio tempor. Ut viverra felis neque.
</div>
<div class="imh-6310-custom-temp-10-read-more">
<a href="#">Read more</a>
</div>
</div>
</div>
.imh-6310-custom-temp-10 {
width: 350px;
background: #295F2E;
text-align: center;
margin: 20px 0 30px 0;
float: left;
display: flex;
border: 1px solid #d1d1d1;
}
.imh-6310-custom-temp-10-icon img {
width: 100%;
}
.imh-6310-custom-temp-10-icon {
width: 150px;
padding: 8px;
border: 1px solid #dbdbdb;
box-sizing: content-box;
margin: 0 auto;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.imh-6310-custom-temp-10-content {
float: left;
width: 100%;
}
.imh-6310-custom-temp-10-title {
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
letter-spacing: 1.25px;
margin-bottom: 16px;
color: #ffffff;
transition: all 0.21s ease 0s;
}
.imh-6310-custom-temp-10-description {
padding: 0 35px;
color: #FFE67C;
line-height: 1.7;
font-size: 14px;
font-family: sans-serif;
}
.imh-6310-custom-temp-10-read-more {
float: left;
width: 100%;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
.imh-6310-custom-temp-10-read-more a {
text-decoration: none;
font-size: 14px;
color: white;
width: 150px;
border: 1px solid;
padding: 5px 15px;
background: #18c7a9;
}
.imh-6310-custom-temp-10-read-more a:hover {
background: #259783;
}