Cumulus cards

Developer
Robert Asaad
Size
2,777 Kb
Views
26,312
  1. Cumulus cards Previews
  2. Cumulus cards HTML Codes
  3. Cumulus cards CSS Codes
  4. Cumulus cards JS Codes

How do I make an cumulus cards?

What is a cumulus cards? How do you make a cumulus cards? This script and codes were developed by Robert Asaad on 18 September 2022, Sunday.

Cumulus cards Previews
IQ Test

Cumulus cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cumulus cards</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container text-center"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Cumulus Networks offers fully functional free version of its switch software</p> <span>Read More ></span> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Cumulus revs its partner ecology and product offering to reach a much bigger SDN market</p> <span>Read More ></span> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Dell and Cumulus Networks Aim to Take 'BYO Switching' Mainstream</p> <span>Read More ></span> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Cumulus Networks offers fully functional free version of its switch software</p> <span>Read More ></span> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Cumulus revs its partner ecology and product offering to reach a much bigger SDN market</p> <span>Read More ></span> </div> </div> <div class="col-sm-6 col-md-4"> <div class="card"> <p>Dell and Cumulus Networks Aim to Take 'BYO Switching' Mainstream</p> <span>Read More ></span> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cumulus cards - Script Codes CSS Codes

.container { margin-top: 40px;
}
.card { background: #FFFFFF; border: 1px solid #E2E3E4; box-shadow: 0 5px 10px 0 rgba(181, 189, 201, 0.4); margin-bottom: 30px; padding: 60px 35px; -webkit-transition: 0.35s all; transition: 0.35s all; position: relative;
}
.card * { -webkit-transition: 0.35s all; transition: 0.35s all;
}
.card p { font-family: Gotham-Light; font-size: 22px; color: #36424A; letter-spacing: -0.83px; line-height: 34px; position: relative; top: 0;
}
.card span { display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; font-family: Gotham-Medium; font-size: 15px; color: #00AD69; letter-spacing: -0.26px; line-height: 30px;
}
.card:hover { border: 1px solid rgba(0, 173, 105, 0.31); box-shadow: 0 5px 10px 0 rgba(0, 121, 96, 0.2); cursor: pointer;
}
.card:hover p { top: -15px;
}
.card:hover span { opacity: 1; bottom: 30px;
}

Cumulus cards - Script Codes JS Codes

$(function() { $('.card').matchHeight();
});
Cumulus cards - Script Codes
Cumulus cards - Script Codes
Home Page Home
Developer Robert Asaad
Username robasaad
Uploaded September 18, 2022
Rating 3
Size 2,777 Kb
Views 26,312
Do you need developer help for Cumulus cards?

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!

Robert Asaad (robasaad) Script Codes
Name
Webinar LP - Thank You
Hero with fading gradient backgrounds
PNG vs SVG Showdown
React in 15ish minutes
Centered floating elements
Cumulus Buttons
Cumulus Networks bios
Nav with fading underline
Create amazing blog posts 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!