Skip to main content

Course Card Design | Rustcode

Course-Card-Design-html-and-css
Course card design is a concept similar to the profile card design. But the course card can be used as a product card. This card is responsive and easily accessible from mobile. This card is created using only html and css.

We are using the "Muli" font-family. In this design, you can choose the font as per your convenience. You can also refer to our article for choosing font-family.

You will find all the necessary links and content in the middle of this article.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
 <title>Course Card Design | Rustcode</title>	
 <link rel="stylesheet" href="style.css">
</head>

<body>

   main content.

</body>
</html>


2. FONT-AWESOME PLUGIN

The basic HTML structure is ready for us, now let's include the font-awesome plugin in this HTML document. You can download this plugin from here. 

<!DOCTYPE html>
<html>
<head>
 <title>Course Card Design | Rustcode</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="style.css">
</head>

<body>

  main content.

</body>
</html>


3. CONTENT

<body>
   <div class="course">
      <div class="course-info">
         <h6>Course</h6>
         <h2>JavaScript Fundamentals</h2>
         <a href="#">View all chapters <i class="fa fa-chevron-right"></i></a>
      </div>
      <div class="course-progress">
         <div class="progress-container">
            <div class="progress"></div>
            <div class="progress-text">
               08/16 Challenges
            </div>
         </div>
         <h6>Chapter 5</h6>
         <h2>Types Of Arrays & Strings</h2>
         <button class="btn">Continue</button>
      </div>
   </div>
</body>


4. IMPORT FONT-FAMILY

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');



5. CSS

*{
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
font-family: 'Muli','Arial';
height: 100vh;
margin: 0px
}
.course{
background: #FFF;
border-radius: 4px;
box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.2);
display: inline-block;
overflow: hidden;
}
.course-info{
background: #ED474A;
color: #FFF;
float: left;
padding: 30px;
width: 35%;
}
.course-progress{
float: left;
padding: 30px;
position: relative;
width: 65%;
}
.course h2{
letter-spacing: 1px;
margin: 10px 0px;
}
.course h6{
letter-spacing: 1px;
opacity: 0.8;
text-transform: uppercase;
margin: 0px;
}
.course-info a{
color: #FFF;
display: inline-block;
font-size: 12px;
opacity: 0.8;
margin-top: 30px;
text-decoration: none;
}
.progress-container{
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress{
background: #DDD;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after{
border-radius: 3px;
background: #ED474A;
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 5px;
width: 50%;
}
.progress-text{
font-size: 10px;
opacity: 0.8;
letter-spacing: 1px;
}
.btn{
background: #ED474A;
border: 0px;
outline: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
color: #FFF;
font-size: 16px;
padding: 12px 25px;
position: absolute;
right: 30px;
bottom: -50px;
cursor: pointer;
letter-spacing: 1px;
}


6. RESPONSIVE CSS

@media screen and (max-width: 740px) {
.course-progress, .course-info{
width: 100%;
height: 200px;
float: none;
}
.course-info{
height: 140px;
}
.course-info h2{
margin: 8px 0px;
}
.course-info a{
margin-top: 10px;
}
.course-progress h2{
margin: 16px 0px;
}
.btn{
bottom: 30px;
left: 30px;
}
}


READ ALSO:


7. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


8. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment