Scribd
Upload
6 views4 pages

Doctype HTML

This document outlines the HTML structure and CSS styling for an e-commerce website. It includes a header with a search form and a main section displaying products in a grid layout. Each product features an image, title, description, and an 'Add to Cart' button.

Uploaded by

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

Doctype HTML

This document outlines the HTML structure and CSS styling for an e-commerce website. It includes a header with a search form and a main section displaying products in a grid layout. Each product features an image, title, description, and an 'Add to Cart' button.

Uploaded by

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

<!

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Mon Site Web d'e-commerce</title>

<style>

.header {

display: flex;

justify-content: space-between;

padding: 20px;

.header h1 {

margin: 0;

.header form {

display: flex;

align-items: center;

.header input[type="text"] {

border: 1px solid #ccc;

padding: 10px;

}
.header input[type="submit"] {

background-color: dodgerblue;

color: #fff;

border: none;

padding: 10px 20px;

.header input[type="submit"]:hover {

cursor: pointer;

.products {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

.product {

background-color: #fff;

box-shadow: 1px 1px 5px #ccc;

text-align: center;

padding: 20px;

}
.product h3 {

margin: 0;

.product img {

width: 100%;

height: 200px;

object-fit: cover;

.product button {

background-color: dodgerblue;

color: #fff;

border: none;

padding: 10px 20px;

display: block;

margin: 20px auto;

.product button:hover {

cursor: pointer;

</style>

</head>

<body>
<header class="header">

<h1>Mon Site Web d'e-commerce</h1>

<form>

<input type="text" placeholder="Rechercher des produits">

<input type="submit" value="Rechercher">

</form>

</header>

<main>

<section class="products">

<article class="product">

<img src="[Link] alt="Produit 1">

<h3>Produit 1</h3>

<p>Description du produit 1</p>

<button>Ajouter au panier</button>

</article>

<article class="product">

<img src="[Link]

You might also like