The Initiator

Developer
Thomas Hare
Size
2,695 Kb
Views
12,144
  1. The Initiator Previews
  2. The Initiator HTML Codes
  3. The Initiator CSS Codes

How do I make an the initiator?

What is a the initiator? How do you make a the initiator? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

The Initiator Previews
IQ Test

The Initiator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Initiator</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="nav">Brand Name</div>
<div id="initiator"> <div class="inner"> <p>Fulfill Your Passion For Dance</p> <div class="btn-wrapper"> <a class="btn" href="#">Start Tour</a> </div> </div>
</div>
</body>
</html>

The Initiator - Script Codes CSS Codes

body { background-color: #eee;
}
#nav { background-color: #628; box-shadow: 0 1px 5px rgba(0,0,0,0.25); color: rgba(255,255,255,0.65); float: left; padding: 20px; position: relative; width: 100%; z-index: 2;
}
#initiator { background-color: #800080; box-sizing: border-box; clear: both; float: left; min-height: 180px; opacity: 1; position: relative; text-align: center; width: 100%; z-index: 1;
}
#initiator:before { background: #a48 url("https://source.unsplash.com/1200x500/?dance,dancing") no-repeat center center; background-size: cover; content: ' '; display: block; height: 100%; left: 0; opacity: 0.25; padding: inherit; position: absolute; top: 0; z-index: 1; width: 100%;
}
#initiator .inner { box-sizing: border-box; float: left; padding: 80px 20px; width: 100%;
}
#initiator .inner * { position: relative; z-index: 2;
}
#initiator .inner p { color: rgba(255,255,255,0.75); float: left; font-size: 2.5em; margin: 5px 0; text-align: center; width: 100%;
}
#initiator .inner .btn-wrapper { clear: both; float: left; margin-top: 20px; text-align: center; width: 100%;
}
#initiator .inner .btn { box-shadow: 0 0 2px rgba(255,255,255,0.95); color: rgba(255,255,255,0.95); display: inline-block; padding: 13px 60px; text-align: center; text-decoration: none; -webkit-transition: background 0.3s ease, box-shadow 0.3s ease; transition: background 0.3s ease, box-shadow 0.3s ease;
}
#initiator .inner .btn:hover { background-color: rgba(255,255,255,0.75); box-shadow: 0 1px 8px rgba(0,0,0,0.25); color: rgba(0,0,0,0.85);
}
The Initiator - Script Codes
The Initiator - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3
Size 2,695 Kb
Views 12,144
Do you need developer help for The Initiator?

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!

Thomas Hare (tommyhare) Script Codes
Name
12 Column Grid Framework In 12 Lines of Code
Bootstrap Form Fun
Ashley Fitness
Material UI
Stock Card
Table Classes
Responsive Sidebar
Micropush
Simple Passwords
Bootstrap V4 tabs
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!