Custom HTML Integration with Slider

Requirements:

HTML Section Details:
The HTML code should match the functionality and appearance of the section on Maklaro, specifically the section asking "Welche Objektart möchten Sie verkaufen?" with interactive options for "Haus" and "Wohnung."

Provided Resources:
We will provide all necessary HTML, CSS, and JavaScript files, except for the white banner found on Maklaro.

Target Integration Point:
The new section should be placed directly before the living room banner on the homepage of development.immobilien-rother.de.

Steps for Integration:

Setup Development Environment:
Access the WordPress admin panel of development.immobilien-rother.de.
Ensure you have appropriate permissions to edit theme files and upload resources.

Edit Theme Files:
Navigate to Appearance > Theme Editor and select the appropriate theme currently active.
Open the front-page.php file or the equivalent file that controls the homepage layout.

Insert Custom HTML:

Locate the section in the front-page.php file where the living room banner is integrated.

Insert the provided HTML code directly above the living room banner section.

php

<!-- Custom HTML Section Start -->
<div class="hero__front">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="hero__teaser">
<div class="teaser-box">
<h2 class="teaser-box__headline">
Welche <strong>Objektart</strong> möchten Sie verkaufen?
</h2>
<ul class="teaser-box__options clearfix">
<li>
<a class="circle-small" href="/immobilie-verkaufen/slider-anfrage?type=house">
<div class="circle-small__inner">
<div class="circle-small__img">
<img src="/s/eoa/images/h-house.png">
</div>
<div class="circle-small__img circle-small__img--hover">
<img src="/s/eoa/images/house.png">
</div>
</div>
</a>
<h3 class="teaser-box__options__name">Haus</h3>
</li>
<li>
<a class="circle-small" href="/immobilie-verkaufen/slider-anfrage?type=apartment">
<div class="circle-small__inner">
<div class="circle-small__img">
<img src="/s/eoa/images/h-apartment.png">
</div>
<div class="circle-small__img circle-small__img--hover">
<img src="/s/eoa/images/apartment.png">
</div>
</div>
</a>
<h3 class="teaser-box__options__name">Wohnung</h3>
</li>
</ul>
<div class="teaser-box__cta">
<a href="/immobilie-verkaufen/slider-anfrage" class="btn btn-success btn-lg">Weiter</a>
</div>
</div>
</div>
<div class="hero__badge hidden-xs">
<div class="badge">
<div class="badge__inner">
<div class="badge__icon">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="badge__text">
<strong>Kostenfreie</strong>
Immobilien-bewertung
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom HTML Section End -->

<!-- Existing Living Room Banner Section -->

Upload CSS and JS Files:

Use FTP or the WordPress dashboard to upload the provided CSS and JS files to the appropriate directories.
Typically, CSS files go in the wp-content/themes/your-theme/css/ directory and JS files go in wp-content/themes/your-theme/js/.

Enqueue Scripts and Styles:

Ensure the new CSS and JS files are enqueued in your theme. This can be done in the functions.php file of your theme.

php

function enqueue_custom_styles_and_scripts() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles_and_scripts' );

Test the Integration:
Clear any caches and test the integration on different devices and browsers to ensure responsiveness and functionality.
Verify that the new section appears correctly before the living room banner and that all links and images function as expected.

Deliverables:

Properly integrated custom HTML section on the development.immobilien-rother.de homepage.
All provided CSS and JS files uploaded and correctly enqueued.
Full functionality and responsiveness of the new section, similar to the Maklaro site.

Notes:

Ensure the work is done on the development environment development.immobilien-rother.de before moving to the live site.
Maintain communication throughout the project for any clarifications or additional requirements.