Foundation Promo Hero #1 (Easter Egg Headline)

Developer
Daniel
Size
2,313 Kb
Views
14,168
  1. Foundation Promo Hero #1 (Easter Egg Headline) Previews
  2. Foundation Promo Hero #1 (Easter Egg Headline) HTML Codes
  3. Foundation Promo Hero #1 (Easter Egg Headline) CSS Codes

How do I make an foundation promo hero #1 (easter egg headline)?

What is a foundation promo hero #1 (easter egg headline)? How do you make a foundation promo hero #1 (easter egg headline)? This script and codes were developed by Daniel on 12 October 2022, Wednesday.

Foundation Promo Hero #1 (Easter Egg Headline) Previews
IQ Test

Foundation Promo Hero #1 (Easter Egg Headline) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foundation Promo Hero #1 (Easter Egg Headline)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>
<div class="promo-hero promo-hero-bg-image"> <div class="promo-hero-content"> <h1 class="promo-hero-title">Easter Egg Headline</h1> <p class="promo-hero-description hide-for-small-only">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor ante, varius eget lacinia porta, faucibus ut eros. Donec quis dui id felis pharetra fermentum.</p> <div class="promo-hero-ctas"> <a href="#" class="promo-section-cta button primary">Shop Now</a> <a href="#" class="promo-section-cta button white-hollow">Learn More</a> </div> </div>
</div>
</body>
</html>

Foundation Promo Hero #1 (Easter Egg Headline) - Script Codes CSS Codes

.button{ height:50px;
}
.buttom p {
}
.promo-hero { width: 100%; text-align: center; height: 420px; background: #8a8a8a; position: relative; color: white;
}
.promo-hero .button.white-hollow { border: 1px solid #fefefe; color: #fefefe; background-color: transparent; transition: border 0.5s ease;
}
.promo-hero .button.white-hollow:hover, .promo-hero .button.white-hollow:active, .promo-hero .button.white-hollow:focus { border: 1px solid #b2b2b2; transition: border 0.5s ease;
}
.promo-hero-content { z-index: 10; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
}
.promo-hero-title { line-height: 1.25em; margin-bottom: 1rem;
}
.promo-hero-description { margin-bottom: 1rem; font-size:20px!important;
}
.promo-hero-bg-image { overflow: hidden; background-image: url(https://cdn.pixabay.com/photo/2017/03/01/00/34/easter-eggs-2107210_960_720.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;
}
.promo-hero-bg-image:before { content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: relative; z-index: 1;
}
Foundation Promo Hero #1 (Easter Egg Headline) - Script Codes
Foundation Promo Hero #1 (Easter Egg Headline) - Script Codes
Home Page Home
Developer Daniel
Username deeman
Uploaded October 12, 2022
Rating 3
Size 2,313 Kb
Views 14,168
Do you need developer help for Foundation Promo Hero #1 (Easter Egg Headline)?

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!

Daniel (deeman) Script Codes
Name
A Pen by Daniel
Tabelldata-TTSTAT-2
Subleveled Menu - Responsive and simple
Dropdown Menu
Accordion w. icons, 0.01
Imagelinking
Box v0.1
YellowBoxes
Top Header w. shadowed bottom
Box w. images v0.1
Create amazing captions 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!