Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Banner</title>
- <style>
- h1 {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- line-height: 0.3em;
- color: white;
- }
- p {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- font-size: 1em;
- line-height: 1.3em;
- color: white;
- }
- img {
- height: 100px;
- }
- button {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background-color: transparent;
- color: white;
- border-style: solid;
- border-color: white;
- border-radius: 10px;
- padding: 6px 24px 6px 24px;
- margin-bottom: 10px;
- }
- button:hover {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background-color: #fff;
- color: #000;
- border-style: solid;
- border-color: #fff;
- border-radius: 10px;
- padding: 6px 24px;
- margin-bottom: 10px;
- cursor: pointer;
- }
- /* Class */
- .logo {
- padding-right: 10px;
- }
- .banner {
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 10px;
- padding: 10px;
- border-radius: 20px;
- height: 120px;
- background: linear-gradient(-45deg, #e79e00, #ff0000, #ffe96c, #ff0000);
- background-size: 200% 200%;
- animation: gradient 15s ease infinite;
- }
- @keyframes gradient {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
- }
- </style>
- </head>
- <body>
- <div class="banner" onclick="myFunction()">
- <script>
- function myFunction() {
- alert("Thanks a lot!");
- }
- </script>
- <div class="logo">
- <img src="https://picsum.photo/200" alt="random image">
- </div>
- <div class="content">
- <h1>Maiona Coding Course</h1>
- <p>Coding is a creative process and we believe anyone can learn to code.</p>
- <button>Sign up now!</button>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement