Here is the code snippet I've been working on, aiming to achieve a design similar to this https://i.sstatic.net/OQkNA.png. Below is my code:
.service-box {
background: #fff;
margin: 0 -5px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
padding: 50px 30px;
-webkit-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
.service-box:hover {
background: #84a499;
color: #fff;
}
.service-box:hover .btn-primary {
background: #fff;
color: #222121 !important;
}
.service-box:hover .icon-rounded {
background: #688d80;
}
.service-box .service-title {
padding: 30px 0 22px 0;
margin: 0;
font-weight: 300;
}
.service-box .service-title a{
color: #222121;
}
.service-box:hover .service-title a {
color: #fff;
}
.service-box .btn{
margin-top: 10px;
}
.service-box .btn .fa{
margin-left: 5px;
}
.service-box .icon-rounded{
width: 80px;
height: 80px;
border: 1px dashed #e1e1e1;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
.service-box .icon-rounded:before{
font-size: 50px;
margin-left: 0;
}
<!-- Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,700,900,500italic' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<!-- Main CSS -->
<link rel="stylesheet" href="services/css/style.css" />
<div class="container-fluid" style="background-color: white;">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12" style="margin-bottom: 100px; margin-top: 100px" >
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-16" style="margin-bottom: 100px; margin-top: 100px" >
<div class="service-box">
<span class="icon-rounded flaticon-business70"></span>
<h2 class="service-title"><a href="services-single.html">Information Design</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed rhoncus ex condimentum. Donec placerat nunc ut porttitor blandit. Duis ex nisi, tristique nec nullaf non.</p>
<a class="btn btn-primary" href="services-single.html">Read More <i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-16" style="margin-bottom: 100px; margin-top: 100px">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</div>
</div>The output I have resembles this https://i.sstatic.net/skFQB.png
I'm currently stuck trying to replicate the first image using the provided code. If you have any suggestions or guidance on how to proceed with achieving the desired layout where an image is at the top followed by a title, description, and a separate "Read more" option in rectangles, please advise. Any help would be greatly appreciated.
Thank you