Control Shape Hero
How do I make an control shape hero?
What is a control shape hero? How do you make a control shape hero? This script and codes were developed by Kira on 25 August 2022, Thursday.
Control Shape Hero - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Control Shape Hero</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="hero"> <div class="hero-text"> <div class="control"></div> <div class="control-line"></div> <h3>DELICOUS</h3> <h1>SPORTS NUTRITION</h1> </div>
</section>
</body>
</html>
Control Shape Hero - Script Codes CSS Codes
.hero { height: 100vh; position: relative; background: #999;
}
.control { height: 400px; width: 240px; border: 20px solid black; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
.hero-text { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%;
}
h1, h2, h3, h4, h5, h6, p { font-family: 'Montserrat', sans-serif; font-weight: 900; color: #fff;
}
h1 { font-size: 5rem; text-align: center; margin: 0; position: relative; z-index: 9;
}
h1:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translateY(-50%); height: 300px; width: 20px; position: absolute; background: black; margin-left: 120px; z-index: 9999;
}
h3 { text-align: center;
}
Developer | Kira |
Username | kepixels |
Uploaded | August 25, 2022 |
Rating | 3 |
Size | 2,289 Kb |
Views | 36,432 |
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!
Name | Size |
Fluid Grid | 2,542 Kb |
A Pen by Kira | 3,665 Kb |
Sticky CTA Buttons | 1,940 Kb |
Parallax Scroll Demo | 5,600 Kb |
Rotated Text | 1,588 Kb |
Simple Modal | 3,847 Kb |
Blog Images Sized and Centered | 1,907 Kb |
Mode Menu | 3,966 Kb |
Icon Loading Animation | 2,934 Kb |
Dashed Lines | 1,712 Kb |
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!
Name | Username | Size |
Two Element Typeface | Chrisota | 4,942 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Popover Example | Seanboom | 2,429 Kb |
React Vote Component | Souporserious | 5,465 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
P1 | Vivi_Lai | 1,533 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
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!