Quickviewbox

Developer
Hamza Erbay
Size
6,926 Kb
Views
91,080
  1. Quickviewbox Previews
  2. Quickviewbox HTML Codes
  3. Quickviewbox CSS Codes

How do I make an quickviewbox?

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

Quickviewbox Previews
IQ Test

Quickviewbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>quickviewbox</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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://d1azc1qln24ryf.cloudfront.net/25291/udemy/style-cf.css?9anaqa'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card-wrapper"> <!--card template--> <div class="card"> <div class="card__quick-view"> <div class="quick-view__top"> <div class="quick-view__title">Create, Update and Manage Your Own Website Using Drupal 7Create, Update and Manage Your Own Website Using Drupal 7</div> <div class="quick-view__info"> <i class="udi udi-search-filter"></i> 10 lecture <i class="udi udi-clock"></i> 1 hour <i class="udi udi-play-circle"></i> All levels </div> <div class="quick-view__date"> <strong>Published:</strong> 02/2015 </div> </div> <div class="quick-view__bottom"> <p class="quick-view__desc">Learn how to play piano today with confidence . Easy piano lesson tutorials for beginners. Tutor with 30+ yrs experience</p> <ul class="quick-view__list"> <li> <div>Real-world skills to build real-world websites: professional, beautiful and truly responsive websites that go and…</div></li> <li> <div>Real-world skills to build real-world websites: professional, beautiful and truly responsive websites that go and…</div></li> <li> <div>Real-world skills to build real-world websites: professional, beautiful and truly responsive websites that go and…</div></li> </ul> <button class="quick-view__cta">Add to Cart</button> </div> </div> <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>

Quickviewbox - Script Codes CSS Codes

body { font-family: 'Open Sans'; height: 100vh;
}
.df,
.fx-flex { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.fx { -webkit-box-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; min-width: 1px;
}
.fx-vc,
.aic { -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.fx-drr { -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse;
}
.fx-wrap,
.fxwrap { -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
}
.fx-dif,
.dif,
.inline-flex { display: -webkit-inline-box; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex;
}
.fx-df,
.flex-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: flex-start; align-items: flex-start;
}
.fx-lt,
.fxw { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.fx-lc,
.fxac { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.fx-lb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: flex-end; align-items: flex-end;
}
.fx-ct,
.fxjc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: flex-start; align-items: flex-start; -moz-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; -webkit-box-pack: center; justify-content: center;
}
.fx-c,
.fxc { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -moz-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; -webkit-box-pack: center; justify-content: center;
}
.fx-cb,
.fxjc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: flex-end; align-items: flex-end; -moz-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; -webkit-box-pack: center; justify-content: center;
}
.fx-rt,
.fxje { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; -webkit-box-pack: end; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-rc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -moz-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; -webkit-box-pack: end; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-rb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: flex-end; align-items: flex-end; -moz-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; -webkit-box-pack: end; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-jsa,
.fxjsa { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-justify-content: space-around; -ms-flex-pack: space-around; -o-justify-content: space-around; justify-content: space-around;
}
.fx-jsb,
.fxjsb { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-pack: justify;
}
.fx-dc,
.fxdc { display: -webkit-box; display: -ms-flexbox; display: flex; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column;
}
.fx-dc.center,
.fxdc.center { -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.fx-dc.right,
.fxdc.right { -webkit-box-align: center; -ms-flex-align: flex-end; align-items: flex-end;
}
.fx-jcc { -moz-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; -webkit-box-pack: center; justify-content: center;
}
.fx-str { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: stretch; align-items: stretch;
}
.fx-str > * { height: auto !important;
}
.fx-str.center { -moz-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; -webkit-box-pack: center; justify-content: center;
}
.fx-str.right { -moz-justify-content: flex-end; -ms-flex-pack: flex-end; -o-justify-content: flex-end; -webkit-box-pack: end; justify-content: flex-end;
}
.fx-is { -webkit-align-self: flex-start; -ms-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
}
.fx-ie { -webkit-align-self: flex-end; -ms-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end;
}
.fx-ic { -webkit-align-self: center; -ms-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.card-wrapper { width: 70%; margin: 0 auto; top: 50%; position: relative; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.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 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-wrapper .price { font-weight: bold; color: #17aa1c;
}
.card-wrapper .price--old { color: #000; text-decoration: line-through; margin-left: 5px;
}
.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 .card__quick-view { border-radius: 14px; width: 296px; position: absolute; display: none; z-index: 3; border: 1px solid #ccc; left: calc(100% + 13px); top: -30px; background: #fff;
}
.card .card__quick-view:before { content: ""; position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-right: 13px solid #17aa1c; border-bottom: 10px solid transparent; left: -13px; top: 50px;
}
.card .card__quick-view .quick-view__top { padding: 10px 15px; color: #fff; border-radius: 14px 14px 0 0; background: #17aa1c;
}
.card .card__quick-view .quick-view__title { display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; -o-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 15px; margin-bottom: 15px; font-weight: bold;
}
.card .card__quick-view .quick-view__info { margin-bottom: 10px;
}
.card .card__quick-view .quick-view__desc { display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 3; -moz-line-clamp: 3; -ms-line-clamp: 3; -o-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-family: OpenSans; font-size: 13px; color: rgba(0, 0, 0, 0.55);
}
.card .card__quick-view .quick-view__bottom { padding: 15px;
}
.card .card__quick-view .quick-view__cta { background: #17aa1c; color: #fff; width: 100%; border: none; font-size: 15px; padding: 7px; border-radius: 4px;
}
.card .card__quick-view .quick-view__list { padding-left: 20px;
}
.card .card__quick-view .quick-view__list li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px;
}
.card .card__quick-view .quick-view__list li div { display: -webkit-box !important; display: -moz-box !important; display: box !important; -webkit-line-clamp: 3; -moz-line-clamp: 3; -ms-line-clamp: 3; -o-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.card .card__quick-view .quick-view__list li:before { content: '•'; display: inline-block; font-size: 20px; margin-right: 10px; line-height: 1;
}
.card a { font-size: 13px; color: #000;
}
.card:hover { box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}
.card:hover .card__quick-view { display: block;
}
.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; -ms-line-clamp: 2; -o-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-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; -webkit-transition: 0.25s cubic-bezier(0.46, 0.03, 0.52, 0.96); 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;
}
Quickviewbox - Script Codes
Quickviewbox - Script Codes
Home Page Home
Developer Hamza Erbay
Username hamzaerbay
Uploaded June 12, 2022
Rating 3
Size 6,926 Kb
Views 91,080
Do you need developer help for Quickviewbox?

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
Display properties
Instagram stories loader
Old Course Cards
Peel effect
Flexbox mixins with sass
Udemy page transitions
A Pen by Hamza Erbay
Udemy loader stroke
Position
Create amazing love letters 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!