Code Module - Slide In Banner

Developer
Andy Tran
Size
3,466 Kb
Views
62,744
  1. Code Module - Slide In Banner Previews
  2. Code Module - Slide In Banner HTML Codes
  3. Code Module - Slide In Banner CSS Codes
  4. Code Module - Slide In Banner JS Codes

How do I make an code module - slide in banner?

What is a code module - slide in banner? How do you make a code module - slide in banner? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Code Module - Slide In Banner Previews
IQ Test

Code Module - Slide In Banner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Code Module - Slide In Banner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-banner"> <div class="at-banner__content"> <div class="at-banner__text">Hey friend, check out my <b>new and improved</b> blog!</div> <a class="at-banner__button" href="https://andytran.me">VIEW BLOG</a> </div> <div class="at-banner__close"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Code Module - Slide In Banner - Script Codes CSS Codes

.at-banner { z-index: 999999; position: fixed; top: 0; right: 0; left: 0; background: #974DF3; width: 100%; border-bottom: 1px solid #EEEEEE; padding: 10px; box-sizing: border-box; -webkit-transform: translateY(-150%); transform: translateY(-150%); color: #FFFFFF; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: at-banner-slide-in 0.8s ease forwards; animation: at-banner-slide-in 0.8s ease forwards;
}
.at-banner__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 90%; margin: 0 auto; padding: 10px 40px; box-sizing: border-box;
}
.at-banner__title { font-size: 18px;
}
.at-banner__text { margin: 0 20px 0 0;
}
.at-banner__button { display: inline-block; background: #FFFFFF; height: 40px; border: 0; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 0 20px; color: #974DF3; font-size: 12px; font-weight: 700; line-height: 40px; text-decoration: none; white-space: nowrap;
}
.at-banner__close { position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;
}
.at-banner__close:before, .at-banner__close:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; background: #FFFFFF; width: 100%; height: 3px; border-radius: 2px; -webkit-transform-origin: center; transform-origin: center;
}
.at-banner__close:before { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
.at-banner__close:after { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
@-webkit-keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
@keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
}

Code Module - Slide In Banner - Script Codes JS Codes

'use strict';
jQuery('.at-banner__close').on('click', function () { jQuery(this).parent().remove();
});
Code Module - Slide In Banner - Script Codes
Code Module - Slide In Banner - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4
Size 3,466 Kb
Views 62,744
Do you need developer help for Code Module - Slide In Banner?

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!

Andy Tran (andytran) Script Codes
Name
Day 21 - Interactive Dribbble Invite Modal
Macbook Pro Demo
Interactive Location Modal
Flat Horizontal Navigation
Progress Bar
Flat Login Form 3.0
Code Module - Floating Action Menu
Pure CSS - Menu App
Flat Login Form
Tabs Modal
Create amazing video scripts 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!