Adform Creative Tabs
How do I make an adform creative tabs?
What is a adform creative tabs? How do you make a adform creative tabs? This script and codes were developed by Delano on 19 October 2022, Wednesday.
Adform Creative Tabs Previews
Adform Creative Tabs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Adform Creative Tabs</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="row"> <a class="navlinks" href="http://adformcreative.com/company"><div class="col-xs-12 col-sm-2 company"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/company-icon.png" alt="Company"/><p class="text-center navtext">Company</p></div></a> <a class="navlinks" href="http://adformcreative.com/capabilities"><div class="col-xs-12 col-sm-2 capabilities"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/capabilities-icon.png" alt="Capabilities"/><p class="text-center navtext">Capabilities</p></div></a> <a class="navlinks" href="http://adformcreative.com/branding-tools"><div class="col-xs-12 col-sm-2 branding"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/branding-icon.png" alt="Branding Tools"/><p class="text-center navtext">Branding Tools</p></div></a> <a class="navlinks" href="http://adformcreative.com/creative-lounge"> <div class="col-xs-12 col-sm-2 creativelounge"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/creative-lounge.png" alt="Creative Lounge"/><p class="text-center navtext">Creative Lounge</p></div></a> <a class="navlinks" href="http://adformcreative.com/customer-care"><div class="col-xs-12 col-sm-2 customercare"><img class="img-responsive center-block" src="http://adformcreative.com/wp-content/themes/meris/images/customer.png" alt="Customer Care"/><p class="text-center navtext">Customer Care</p></div></a>
</div>
</div>
</body>
</html>
Adform Creative Tabs - Script Codes CSS Codes
p.navtext { font-family:Tahoma; color: white; font-size: 1.5rem;
}
img { padding: 5px;
}
.company { background-color: #16225f;
}
.capabilities { background-color: #80BD00;
}
.branding { background-color: #00A1E1;
}
.creativelounge { background-color: #FC4F00;
}
.customercare { background-color: #932749;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300;
}
h1,
h1+p { margin: 30px 15px 0; font-weight: 300;
}
h1+p a { color: #333;
}
h1+p a:hover { text-decoration: none;
}
h2 { margin: 60px 15px 0; padding: 0; font-weight: 300;
}
h2 span { margin-left: 1em; color: #aaa; font-size: 85%;
}
.column { margin: 15px 15px 0; padding: 0;
}
.column:last-child { padding-bottom: 60px;
}
.column::after { content: ''; clear: both; display: block;
}
.column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0;
}
.column div:first-child { margin-left: 0;
}
.column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0;
}
figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden;
}
figure:hover+span { bottom: -36px; opacity: 1;
}
/* Zoom In #1 */
.hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3);
}
/* Zoom In #2 */
.hover02 figure img { width: 300px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover02 figure:hover img { width: 350px;
}
/* Zoom Out #1 */
.hover03 figure img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover03 figure:hover img { -webkit-transform: scale(1); transform: scale(1);
}
/* Zoom Out #2 */
.hover04 figure img { width: 400px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover04 figure:hover img { width: 300px;
}
/* Slide */
.hover05 figure img { margin-left: 30px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover05 figure:hover img { margin-left: 0;
}
/* Rotate */
.hover06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1);
}
/* Blur */
.hover07 figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover07 figure:hover img { -webkit-filter: blur(0); filter: blur(0);
}
/* Gray Scale */
.hover08 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover08 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0);
}
/* Sepia */
.hover09 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0);
}
/* Blur + Gray Scale */
.hover10 figure img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover10 figure:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px);
}
/* Opacity #1 */
.hover11 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover11 figure:hover img { opacity: .5;
}
/* Opacity #2 */
.hover12 figure { background: #1abc9c;
}
.hover12 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}
.hover12 figure:hover img { opacity: .5;
}
/* Flashing */
.hover13 figure:hover img { opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s;
}
@-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; }
}
@keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; }
}
/*Circle*/
.navlinks div { position: relative;
}
.navlinks div::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0;
}
.navlinks div:hover::before { -webkit-animation: circle .75s; animation: circle .75s;
}
@-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; }
}
@keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 120%; height: 120%; opacity: 0; }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { p.navtext { font-size: 1.3rem; }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { p.navtext { font-size: 1.8rem; }
}
@media (min-width: 1200px) { p.navtext { font-size: 2rem; }
}
| Developer | Delano |
| Username | Delano83 |
| Uploaded | October 19, 2022 |
| Rating | 3 |
| Size | 3,000 Kb |
| Views | 22,264 |
Do you need developer help for Adform Creative Tabs?
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!
Delano (Delano83) Script Codes
| Name | Size |
| Treehouse Full Stack Javascript | 6,450 Kb |
| My Adform Revised | 8,170 Kb |
| My Adform Revised May 2017 | 5,959 Kb |
| Label Estes With Corrections | 0 Kb |
| Adform_Referral_Program_Thank_You_Email | 3,683 Kb |
| JerrDan New Horizontal Navigation | 2,756 Kb |
| A Pen by Delano | 4,300 Kb |
| Label for Estes | 2,661 Kb |
| Search Bar in pure Js | 3,750 Kb |
| Nav | 2,909 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
| Banner Ad | Raquellorenzana | 4,172 Kb |
| Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
| Twitch.tv API | Ryzokuken | 2,618 Kb |
| Form Labels | Bartuc | 2,717 Kb |
| Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| Console fun | Dviate | 1,500 Kb |
| Matrix | Stathisnikolaidis | 1,922 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!