Scribd
Upload
30 views

Htmlcss

Uploaded by

susy54200
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views

Htmlcss

Uploaded by

susy54200
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Professionnel Dynamique</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="fade-in">
<div class="logo">
<h1>ProSite</h1>
</div>
<nav>
<ul>
<li><a href="#home" class="nav-link">Accueil</a></li>
<li><a href="#services" class="nav-link">Nos Services</a></li>
<li><a href="#portfolio" class="nav-link">Portfolio</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>

<section id="home" class="hero-section">


<div class="hero-content fade-in-up">
<h2>Construisez l'avenir avec nous</h2>
<p>Design moderne et solutions numériques innovantes pour propulser
votre entreprise.</p>
<button class="btn-primary" onclick="scrollToSection('services')">Nos
Services</button>
</div>
</section>

<section id="services" class="services-section fade-in-up">


<h2>Nos Services</h2>
<div class="services-grid">
<div class="service-item">
<h3>Développement Web</h3>
<p>Création de sites web interactifs et performants.</p>
</div>
<div class="service-item">
<h3>UX/UI Design</h3>
<p>Optimisation de l'expérience utilisateur avec un design
élégant.</p>
</div>
<div class="service-item">
<h3>Consultation Digitale</h3>
<p>Accompagnement stratégique pour votre transformation
numérique.</p>
</div>
</div>
</section>

<section id="portfolio" class="portfolio-section fade-in-up">


<h2>Nos Projets</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://via.placeholder.com/350" alt="Projet 1">
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/350" alt="Projet 2">
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/350" alt="Projet 3">
</div>
</div>
</section>

<section id="contact" class="contact-section fade-in-up">


<h2>Contactez-nous</h2>
<form id="contact-form">
<input type="text" id="name" placeholder="Votre nom" required>
<input type="email" id="email" placeholder="Votre email" required>
<textarea id="message" placeholder="Votre message" required></textarea>
<button type="submit" class="btn-primary">Envoyer</button>
</form>
</section>

<footer>
<p>&copy; 2024 ProSite - Tous droits réservés.</p>
</footer>

<script src="script.js"></script>
</body>
</html>

css:

/* Global settings */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #044d16;
color: #044d16;
line-height: 1.6;
}

/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: #000802;
color: #044d16;
box-shadow: 0 4px 10px rgba(196, 29, 29, 0.1);
opacity: 0;
animation: fadeIn 1s forwards;
}

header .logo h1 {
font-size: 24px;
letter-spacing: 2px;
font-weight: 700;
}

nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: #044d16;
font-size: 18px;
transition: color 0.3s ease;
}

nav ul li a:hover {
color: #FFD700; /* Or gold color for hover effect */
}

/* Hero Section */
.hero-section {
background: url('https://via.placeholder.com/1500x800') no-repeat center
center/cover;
height: 100vh;
color: #044d16;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
animation: fadeIn 1.5s forwards;
}

.hero-content {
max-width: 600px;
animation: fadeInUp 1s ease-in-out;
}

.hero-content h2 {
font-size: 48px;
margin-bottom: 20px;
font-weight: bold;
opacity: 0;
animation: fadeInUp 1s ease-in-out forwards;
}

.hero-content p {
font-size: 20px;
margin-bottom: 30px;
opacity: 0;
animation: fadeInUp 1s ease-in-out 0.5s forwards;
}

.btn-primary {
background-color: #FFD700;
color: #1a1a1a;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.btn-primary:hover {
background-color: #ff9e00;
}

/* Section Animations */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Services Section */
.services-section {
padding: 60px 20px;
background-color: #044d16;
text-align: center;
animation: fadeInUp 1s ease-in-out;
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.service-item {
background-color: #08962b;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.service-item h3 {
font-size: 24px;
margin-bottom: 20px;
}

/* Portfolio Section */
.portfolio-section {
padding: 60px 20px;
background-color: #044d16;
text-align: center;
animation: fadeInUp 1s ease-in-out;
}

.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.portfolio-item img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.5s ease, transform 0.5s ease;
}

.portfolio-item img:hover {
transform: scale(1.05);
opacity: 1;
}

/* Contact Section */
.contact-section {
padding: 60px 20px;
background-color: #1a1a1a;
color: #08962b;
text-align: center;
animation: fadeInUp 1s ease-in-out;
}

.contact-section form {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 0 auto;
}

.contact-section input, .contact-section textarea {


padding: 15px;
border-radius: 8px;
border: 1px solid #08962b;
font-size: 16px;
transition: border 0.3s ease;
}

.contact-section input:focus, .contact-section textarea:focus {


border: 1px solid #FFD700;
}

.contact-section button {
background-color: #FFD700;
color: #1a1a1a;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.contact-section button:hover {
background-color: #ff9e00;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #050e07;
color: #08962b;
}

jv:

// Fonction de défilement fluide


function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
window.scrollTo({
top: section.offsetTop - 70,
behavior: 'smooth'
});
}

// Détection de la visibilité des éléments au défilement


const portfolioItems = document.querySelectorAll('.portfolio-item img');
const servicesItems = document.querySelectorAll('.service-item');

function revealOnScroll() {
portfolioItems.forEach(item => {
const position = item.getBoundingClientRect().top;
const windowHeight = window.innerHeight;

if (position < windowHeight * 0.8) {


item.style.opacity = '1';
item.style.transform = 'scale(1)';
}
});

servicesItems.forEach(item => {
const position = item.getBoundingClientRect().top;
const windowHeight = window.innerHeight;

if (position < windowHeight * 0.8) {


item.classList.add('fade-in-up');
}
});
}

window.addEventListener('scroll', revealOnScroll);

You might also like