New course cards with BEM

Developer
Hamza Erbay
Size
5,666 Kb
Views
78,936
  1. New course cards with BEM Previews
  2. New course cards with BEM HTML Codes
  3. New course cards with BEM CSS Codes

How do I make an new course cards with bem?

What is a new course cards with bem? How do you make a new course cards with bem? This script and codes were developed by Hamza Erbay on 12 June 2022, Sunday.

New course cards with BEM Previews
IQ Test

New course cards with BEM - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>new course cards with BEM</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,600,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='http://necolas.github.io/normalize.css/3.0.2/normalize.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: 'Open Sans';
}
.card-wrapper { width: 70%; margin: 0 auto;
}
.star-rating--static { position: relative; display: inline-block;
}
.star-rating--static:before { font-family: "FontAwesome"; content: "\f005 \0020 \f005 \0020 \f005 \0020 \f005 \0020 \f005";
}
.star-rating__star { color: #d23837; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; z-index: 2;
}
.star-rating__star:before { font-family: "FontAwesome"; content: "\f005 \0020 \f005 \0020 \f005 \0020 \f005 \0020 \f005";
}
a { text-decoration: none;
}
a:hover { text-decoration: none;
}
.ellipsis-2lines { display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 2; -moz-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-wrapper--list li { margin-bottom: 10px;
}
.card-wrapper .price { font-weight: bold; color: #17aa1c;
}
.card-wrapper .price--old { color: #000; text-decoration: line-through; margin-left: 5px;
}
.card-wrapper .label--new { border-radius: 0; background: #fff; font-weight: bold; padding: 3px 6px; position: absolute; bottom: 15px; left: 15px; z-index: 1; border: 1px solid #17aa1c; color: #17aa1c;
}
.card-wrapper .label--status { position: absolute; top: 10px; left: 10px; padding: 5px 10px; font-size: 13px; color: #fff;
}
.card { display: inline-block; vertical-align: top; margin: 10px; width: 230px; text-align: left; background-color: #fff; box-shadow: 0 2px 2px #cbcbcb; position: relative;
}
.card a { font-size: 13px; color: #000;
}
.card:hover { box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}
.card:hover img { opacity: 0.5;
}
.card__image { height: 129px; display: block; position: relative; background: #000;
}
.card__image img { width: 100%;
}
.card__details { padding: 12px 15px; display: block;
}
.card .details__name,
.card .details__instructor { height: 40px; display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 2; -moz-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.card .details__rating { margin-bottom: 5px;
}
.card__options { position: absolute; top: 10px; right: 10px;
}
.card .options__wishlist .tooltip { top: 0; right: 20px; transition: 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.card .options__wishlist .tooltip__arrow { border-left-color: #fff;
}
.card .options__wishlist .tooltip__inner { max-width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; background-color: #fff; color: rgba(0, 0, 0, 0.8);
}
.card .options__wishlist .icon { font-size: 18px; color: rgba(0, 0, 0, 0.8); -webkit-text-stroke: 1px #fff;
}
.card .options__wishlist.active .icon { color: #d23837; -webkit-text-stroke: 1px #fff;
}
.card .options__wishlist:hover { cursor: pointer;
}
.card .options__wishlist:hover .tooltip { opacity: 1;
}
.card .options__dropdown__btn { padding: 5px 7px; font-size: 15px; line-height: 1.35135; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.25); background: #fff;
}
.card .options__dropdown__btn i { padding: 0; color: rgba(0, 0, 0, 0.25);
}
.card .options__dropdown__btn:hover,
.card .options__dropdown__btn:focus { outline: none; border-color: #17aa1c;
}
.card .options__dropdown__btn:hover i,
.card .options__dropdown__btn:focus i { color: #17aa1c;
}
.card .options__dropdown .dropdown-menu { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.175); padding: 0; border: 0;
}
.card .options__dropdown .dropdown-menu a { padding: 5px 12px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="card-wrapper"> <!--card template--> <div class="card"> <a href="#"> <div class="card__image"> <img src="http://dummyimage.com/230x130/f4f4f4/cbcbcb.png"> </div> <div class="card__details"> <strong class="details__name"> Photography: Ditch Auto - Start Shooting in Manual </strong> <div class="details__instructor"> Jerad Hill, Photography, Web Designer, Online Marketer, Husband, Father </div> <div class="details__bottom"> <div class="details__rating"> <span class="star-rating--static a11 text-medium-grey"> <span class="star-rating__star" style="width: 90.092%;"></span> </span> <span>(648)</span> </div> <div class="details__price"> <span class="price">$19</span> <span class="price--old">$199</span> </div> </div> </div> </a> <div class="card__options"> <div class="options__wishlist active"> <i class="icon fa fa-heart"></i> <div class="tooltip left"> <div class="tooltip__arrow tooltip-arrow"></div> <div class="tooltip__inner tooltip-inner"><span>Wishlisted</span></div> </div> </div> </div> </div> <!--card template--> <div class="card"> <a href="#"> <div class="card__image"> <img src="http://dummyimage.com/230x130/f4f4f4/cbcbcb.png"> </div> <div class="card__details"> <strong class="details__name"> Photography: Ditch Auto - Start Shooting in Manual </strong> <div class="details__instructor"> Jerad Hill, Photography, Web Designer, Online Marketer, Husband, Father </div> <div class="details__bottom"> <div class="details__rating"> <span class="star-rating--static a11 text-medium-grey"> <span class="star-rating__star" style="width: 90.092%;"></span> </span> <span>(648)</span> </div> <div class="details__price"> <span class="price">$19</span> <span class="price--old">$199</span> </div> </div> </div> </a> <div class="card__options"> <div class="options__wishlist"> <i class="icon fa fa-heart"></i> <div class="tooltip left"> <div class="tooltip__arrow tooltip-arrow"></div> <div class="tooltip__inner tooltip-inner"><span>Wishlist</span></div> </div> </div> </div> </div>	<!--card template--> <div class="card"> <a href="#"> <div class="card__image"> <img src="http://dummyimage.com/230x130/f4f4f4/cbcbcb.png"> </div> <div class="card__details"> <strong class="details__name"> Photography: Ditch Auto - Start Shooting in Manual </strong> <div class="details__instructor"> Jerad Hill, Photography, Web Designer, Online Marketer, Husband, Father </div> <div class="details__bottom"> <div class="details__rating"> <span class="star-rating--static a11 text-medium-grey"> <span class="star-rating__star" style="width: 90.092%;"></span> </span> <span>(648)</span> </div> <div class="details__price"> <span class="price">$19</span> <span class="price--old">$199</span> </div> </div> </div> </a> <div class="card__options"> <div class="options__wishlist"> <i class="icon fa fa-heart"></i> <div class="tooltip left"> <div class="tooltip__arrow tooltip-arrow"></div> <div class="tooltip__inner tooltip-inner"><span>Wishlist</span></div> </div> </div> </div> </div>
</div>
</body>
</html>

New course cards with BEM - Script Codes CSS Codes

body { font-family: 'Open Sans';
}
.card-wrapper { width: 70%; margin: 0 auto;
}
.star-rating--static { position: relative; display: inline-block;
}
.star-rating--static:before { font-family: "FontAwesome"; content: "\f005 \0020 \f005 \0020 \f005 \0020 \f005 \0020 \f005";
}
.star-rating__star { color: #d23837; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; z-index: 2;
}
.star-rating__star:before { font-family: "FontAwesome"; content: "\f005 \0020 \f005 \0020 \f005 \0020 \f005 \0020 \f005";
}
a { text-decoration: none;
}
a:hover { text-decoration: none;
}
.ellipsis-2lines { display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 2; -moz-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-wrapper--list li { margin-bottom: 10px;
}
.card-wrapper .price { font-weight: bold; color: #17aa1c;
}
.card-wrapper .price--old { color: #000; text-decoration: line-through; margin-left: 5px;
}
.card-wrapper .label--new { border-radius: 0; background: #fff; font-weight: bold; padding: 3px 6px; position: absolute; bottom: 15px; left: 15px; z-index: 1; border: 1px solid #17aa1c; color: #17aa1c;
}
.card-wrapper .label--status { position: absolute; top: 10px; left: 10px; padding: 5px 10px; font-size: 13px; color: #fff;
}
.card { display: inline-block; vertical-align: top; margin: 10px; width: 230px; text-align: left; background-color: #fff; box-shadow: 0 2px 2px #cbcbcb; position: relative;
}
.card a { font-size: 13px; color: #000;
}
.card:hover { box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}
.card:hover img { opacity: 0.5;
}
.card__image { height: 129px; display: block; position: relative; background: #000;
}
.card__image img { width: 100%;
}
.card__details { padding: 12px 15px; display: block;
}
.card .details__name,
.card .details__instructor { height: 40px; display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 2; -moz-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.card .details__rating { margin-bottom: 5px;
}
.card__options { position: absolute; top: 10px; right: 10px;
}
.card .options__wishlist .tooltip { top: 0; right: 20px; transition: 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.card .options__wishlist .tooltip__arrow { border-left-color: #fff;
}
.card .options__wishlist .tooltip__inner { max-width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; background-color: #fff; color: rgba(0, 0, 0, 0.8);
}
.card .options__wishlist .icon { font-size: 18px; color: rgba(0, 0, 0, 0.8); -webkit-text-stroke: 1px #fff;
}
.card .options__wishlist.active .icon { color: #d23837; -webkit-text-stroke: 1px #fff;
}
.card .options__wishlist:hover { cursor: pointer;
}
.card .options__wishlist:hover .tooltip { opacity: 1;
}
.card .options__dropdown__btn { padding: 5px 7px; font-size: 15px; line-height: 1.35135; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.25); background: #fff;
}
.card .options__dropdown__btn i { padding: 0; color: rgba(0, 0, 0, 0.25);
}
.card .options__dropdown__btn:hover,
.card .options__dropdown__btn:focus { outline: none; border-color: #17aa1c;
}
.card .options__dropdown__btn:hover i,
.card .options__dropdown__btn:focus i { color: #17aa1c;
}
.card .options__dropdown .dropdown-menu { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.175); padding: 0; border: 0;
}
.card .options__dropdown .dropdown-menu a { padding: 5px 12px;
}
New course cards with BEM - Script Codes
New course cards with BEM - Script Codes
Home Page Home
Developer Hamza Erbay
Username hamzaerbay
Uploaded June 12, 2022
Rating 3
Size 5,666 Kb
Views 78,936
Do you need developer help for New course cards with BEM?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hamza Erbay (hamzaerbay) Script Codes
Name
Square Checkbox
Udemy logo loader
Udemy loader stroke
Old Course Cards
Timeline Demo
Quickviewbox
Position
Flexbox mixins with sass
A Pen by Hamza Erbay
Display properties
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!