How to create colorful stylish cards using HTML and CSS?


I will learn how to make colorful flower stylish cards.

Frequently Asked Questions:

How to create special colorful stylish cards by creating CSS and HTML?


Yes, today we will learn how to make that much needed colorful stylish card. And finally I will give the source code and learn to do some customization.




Today we will learn how to create colorful stylish cards using only CSS, HTML but not java script. I have appeared with such a tutorial.


Actually there is not much customization and CSS and HTML to write but can be different as per your requirement. You can add many things and do customization here. We will learn this by just writing some simple code. And I will now give you the source code as a gift. You can learn more by customizing the source code. I always provide the source code so that we don't waste time building them. Hope you can do good customization. If you can't do it, there is no problem. I'll give you some pointers to help you do just that. Or you use the source code directly, no problem. Here is the source code and I will explain step by step later.


🍃

Source Code:





1. Create the HTML part


      <div class="card">Stylish Card</div>


Which we will put through the card. We have to put them inside the div tag. That is, if you want to add a photo, you need to create the HTML by following the example below.

For example: If you want to add a photo!

Solution:

     <div class="card">


<img src="photo address" height="50" width="50" style="position:center;margin-top:5px;"/>


</div>


Similarly you can add text, video, etc. Now if you want to add something outside the card : you need to add after </div> like :

<div class="card">


<img src="photo address" height="50" width="50" style="position:center;margin-top:5px;"/>


</div>


<jubayer><author text="author">This is created by</author><animation onclick="https://www.facebook.com/css.jubayer"> Sheikh Jubayer</animation></jubayer>



Note: Not much customization is required here, and you can add many things yourself if you need to. If there is any problem you can let me know.



 2. Creating the CSS part:


Here I will talk about CSS only customization. Here to summarize the content only those that need to be customized so we will learn how to do the customization.


CSS Customization 1:



body { background:linear-gradient(200deg,hotpink,gold,greenyellow,skyblue,white);}


Here you can select the color according to your choice. I have selected colors for my teaching convenience here.




Note: You can omit the background color here if you want. There will be no problem. Each color selection must be separated by a comma and placed inside the first parenthesis.


CSS Customization 2:

card {

background:linear-gradient(290deg,hotpink,gold,greenyellow,skyblue,grey);}



Here you have to select the color to color your stylish card.



    


Result:


Stylish Card
This is created by Sheikh Jubayer


Last words:

If you can complete the task correctly. Then using this source code you can easily create any colorful stylish card. It must be very easy for you to create special colorful stylish cards by creating CSS and HTML. Do not forget to give your opinion in the comment box.



Special Note:

There are no mistakes or errors in the source code because it has been tested and you are seeing the result above. Still, if there is any problem, you can let me know.




My Talk:


Thank you for reading this blog. Assalamu Alaikum! I am Sheikh Jubayer. I want to say something. In fact I have written this article or content or blog by taking a lot of pains, thinking, gaining knowledge about every topic and spending a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. However, if there is any problem, let me know in the comment box. I will try to answer your question properly. Hope it will be useful. I didn't write anything like hope in vain I believe it.




🍃

    My Talk:

    Thank you for reading this blog.
    Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!