Card display using foundation

Developer
Richard
Size
2,360 Kb
Views
2,024
  1. Card display using foundation Previews
  2. Card display using foundation HTML Codes
  3. Card display using foundation CSS Codes

How do I make an card display using foundation?

What is a card display using foundation? How do you make a card display using foundation? This script and codes were developed by Richard on 16 January 2023, Monday.

Card display using foundation Previews
IQ Test

Card display using foundation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>card display using foundation</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fade"></div> <div class="row home-card-container small-up-2 medium-up-3"> <div class="columns "> <div class="card-img first"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> <div class="columns"> <div class="card-img second"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> <div class="columns"> <div class="card-img third"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> <div class="columns"> <div class="card-img fourth"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> <div class="columns"> <div class="card-img fifth"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> <div class="columns"> <div class="card-img sixth"> <div class="overlay "> <div class="row"> <div class="column align-self-bottom card-content"> <h4>About Fibre</h4> <a class="button float-right"> MORE INFO</a> </div> </div> </div> </div> </div> </div>
</section>
</body>
</html>

Card display using foundation - Script Codes CSS Codes

/* ************ Homepage card box style**************/
.home-card-container{ background-color: #fff; padding: 1em 0;
}
.overlay{ /* ----this is the gradient that goes infront of the images (hero). it ensures that white text can be read--- */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#050505+47,050505+99&0+17,0.39+99 */ /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(5,5,5,0) 17%,rgba(5,5,5,0.14) 47%,rgba(5,5,5,0.39) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(5,5,5,0) 17%,rgba(5,5,5,0.14) 47%,rgba(5,5,5,0.39) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00050505', endColorstr='#63050505',GradientType=0 ); /* IE6-9 */ height: 100%; width: 100%;
}
.card-img{ background-position: center center; background-size: cover; background-repeat: none; height: 16em; width: 100%;
}
.first{ background-image: url("http://lorempixel.com/g/400/200");}
.second{background-image: url("http://lorempixel.com/g/400/210");}
.third{background-image: url("http://lorempixel.com/g/400/180");}
.fourth{background-image: url("http://lorempixel.com/g/500/200");}
.fifth{background-image: url("http://lorempixel.com/g/400/300");}
.sixth{background-image: url("http://lorempixel.com/g/600/200");}
.card-content>h4{ color: #fff; font-weight: 600; padding-top: 7em;
}
@media screen and (max-width: 39.9375em) {.card-content>h4{ padding-top: 10.15em; }}
.card-content > .button{ background-color: #fff; color: #000; font-weight: 600; right: 0; bottom: 0;
}
.card-content .button:hover{ background-color: #000; color: #fff; -webkit-transition: 0.5s; transition: 0.5s;
}
Card display using foundation - Script Codes
Card display using foundation - Script Codes
Home Page Home
Developer Richard
Username keyboarddesk
Uploaded January 16, 2023
Rating 3
Size 2,360 Kb
Views 2,024
Do you need developer help for Card display using foundation?

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!

Richard (keyboarddesk) Script Codes
Name
In class Week 4 - Mobile Navigation Patterns-Footer Nav
Playing with AFC tabs nav
Expandable horizontal columns
ALPACA PRESENTATION
Looping background beach video
Richard Lococo -Assignment 6 - Canvas
Index transfer
Double swipe button
Assignment 4 SCSS animations
Assignment 4 SCSS animation
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!