data-original-width="1920" src="https://i.ytimg.com/vi/Lwffjin8bzM/maxresdefault.jpg" />

Please subscribe our channel and support me.
Please like and 1 comment this video.


If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : class="simple-endpoint" dir="auto" href="https://www.youtube.com/channel/UCP43UNTq7UZD1cu_qTbmC9A"
spellcheck="false">https://www.youtube.com






Html Code




<div class="container">
<div class="features">
<h4 class="title">Features</h4>
<h2 class="title">Our Fearures & Services.</h2>
<div class="card-container">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfGxunsT1KsqoQsHp6iyHhQUB9M-vCmFE9NaEtAl8bMqQT9hGBlh0Cv91QnPujj9i541d1XWqgzIpdGmg0690dkHIlrcIJmi4JODQ_ge-FJVnJQZByFlt5FgoXdssSj2SB_ZHkUWInnxuMeVJ3kacykx5I_G8NqdRUPe2QReRap_QquaxDB10-NUFqvA/s320/image.jpeg" alt="" class="image">
<div class="meta">
<h3 class="title">Communications</h3>
<p class="intro">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quosLorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quos.</p>
<a href="#" class="button">More</a>
</div>
</div>
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJ8jBUYHvIU0Ky5UPYWBA8-I6l__wApeeB3w7-widkGlYqtROnIIORL99Q7xdw8lRRi0JtwwThBIPGl2RcoDRe5yKPfjfwSQGOHMj3zCvQGjkvzC1fAPXltleyBacLKTZ3NLLmRrG5nUR-UKAIwuT7VqQE3gRE7rnwedvtXrbev_B5_Jrf_u3lHsAjg/s320/image3.jpg" alt="" class="image">
<div class="meta">
<h3 class="title">Inspired Design</h3>
<p class="intro">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quosLorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quos.</p>
<a href="#" class="button">More</a>
</div>
</div>
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqetonldXWgi-TuSRcQJMJBddnpPHPDWYpZOOD4DEuyEIQyp9VH1-Bj7YFEgfEtdDMmPqj-JnBghPNRpX7KZhr8t0ytdTSGvT7hs1aPJGOdOZ8A7NGdTvRpr2m6XXv-0kRnFPdweXU6ZXSrgmt3EaPlgYH_uNw1PqdGeXXDEOqy7Is51681Qjm44AMdg/s320/image5.jpg" alt="" class="image">
<div class="meta">
<h3 class="title">Live Chatting</h3>
<p class="intro">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quosLorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus unde nisi quos.</p>
<a href="#" class="button">More</a>
</div>
</div>
</div>
</div>
</div>




Css Code



body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #a4d7f9;
}

.container {
width: 1020px;
margin: 0 auto;
padding: 10px;
}

.features {
margin: 40px;
text-align: center;
}

.features .title {
color: #006682;
}

.features h4 {
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
}

.features .card-container {
display: flex;
width: fit-content;
margin: 0 auto;
}

.features .card {
width: 30%;
margin: 2%;
padding: 15px;
display: block;
background: #ffffff;
overflow: hidden;
border-radius: 10px;
box-shadow: 2px 2px 10px #0002;
}

.features .card .image {
width: 200px;
height: 200px;
}

.features .meta {
width: fit-content;
display: block;
}

.features .meta .intro {
color: #44595f;
line-height: 1.4;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}


.features .card .button {
display: inline-block;
background: #00668248;
color: #006682;
text-decoration: none;
text-transform: uppercase;
padding: 8px 40px;
border-radius: 20px;
transition: all 0.3s;
border: solid 1px #006682;
margin-bottom: 20px;
}

.features .card .button:hover {
background: #006682;
color: #ffffff;
}

@media screen and (max-width:1020px) {
.container {
width: 100%;
}

.features .card-container {
flex-direction: column;
}

.features .card {
width: auto;
}
}

@media screen and (max-width:1020px) and (min-width:580px) {
.features .card {
display: flex;
align-items: center;
}

.features .image {
margin-right: 15px;
}
}



@ Recommendations Videos


blogger theme design : spellcheck="false">https://youtu.be/DAIJTjRzxLk


Login Form : spellcheck="false">https://youtu.be/HWbAr1XN3Lc


Forms design : spellcheck="false">https://youtu.be/M2ERkDXjEuw


Responsive CSS card : spellcheck="false">https://youtu.be/Ol9_5cYtAaw


Navigation design : spellcheck="false">https://youtu.be/LNEgZBdWPGM



Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976,
allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and
research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational
or personal use tips the balance in favor of fair use .


Thanks..