**Neo Brutalism Template: "Vibrant Oasis"**
=============================================
### Template Overview
The "Vibrant Oasis" template is a bold and playful design that embodies the Neo Brutalism style, featuring a candy pink, yellow, and peach color palette. This template is perfect for creative professionals, artists, or designers looking to showcase their work in a unique and eye-catching way.
### Template Structure
The template consists of the following sections:
1. **Header**
2. **Hero Section**
3. **Feature Block**
4. **Call-to-Action (CTA) Block**
5. **Footer**
### Section 1: Header
* **Menu Bar**
+ Use a simple, sans-serif font (e.g., Open Sans)
+ Set font size to 16px
+ Use candy pink (#FF69B4) as the primary color
+ Add a subtle gradient effect to the menu bar background
### Section 2: Hero Section
* **Large Hero Box**
+ Set the background color to peach (#FFD7BE)
+ Add animated shapes (e.g., SVG shapes) in candy pink (#FF69B4) and yellow (#F7DC6F)
+ Use a bold, sans-serif font (e.g., Montserrat) for the heading
+ Set the heading font size to 48px
+ Add a subtle shadow effect to the hero box
### Section 3: Feature Block
* **Feature Section**
+ Use a clean and minimalistic design
+ Set the background color to yellow (#F7DC6F)
+ Add three columns with the following features:
- **Feature 1**: Icon (e.g., ), heading, and short description
- **Feature 2**: Icon (e.g., ), heading, and short description
- **Feature 3**: Icon (e.g., ), heading, and short description
+ Use a sans-serif font (e.g., Open Sans) for the feature headings and descriptions
+ Set the feature heading font size to 24px
### Section 4: Call-to-Action (CTA) Block
* **CTA Section**
+ Use a bold and eye-catching design
+ Set the background color to candy pink (#FF69B4)
+ Add a prominent CTA button with the following settings:
- Button text: "Get Started"
- Button font size: 24px
- Button color: white (#FFFFFF)
- Button background color: peach (#FFD7BE)
+ Use a sans-serif font (e.g., Open Sans) for the CTA text
+ Set the CTA text font size to 18px
### Section 5: Footer
* **Large Footer**
+ Use a clean and minimalistic design
+ Set the background color to yellow (#F7DC6F)
+ Add the following elements:
- **Social Media Links**: icons for Facebook, Instagram, Twitter, and LinkedIn
- **Contact Information**: address, phone number, and email
- **Copyright Information**: copyright symbol and year
+ Use a sans-serif font (e.g., Open Sans) for the footer text
+ Set the footer text font size to 14px
### Customizable Features
* Color palette: candy pink, yellow, and peach
* Font styles and sizes
* Animated shapes in the hero section
* Feature block icons and text
* CTA button text and color
### Essential Plugins and Widgets
* **Elementor Pro**: for advanced Elementor features and templates
* **SVG Shape Generator**: for creating custom animated shapes
* **Icon Font**: for using custom icons in the feature block and footer
### Responsiveness
The template is designed to be fully responsive and optimized for user experience on various devices, including:
* Desktop: 1920px and above
* Tablet: 768px - 1919px
* Mobile: 320px - 767px
### Code Snippets
To add the animated shapes in the hero section, you can use the following code snippet:
```html
<div class="hero-shapes">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<!-- add your SVG shape code here -->
</svg>
</div>
```
To add the feature block icons, you can use the following code snippet:
```html
<div class="feature-icon">
<i class="fas fa-"></i>
</div>
```
Note that you'll need to replace the icon class with your own custom icon class.
By following this template outline, you'll be able to create a stunning Neo Brutalism-inspired website that showcases your creativity and professionalism. Happy designing!
## Template Details
### Template Name: Vibrant Oasis
### Template Type: Neo Brutalism
### Color Palette:
* Primary: #FF69B4 (candy pink)
* Secondary: #F7DC6F (yellow)
* Accent: #FFD7BE (peach)
### Fonts:
* Heading: Montserrat
* Body: Open Sans
### Sections:
* Header
* Hero Section
* Feature Block
* Call-to-Action (CTA) Block
* Footer
### Responsive:
* Desktop: 1920px and above
* Tablet: 768px - 1919px
* Mobile: 320px - 767px
## Template Code
### Header
```html
<header class="header">
<nav class="menu-bar">
<!-- menu items -->
</nav>
</header>
```
### Hero Section
```html
<section class="hero-section">
<div class="hero-box">
<h1 class="hero-heading">Vibrant Oasis</h1>
<div class="hero-shapes">
<!-- animated shapes -->
</div>
</div>
</section>
```
### Feature Block
```html
<section class="feature-block">
<div class="feature-container">
<div class="feature">
<i class="fas fa-"></i>
<h2 class="feature-heading">Feature 1</h2>
<p class="feature-description">Short description</p>
</div>
<div class="feature">
<i class="fas fa-"></i>
<h2 class="feature-heading">Feature 2</h2>
<p class="feature-description">Short description</p>
</div>
<div class="feature">
<i class="fas fa-"></i>
<h2 class="feature-heading">Feature 3</h2>
<p class="feature-description">Short description</p>
</div>
</div>
</section>
```
### Call-to-Action (CTA) Block
```html
<section class="cta-block">
<div class="cta-container">
<h2 class="cta-heading">Get Started</h2>
<button class="cta-button">Get Started</button>
</div>
</section>
```
### Footer
```html
<footer class="footer">
<div class="footer-container">
<div class="social-media-links">
<!-- social media icons -->
</div>
<div class="contact-information">
<!-- contact information -->
</div>
<div class="copyright-information">
<!-- copyright information -->
</div>
</div>
</footer>
```
## Customization
* Color palette
* Font styles and sizes
* Animated shapes in the hero section
* Feature block icons and text
* CTA button text and color
## Essential Plugins and Widgets
* Elementor Pro
* SVG Shape Generator
* Icon Font
MongoDB - Build AI That Scales
Mini tools
AI-powered financial projections for startup success.Open
