From 5954474e1c21dd5a657d225acc581a54a12574bb Mon Sep 17 00:00:00 2001 From: prajyothraib Date: Thu, 26 Feb 2026 10:24:26 +0530 Subject: [PATCH] prajyoth1 --- index.html | 265 ++++++++++++++++++++++++++++------------------------- style.css | 108 ++++++++++++++++++++++ 2 files changed, 250 insertions(+), 123 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 1297c21..673cd2c 100644 --- a/index.html +++ b/index.html @@ -4,140 +4,159 @@ - - Cours HTML - + Cours HTML - Version Avancée + -
-

Texte - Titre H1

-

- em pour mettre en italique, - strong pour mettre en gras - L'élement en span ne revient pas à la ligne. -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem - cumque ratione veniam officiis nulla a debitis at facilis sed - dignissimos. -

-
- -
-
-

Photo - Titre H2

- image-arbre -
-
-

Liste - Titre H3

-
    -
  • UL = unordered list
    • -
  • UL = unordered list
    • -
  • UL = unordered list
    • -
-
    -
  1. OL = ordered list
    2. -
  2. OL = ordered list
    3. -
  3. OL = ordered list
    4. -
-
+ + + + +
+

Texte - Titre H1

+ +

+ em pour mettre en italique, + strong pour mettre en gras + L'élement en span ne revient pas à la ligne. +

+ + +

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+ + +
+ +

Galerie Photo

+ +
+ image1 + image2 + image3 + image4 +
+ +

Liste Améliorée

+ +
    +
  • HTML Structure
    • +
  • CSS Styling
    • +
  • JavaScript Interaction
    • +
+ +

Table Améliorée

+ + + + + + + + + + + + + + + + + + + + + + + +
Col 1Col 2Col 3
Row 1DataData
DataData
Large Cell
-
-

Tableaux - Titre H4

- - - - - - - - - - - - - - - - - - - - - - -
Col 1Col 2Col 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
+
+ + +
+

Cartes d'Information

+ +
+
+ +

HTML

+

Langage de structure pour le web.

-
-
♖ Liens - Titre H5
- HTML Cheatsheet -
- Icones natifs en HTML +
+ +

CSS

+

Langage de style et design.

-
-
Vidéo - Titre H6
- +
+ +

JavaScript

+

Langage d'interaction.

-
-
- -
-

Formulaire

-
- -
- - - -
- - - -
- - -
- - - - - - - - -
- -
- - -
- -
-
-
- - - + +
+ + +
+

Formulaire

+ +
+ + + + +
+
+ + +
+

FAQ

+
+ Qu'est-ce que HTML ? +

HTML est un langage de balisage.

+
+ +
+ Qu'est-ce que CSS ? +

CSS permet de styliser une page web.

+
+ +
+ Qu'est-ce que JavaScript ? +

JavaScript ajoute de l'interactivité.

+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..400fafe --- /dev/null +++ b/style.css @@ -0,0 +1,108 @@ +body { + font-family: Arial; + margin: 0; + background: #f4f6f9; +} + +nav { + background: #222; + padding: 15px; + display: flex; + justify-content: space-between; + color: white; +} + +nav ul { + list-style: none; + display: flex; + gap: 20px; +} + +nav a { + color: white; + text-decoration: none; +} + +header { + padding: 40px; + background: linear-gradient(120deg,#667eea,#764ba2); + color: white; +} + +.highlight { + background: yellow; + color: black; + padding: 5px; +} + +.gallery { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); + gap: 15px; + padding: 20px; +} + +.gallery img { + width: 100%; + border-radius: 10px; + transition: 0.4s; +} + +.gallery img:hover { + transform: scale(1.1); +} + +.cards { + display: flex; + gap: 20px; + justify-content: center; + padding: 40px; +} + +.card { + background: white; + padding: 25px; + width: 250px; + text-align: center; + border-radius: 15px; + transition: 0.4s; +} + +.card:hover { + transform: translateY(-10px); +} + +.modern-table { + width: 80%; + margin: 20px auto; + border-collapse: collapse; +} + +.modern-table th, +.modern-table td { + border: 1px solid #ddd; + padding: 10px; +} + +.modern-form { + display: flex; + flex-direction: column; + width: 60%; + margin: auto; + gap: 15px; +} + +.modern-form button { + padding: 10px; + background: #667eea; + color: white; + border: none; + cursor: pointer; +} + +footer { + background: #222; + color: white; + text-align: center; + padding: 20px; +} \ No newline at end of file