Flat UI Alert

Developer
Brock Nunn
Size
3,325 Kb
Views
6,072
  1. Flat UI Alert Previews
  2. Flat UI Alert HTML Codes
  3. Flat UI Alert CSS Codes
  4. Flat UI Alert JS Codes

How do I make an flat ui alert?

Wanted to create a quick and easy alert that expands into the page. I like the minimalist look and the use of icon fonts to encourage action. . What is a flat ui alert? How do you make a flat ui alert? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Flat UI Alert Previews
IQ Test

Flat UI Alert - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat UI Alert</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Simple Flat Alerts!</h1>
<aside class="alert success"> <p class="container"><span class="fa fa-check"></span>Way to go, You performed a successful action! <span class="close fa fa-close"></span></p>
</aside><!-- end alert -->
<p class="instruction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sint dolorum blanditiis accusamus quis tenetur expedita cum repellat aliquid ipsa harum mollitia illo veniam eius. <a class="button">Trigger Alert</a>
</p> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat UI Alert - Script Codes CSS Codes

/* fontawesome */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,900);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
body { font-family: 'Roboto';
}
p { font-weight: 200;
}
h1 { text-align: center; font-weight: 200; color: #555; text-transform: uppercase;
}
.container { width: 85%; margin: 0 auto; position: relative;
}
.alert { display: none; box-shadow: inset 0px 0px 10px -2px rgba(0, 0, 0, 0.75); overflow: hidden; max-height: 0px;
}
.alert.open { max-height: auto; display: block; text-align: center;
}
.alert p { padding: 0;
}
.alert span.close { float: right; font-size: 1.5em; position: relative; top: .12em;
}
.alert span.close:hover { color: #2b8c46;
}
.alert span.icon { margin-right: .5em; font-size: 1.5em; position: relative; top: .12em;
}
.alert.success { background: #53ca74; color: #fff; padding: 2em 0;
}
.instruction { width: 420px; margin: 1em auto; text-align: center; color: #999; line-height: 1.5em;
}
.instruction a.button { display: block; clear: both; width: 65%; padding: 1em; text-align: center; border: 1px solid #ccc; margin: 1em auto; border-radius: .5em;
}
.instruction a.button:hover { background: #eaeaea; border: 1px solid #c4c4c4;
}
.instruction a.button:active { background: #dddddd;
}

Flat UI Alert - Script Codes JS Codes

var alert = $('.alert');
$('.button').click(function(){ alert.addClass('open');
});
$('span.close').on('click', function() { alert.removeClass('open');
});
Flat UI Alert - Script Codes
Flat UI Alert - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3.5
Size 3,325 Kb
Views 6,072
Do you need developer help for Flat UI Alert?

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!

Brock Nunn (banunn) Script Codes
Name
Off Canvas Navigation
Pixel Perfect Buttons Without PSD
Simple Responsive Navigation
Pop Up Question Form
Minimal Hover Menu
Angular Users Application
Simple Article Layout
Modern Web Button
Font Awesome Icon Fonts CDN
Tooltip Pulse
Create amazing love letters 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!