Scribd
Upload
10 views6 pages

Docum

The document is an HTML template for a web interface featuring a carousel of images, with a header, about section, services section, and footer. It includes PHP code to dynamically display images and JavaScript for navigation controls. The design is styled with CSS for a clean and modern look.

Uploaded by

neladigbe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
10 views6 pages

Docum

The document is an HTML template for a web interface featuring a carousel of images, with a header, about section, services section, and footer. It includes PHP code to dynamically display images and JavaScript for navigation controls. The design is styled with CSS for a clean and modern look.

Uploaded by

neladigbe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 6

< ?

php

$images = [

‘image1.jpg’,

‘image2.jpg’,

‘image3.jpg’

];

?>

< !DOCTYPE html>

<html lang= »fr »>

<head>

<meta charset= »UTF-8 »>

<meta name= »viewport » content= »width=device-width, initial-


scale=1.0 »>

<title>Interface Exemple avec Carrousel</title>

<style>

Body {

Font-family : Arial, sans-serif ;

Margin : 0 ;

Padding : 0 ;

Background-color : #f4f4f4 ;

Header {

Background : #333 ;

Color : #fff ;

Padding : 10px 20px ;

Text-align : left ;

.hero {
Position : relative ;

Overflow : hidden ;

Width : 100% ;

Max-height : 400px ;

Margin : 20px 0 ;

.hero img {

Width : 100% ;

Height : auto ;

Display : none ;

.hero img.active {

Display : block ;

.controls {

Position : absolute ;

Top : 50% ;

Width : 100% ;

Display : flex ;

Justify-content : space-between ;

Transform : translateY(-50%) ;

.button {

Background : rgba(255, 255, 255, 0.7) ;

Border : none ;

Padding : 10px ;

Cursor : pointer ;

.about, .services, footer {


Padding : 20px ;

Margin : 10px ;

Background : white ;

Border-radius : 5px ;

.services {

Display : flex ;

Justify-content : space-around ;

.service-item {

Text-align : center ;

Padding : 10px ;

Footer {

Text-align : center ;

Background : #333 ;

Color : #fff ;

</style>

</head>

<body>

<header>

<div class= »logo »>Logo</div>

</header>

<section class= »hero »>

< ?php foreach ($images as $index => $image) : ?>


<img src= »< ?php echo $image ; ?> » alt= »Image < ?php echo
$index + 1 ; ?> » class= »< ?php echo $index === 0 ? ‘active’ : ‘’ ; ?> »>

< ?php endforeach ; ?>

<div class= »controls »>

<button class= »button » id= »prev »> &lt ; </button>

<button class= »button » id= »next »> &gt ; </button>

</div>

</section>

<section class= »about »>

<h2>À propos</h2>

<p>Description de l’entreprise.</p>

</section>

<section class= »services »>

<h2>Nos Livrables</h2>

<div class= »service-item »>

<p>⭐ Service 1</p>

</div>

<div class= »service-item »>

<p>⭐ Service 2</p>

</div>

<div class= »service-item »>

<p>⭐ Service 3</p>

</div>

</section>

<footer>

<p>Contact | Réseaux sociaux | Autres informations</p>


</footer>

<script>

Let currentIndex = 0 ;

Const images = document.querySelectorAll(‘.hero img’) ;

Function showImage(index) {

Images.forEach((img, i) => {

Img.classList.remove(‘active’) ;

If (i === index) {

Img.classList.add(‘active’) ;

}) ;

Document.getElementById(‘next’).addEventListener(‘click’, () => {

currentIndex = (currentIndex + 1) % images.length ;

showImage(currentIndex) ;

}) ;

Document.getElementById(‘prev’).addEventListener(‘click’, () => {

currentIndex = (currentIndex – 1 + images.length) % images.length ;

showImage(currentIndex) ;

}) ;

</script>

</body>

</html>

You might also like