How to create a Testimonials | HTML & CSS Project Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made Amazing Testimonials with the help of HTML and CSS Only!😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Instagram login page clone that you can use in your portfolio or projects. So it will look attractive and will give good expression
Let's start making this amazing testimonials in HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used figure tag for the testimonials and because it's a perfect tag of HTML5 to create things like testimonials
<figure class="snip1533">
<figcaption>
<blockquote>
<p>If you do the job badly enough, sometimes you don't get asked to do it again.</p>
</blockquote>
<h3>Wisteria Ravenclaw</h3>
<h4>Google Inc.</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
</blockquote>
<h3>Ursula Gurnmeister</h3>
<h4>Facebook</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>The only skills I have the patience to learn are those that have no real application in life. </p>
</blockquote>
<h3>Ingredia Nutrisha</h3>
<h4>Twitter</h4>
</figcaption>
</figure><figure class="snip1533">
<figcaption>
<blockquote>
<p>If you do the job badly enough, sometimes you don't get asked to do it again.</p>
</blockquote>
<h3>Wisteria Ravenclaw</h3>
<h4>Google Inc.</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
</blockquote>
<h3>Ursula Gurnmeister</h3>
<h4>Facebook</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>The only skills I have the patience to learn are those that have no real application in life. </p>
</blockquote>
<h3>Ingredia Nutrisha</h3>
<h4>Twitter</h4>
</figcaption>
</figure>
After the HTML we will design the figure tags, caption and will make an amazing design of the testimonial.
Output till now
CSS🎈( step - 2)
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.snip1533 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #9e9e9e;
display: inline-block;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
margin: 35px 10px 10px;
max-width: 310px;
min-width: 250px;
position: relative;
text-align: center;
width: 100%;
background-color: #ffffff;
border-radius: 5px;
border-top: 5px solid #d2652d;
}
.snip1533 *,
.snip1533 *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.snip1533 figcaption {
padding: 13% 10% 12%;
}
.snip1533 figcaption:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #d2652d;
content: "\f10e";
font-family: 'FontAwesome';
font-size: 32px;
font-style: normal;
left: 50%;
line-height: 60px;
position: absolute;
top: -30px;
width: 60px;
}
.snip1533 h3 {
color: #3c3c3c;
font-size: 20px;
font-weight: 300;
line-height: 24px;
margin: 10px 0 5px;
}
.snip1533 h4 {
font-weight: 400;
margin: 0;
opacity: 0.5;
}
.snip1533 blockquote {
font-style: italic;
font-weight: 300;
margin: 0 0 20px;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
the coder of this project :
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.