Case Study Card

Developer
Chris Samuels
Size
5,491 Kb
Views
4,048
  1. Case Study Card Previews
  2. Case Study Card HTML Codes
  3. Case Study Card CSS Codes
  4. Case Study Card JS Codes

How do I make an case study card?

What is a case study card? How do you make a case study card? This script and codes were developed by Chris Samuels on 26 January 2023, Thursday.

Case Study Card Previews
IQ Test

Case Study Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Case Study Card</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Karla'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="card"> <div class="card-header"> Lineups <div class="card-header__right"> <span><a href="http://anycircle.com/lineups.html" target="blank"> Learn More</a></span> <svg class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M24.88 12.88L18 19.76l-6.88-6.88L9 15l9 9 9-9z"/></svg> <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 8l-2.83 2.83L32.34 22H8v4h24.34L21.17 37.17 24 40l16-16z"/></svg> </div> <hr> </div> <div class="card-body"> Know your competition. Understand your competition. Beat your competition. Lineups figures out where your business stands in relation to competitors, and targets areas where you need improvement. <div class="data"> <ul> <li class="title">Services</li> <li class="title-value">Front-end Development</li> </ul> </div> </div> <svg class="logo" viewBox="0 0 432 90" xmlns="http://www.w3.org/2000/svg"> <g fill-rule="nonzero" fill="none"> <path d="M154 10.9262725C154 8.97717066 154.974672 8 156.929258 8h2.751091c1.862882 0 2.926638.97717066 2.926638 2.9262725v46.4090568c0 5.0613773 2.219214 5.7713324 4.084716 5.9494761 1.331004.1755239 2.308297.885479 2.308297 2.569985v2.132485C169 69.8499251 168.198253 71 165.981659 71 161.18952 71 154 69.6691617 154 58.3963323V10.9262725zM176.090319 28.7918705c0-1.9627399 1.078512-2.9427926 2.967237-2.9427926h2.791913c1.976387 0 2.969893.9800527 2.969893 2.9427926v39.2627023c0 1.9653745-.993506 2.9454272-2.969893 2.9454272h-2.791913c-1.888725 0-2.967237-.9800527-2.967237-2.9454272V28.7918705zM176 13.8882198v-2.9454272C176 8.98268724 176.988194 8 178.969894 8h3.060212C183.916175 8 185 8.98268724 185 10.9427926v2.9454272c0 1.8731652-1.081169 2.9480617-2.969894 2.9480617h-3.060212c-1.9817 0-2.969894-1.0748965-2.969894-2.9480617zM198 28.9982901c0-1.953263 1.073105-2.9285836 2.952359-2.9285836h2.508317c1.96912 0 2.955002.9753206 2.955002 2.9285836v3.9956683c0 1.3292676-.269598 2.5746366-.269598 2.5746366h.177089C208.115201 31.662069 213.575877 25 223.511346 25 234.1631 25 239 30.7732687 239 42.2280422v25.8407523C239 70.0246794 238.016761 71 236.044997 71h-2.77527c-1.881898 0-2.95236-.9753206-2.95236-2.9312055V44.1813052c0-6.3055001-1.255479-11.2791108-8.508187-11.2791108-8.769856 0-15.12919 7.2834425-15.12919 16.6066685v18.5573098c0 1.9558849-.988525 2.9312055-2.955003 2.9312055h-2.769984c-1.879255 0-2.95236-.9753206-2.95236-2.9312055V28.9982901H198zM281.348837 43.7094241c-.268539-7.895288-4.991663-11.973822-10.967968-11.973822-6.59763 0-11.949978 4.434555-13.197894 11.973822h24.165862zM270.559895 25C283.046951 25 290 33.8691099 290 46.3691099c0 1.5968587-1.247916 3.0157069-3.027644 3.0157069h-30.1448c.534445 9.7565445 7.57964 15.1649214 15.606845 15.1649214 4.904783 0 8.738043-2.039267 10.791575-3.5471204 1.695481-.8874346 3.030277-.7094241 4.012286.9764398l.802984 1.3298429c.889864 1.5078534.621325 3.0104712-.889864 3.9005236C284.471259 69.0706806 279.124177 72 271.899956 72c-14.182536 0-23.899955-10.1989529-23.899955-23.5-.002633-14.2774869 9.717419-23.5 22.559894-23.5zM298 29.9285836C298 27.9726988 298.967153 27 300.911887 27h2.739834c1.850886 0 2.82586.9753206 2.82586 2.9285836v23.8901112c0 6.2137361 1.324296 11.1899686 8.388947 11.1899686 9.181439 0 14.569864-8.0831006 14.569864-16.9632374V29.9285836c0-1.9558848.972367-2.9285836 2.914494-2.9285836h2.737227C336.941606 27 338 27.9753206 338 29.9285836v39.0731263c0 1.9558849-1.058394 2.9312055-2.911887 2.9312055h-2.471325c-1.944734 0-2.914494-.9753206-2.914494-2.9312055v-3.9930465c0-1.3345112.265902-2.5746366.265902-2.5746366h-.177268C327.851408 66.8754061 321.933785 73 313.192909 73c-10.067779 0-15.187695-5.3275577-15.187695-17.2280422V29.9285836H298zM373.189898 64.7509971c7.149512 0 13.048057-5.7918671 13.048057-16.0440772 0-9.8074914-5.273062-16.1335471-12.78414-16.1335471-6.793225 0-13.048058 4.7261215-13.048058 16.2256486 0 8.0180914 4.465476 15.9519757 12.784141 15.9519757zM352 29.0077299c0-1.9604457.98441-2.9393528 2.950592-2.9393528h2.053275c1.968821 0 2.947953.9789071 2.947953 2.4946343v2.6762057c0 1.3367872-.176825 2.4051643-.176825 2.4051643h.176825S363.79973 25 375.150801 25C387.306819 25 395 34.62592 395 48.6227129c0 14.34941-8.669674 23.6227129-20.472043 23.6227129-10.282207 0-14.035107-8.0233543-14.035107-8.0233543h-.176825s.269196 1.6025656.269196 3.9208914v17.9176843C360.585221 88.0210929 359.60081 89 357.72436 89h-2.771129c-1.966181 0-2.950592-.9789071-2.950592-2.9393528V29.0077299H352zM399.630151 63.1256545l.871887-1.2434555c1.137579-1.5052356 2.275159-1.5916231 4.021511-.6178011 2.009465 1.3298429 5.680158 3.6361257 10.83151 3.6361257 4.369749 0 7.516794-2.1256545 7.516794-5.9397906 0-8.7801047-22.803179-5.856021-22.803179-21.013089C400.068674 29.434555 407.41006 25 416.056695 25c6.113522 0 10.135033 2.1282723 12.232203 3.4581152 1.573523.7984293 1.836636 2.3036649.959591 3.9031413l-.784182 1.329843c-.871886 1.5942408-2.184875 1.7722513-3.843522.973822-1.834057-1.0654451-4.805693-2.5706807-8.997454-2.5706807-4.19692 0-7.42909 1.8612566-7.42909 5.6753927C408.194241 46.7277487 431 43.5340314 431 58.7879581 431 66.4109948 424.620785 72 415.099684 72c-7.341386 0-12.410192-3.0157068-14.855601-4.8769634-1.485818-.9816753-1.576102-2.4869109-.613932-3.9973821" stroke="#374044" stroke-width=".25" fill="#374044"/> <path d="M5.24210236 58h8.51579524C16.6515381 58 19 60.3487859 19 63.2428256v8.5143488C19 74.6538355 16.6515381 77 13.7578976 77H5.24210236C2.34846186 77 0 74.6538355 0 71.7571744v-8.5143488C0 60.3487859 2.34846186 58 5.24210236 58zM34.2421024 29h8.5157952C45.6515381 29 48 31.3260906 48 34.1921666v35.6156668C48 72.6739094 45.6515381 75 42.7578976 75h-8.5157952C31.3484619 75 29 72.6739094 29 69.8078334V34.1921666C29 31.3260906 31.3484619 29 34.2421024 29zM63.2421024 0h8.5157952C74.6515381 0 77 2.34862385 77 5.24246396V70.757536C77 73.6513761 74.6515381 76 71.7578976 76h-8.5157952C60.3484619 76 58 73.6513761 58 70.757536V5.24246396C58 2.34862386 60.3484619 0 63.2421024 0zM91.2421024 10h8.5157952C102.651538 10 105 12.3420244 105 15.2277331v29.5445338C105 47.6579756 102.651538 50 99.7578976 50h-8.5157952C88.3484619 50 86 47.6579756 86 44.7722669V15.2277331C86 12.3420244 88.3484619 10 91.2421024 10z" fill="#30A7D8"/> </g> </svg> </div>
</div>
<div class="overlay"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Case Study Card - Script Codes CSS Codes

* { margin: 0; padding: 0; font-family: 'Karla', sans-serif;
}
a { text-decoration: none; color: #4A90E2; font-size: 21px; font-weight: normal; display: block; line-height: 2.2
}
ul li { list-style: none;
}
body { background-image: linear-gradient(225deg, #BCF6EF 0%, #B8E986 100%); background-repeat: no-repeat; height: 100vh
}
.container { width: 100%; margin: 0 2rem
}
.card { text-decoration: none; color: #333745; background: #fbfbfb; border-radius: 4px; overflow: hidden; margin: auto; padding-bottom: 3rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 650px; height: 350px; transition: all 450ms; z-index: 9999
}
@media screen and (max-width: 780px) { .card { width: 100%; padding: 2rem }
}
.card.large { width: 90vw; height: 90vh;
}
.card-header { padding: 3rem 3rem 2rem 3rem; font-size: calc(28px + 8 * ((100vw - 375px) / 680)); font-weight: 900;
}
hr { background: #eaeaea; width: 0; height: 1px; border: 0 none; margin: 1.5rem 0 0; transition: all 450ms
}
.card.active hr { width: 100%
}
.card-body { padding: 0 3rem 3rem 3rem; margin-left: -350px; width: 350px; opacity: 0; transition: all 450ms cubic-bezier(.46,.03,.52,.96)
}
.card.active .card-body { margin: 0; opacity: 1
}
.card-header__right { width: 233px; height: 36px; cursor: pointer; float: right; display: flex; justify-content: flex-end
}
.card-header__right span { margin-right: 40px; opacity: 0; transition: all 400ms
}
.card.active .card-header__right span { margin-right: 10px; opacity: 1
}
.card.active .card-header__right span:hover { margin-right: 1px
}
.down { width: 48px; height: 48px; position: absolute; transition: all 300ms
}
.arrow { margin-right: 40px; opacity: 0; transition: all 350ms
}
.card.active .arrow { margin: 0; opacity: 1
}
.card.active .down { opacity: 0; transform: scale(0);
}
.logo { position: absolute; left: 0; right: 0; top: 50px; bottom: 0; margin: auto; transform: scale(0.7); transition: all 400ms cubic-bezier(.46,.03,.52,.96)
}
.card.active .logo { transform: scale(0.2) translateX(1095px) translateY(-300px); right: 12px
}
.data { margin: 1.5rem 0 0;
}
.data li.title { text-transform: uppercase; color: #bbb
}
.data li.title-value { margin: 0 0 1rem
}

Case Study Card - Script Codes JS Codes

$(".card").hover(function() { $(this).toggleClass("active");
});
// $("a").on("click", function() {
// $(".card").toggleClass("large");
// $(".overlay").toggleClass("active")
// })
Case Study Card - Script Codes
Case Study Card - Script Codes
Home Page Home
Developer Chris Samuels
Username anycircle
Uploaded January 26, 2023
Rating 3
Size 5,491 Kb
Views 4,048
Do you need developer help for Case Study Card?

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!

Chris Samuels (anycircle) Script Codes
Name
CS Logo
Cart Icon
Code Icon
Build Lineup Map - Lineups.io
Sign Up Form
Lineups.io Logo
Mail Icon
A Pen by Chris Samuels
404 page
Home
Create amazing captions 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!