CSS Cards
Projects

CSS Cards for Math Layout

In this video, I’ll show how to create a unique CSS Card for Math layout. Using CSS Cards we’ll be building a unique Math Layout in upcoming tutorials.

HTML Code


<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="main.css">
	<title>CSS Cards for Math Layout </title>
   
	</head>
	
	<body>
     <div class="box">
         <h1><a href="">Mathematics</a></h1>
         <div class="text-holder">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deserunt quod recusandae consequuntur aspernatur, non hic earum architecto reiciendis autem.</p>
         </div>
         <ul class="links">
             <li class="rows row1">
                 <h3>Algebra 1</h3>
                 <a href="">250 skills</a>
             </li>
             <li class="rows row2">
                 <h3>Algebra 2</h3>
                 <a href="">250 skills</a>
             </li>
         </ul>
     </div>   
    </body>

</html>

CSS Code

/* Google fonts */ 
@import url('https://fonts.googleapis.com/css?family=Jomolhari|Lora|Open+Sans&display=swap');
/* reset and global */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}

/* centering the box and global styles */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f5f5f5;
  font: 16px 'Open Sans', sans-serif;
  color: #545454;
}
/* the box */
.box {
  background: #fff;
  border: 1px solid #10a0b6;
  border-radius: 5px;
  padding: 20px 20px 30px 20px;
  position: relative;
  width: 320px;
}
/* the outlined small box*/
.box::before {
  background: #10a0b6;
  width: 43px;
  height: 38px;
  content: 'M';
  position: absolute;
  left: -20px;
  color: #fff;
  font: 22px 'Lora', serif;
  border-radius: 0 19px 19px 0;
  text-align: center;
  line-height: 38px;
}
/* h1 */
h1 {
  padding: 0 0 15px 15px;
  font: 35px 'Lora', serif;
}
h1 a {
  color: #10a0b6;
}
/* the text */
.text-holder {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 10px;
  text-align: left;
}
/* rows and links */
.links {
  padding: 15px 0 0;
}
.rows {
  display: flex;
  justify-content: space-between;
  padding: 0 0 10px;
}
.rows h3 {
  font: 16px verdana, sans-serif;
  font-weight: 300;
}
.rows a {
  color: #10a0b6;
}
.rows a:hover {
  text-decoration: underline;
}

.rows a::after {
  content: '>>';
  padding: 0 0 3px;
}