Casestudy

Developer
Eric Rogg
Size
3,080 Kb
Views
40,480
  1. Casestudy Previews
  2. Casestudy HTML Codes
  3. Casestudy CSS Codes

How do I make an casestudy?

What is a casestudy? How do you make a casestudy? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.

Casestudy Previews
IQ Test

Casestudy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>casestudy</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="work-all"> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox1" style="background-image: url(http://i.imgur.com/pTxayc6.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload1" src="http://i.imgur.com/pTxayc6.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/iH3HK3u.png" alt="Hotcakes"> </div> </a> </li> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox2" style="background-image: url(http://i.imgur.com/nrk0bbc.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload2" src="http://i.imgur.com/nrk0bbc.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/kiLdbsj.png" alt="DotNukeNet"> </div> </a> </li> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox3" style="background-image: url(http://i.imgur.com/6pgchnH.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload3" src="http://i.imgur.com/6pgchnH.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/ipVT9Fa.png" alt="Department of Defense"> </div> </a> </li> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox1" style="background-image: url(http://i.imgur.com/nAu9L3i.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload1" src="http://i.imgur.com/nAu9L3i.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/VZw6Ryn.png" alt="Hilton"> </div> </a> </li> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox2" style="background-image: url(http://i.imgur.com/d15py2e.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload2" src="http://i.imgur.com/d15py2e.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/kX9GTVQ.png" alt="Karisma"> </div> </a> </li> <li> <a class="photo" href="#"> <div class="photo-bg" id="loadBox3" style="background-image: url(http://i.imgur.com/htCOoId.jpg); -webkit-background-size: cover; background-size: cover; opacity: 1; background-position: 50% 50%; background-repeat: initial initial;"></div> <img id="preload3" src="http://i.imgur.com/htCOoId.jpg" style="display:none;"> <div class="logo"> <img src="http://i.imgur.com/pNtW9Hf.png" alt="Microdesk"> </div> </a> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Casestudy - Script Codes CSS Codes

.post-type-archive .wrapper { padding: 65px 0 0 0;
}
.post-type-archive.header-wrapper { background: rgba(26, 26, 26, 0.95);
}
ul.work-all { overflow: hidden; background: #313131;
}
ul.work-all li { float: left; width: 33.33334%;
}
ul.work-all a.photo { display: block; position: relative;
}
ul.work-all .photo-bg { height: 500px; opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease;
}
ul.work-all .logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; background: rgba(247, 165, 70, 0);
}
ul.work-all .logo:hover { background: rgba(111, 18, 0, 0.5);
}
ul.work-all a img:hover { opacity: 1;
}
ul.work-all .logo img { width: 300px; margin: 0 auto; display: block; padding: 180px 0 0 0; z-index: 4;
}
@media screen and (max-width: 1600px) { ul.work-all .logo img { width: 250px; padding: 150px 0; } ul.work-all .photo-bg { height: 400px; }
}
@media screen and (max-width: 1200px) { ul.work-all .logo img { width: 160px; padding: 130px 0; } ul.work-all .photo-bg { height: 350px; }
}
@media screen and (max-width: 1150px) { .post-type-archive .wrapper { padding: 61px 0 0 0; }
}
@media screen and (max-width: 1000px) { ul.work-all li { float: left; width: 50%; }
}
@media screen and (max-width: 600px) { ul.work-all li { width: 100%; }
}
@media screen and (orientation: portrait) and (max-device-width: 1024px), screen and (orientation: landscape) and (max-device-width: 1024px) { a img { -webkit-transition: none; transition: none; } a img:hover { cursor: pointer; opacity: 1; } ul.work-all a.photo:hover .photo-bg { opacity: 1; } ul.work-all a.photo:active .photo-bg { opacity: 0.4; }
}
Casestudy - Script Codes
Casestudy - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 3
Size 3,080 Kb
Views 40,480
Do you need developer help for Casestudy?

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!

Eric Rogg (er40) Script Codes
Name
JQuery Progress Bar22
Cool Radio
Simple List
CSS Search Hover Animation
Collapsing Widget
Pagination
Google Play Ratings
A Pen by Eric Rogg
CTA
Flat CSS File Icons
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!