Projet 1 Voici un exemple de code simple pour créer un site web de base pour un
graphiste. Ce site inclut une page d’accueil présentant le graphiste, une section
portfolio, et une section contact.
Structure du site (HTML)
Crée un fichier nommé [Link] :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphiste Freelance</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Graphiste Freelance</h1>
<nav>
<ul>
<li><a href="#about">À propos</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>À propos de moi</h2>
<p>Bonjour ! Je suis un graphiste passionné spécialisé dans la création de designs
modernes et percutants. Je travaille avec des entreprises et particuliers pour donner
vie à leurs idées visuelles.</p>
</section>
<section id="portfolio">
<h2>Mon Portfolio</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="[Link]" alt="Projet 1">
<p>Design de logo</p>
</div>
<div class="portfolio-item">
<img src="[Link]" alt="Projet 2">
<p>Affiche publicitaire</p>
</div>
<div class="portfolio-item">
<img src="[Link]" alt="Projet 3">
<p>Branding d'entreprise</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contactez-moi</h2>
<form action="[Link] method="POST">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
<footer>
<p>© 2024 Graphiste Freelance. Tous droits réservés.</p>
</footer>
</body>
</html>
Style du site (CSS)
Crée un fichier nommé [Link] :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header nav ul {
list-style: none;
padding: 0;
}
header nav ul li {
display: inline;
margin: 0 15px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 2rem;
text-align: center;
}
#portfolio {
background: #f4f4f4;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.portfolio-item img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
}
form {
max-width: 600px;
margin: 0 auto;
text-align: left;
}
form label {
display: block;
margin-top: 10px;
}
form input, form textarea, form button {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}
footer {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
Étapes pour utiliser ce site :
1. Créez un dossier contenant les fichiers [Link] et [Link].
2. Ajoutez vos images pour le portfolio dans le même dossier (ex.
[Link], [Link], etc.).
3. Remplacez l’action du formulaire par une adresse email (par exemple,
avec Formspree).
Ce site est simple et responsive, mais vous pouvez l’améliorer en utilisant des
frameworks comme Bootstrap ou TailwindCSS pour plus de fonctionnalités et de
personnalisation.
Créer un site web de boutique de vente en ligne avec HTML et CSS est un excellent
projet. Voici un plan simple pour commencer :
1. Structure de base en HTML
Le fichier HTML définit la structure de votre site web.
Exemple de code [Link] :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boutique en ligne</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- En-tête -->
<header>
<div class="logo">
<h1>Boutique en Ligne</h1>
</div>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#products">Produits</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Section d'accueil -->
<section id="home" class="hero">
<h2>Bienvenue dans notre boutique</h2>
<p>Découvrez nos produits exceptionnels !</p>
<a href="#products" class="btn">Explorer</a>
</section>
<!-- Section Produits -->
<section id="products" class="products">
<h2>Nos produits</h2>
<div class="product-list">
<div class="product-item">
<img src="[Link]" alt="Produit 1">
<h3>Produit 1</h3>
<p>Prix : 20€</p>
<button class="btn">Ajouter au panier</button>
</div>
<div class="product-item">
<img src="[Link]" alt="Produit 2">
<h3>Produit 2</h3>
<p>Prix : 30€</p>
<button class="btn">Ajouter au panier</button>
</div>
<!-- Ajouter d'autres produits -->
</div>
</section>
<!-- Section Contact -->
<section id="contact" class="contact">
<h2>Contactez-nous</h2>
<form>
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="btn">Envoyer</button>
</form>
</section>
<!-- Pied de page -->
<footer>
<p>© 2024 Boutique en Ligne. Tous droits réservés.</p>
</footer>
</body>
</html>
2. Style avec CSS
Le fichier CSS applique du style et rend votre site attrayant.
Exemple de code [Link] :
/* Style général */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* En-tête */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}
header .logo h1 {
margin: 0;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
margin: 0 15px;
}
header nav ul li a {
text-decoration: none;
color: white;
}
header nav ul li a:hover {
text-decoration: underline;
}
/* Section Hero */
.hero {
text-align: center;
padding: 100px 20px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #fff;
}
.hero .btn {
background-color: #fff;
color: #ff7e5f;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.hero .btn:hover {
background-color: #feb47b;
color: #fff;
}
/* Section Produits */
.products {
padding: 50px 20px;
text-align: center;
}
.products .product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.products .product-item {
margin: 15px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
width: 250px;
}
.products .product-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.products .product-item h3 {
margin: 10px 0;
}
.products .product-item .btn {
background-color: #ff7e5f;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.products .product-item .btn:hover {
background-color: #feb47b;
}
/* Section Contact */
.contact {
padding: 50px 20px;
background-color: #f9f9f9;
text-align: center;
}
.contact form {
max-width: 500px;
margin: 0 auto;
}
.contact form label {
display: block;
margin: 10px 0 5px;
}
.contact form input,
.contact form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact form .btn {
background-color: #ff7e5f;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact form .btn:hover {
background-color: #feb47b;
}
/* Pied de page */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
margin-top: 20px;
}
3. Étapes supplémentaires
1. Ajouter des images : Placez des images des produits dans un dossier
appelé images ou similaire.
2. Créer un formulaire fonctionnel : Vous pouvez intégrer un backend ou
utiliser un service tiers comme Google Forms pour capturer les messages.
3. Ajout de fonctionnalités dynamiques : Vous pouvez utiliser JavaScript
pour :
• Gérer un panier d’achat.
• Mettre en place un système de filtrage des produits.
4. Optimiser pour le mobile : Ajoutez des médias queries en CSS pour
rendre le site responsive.
Si vous avez besoin d’aide pour ajouter des fonctionnalités ou
personnaliser le design, n’hésitez pas à demander.
