Skip to content

prajyoth1 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prajyothraib wants to merge 1 commit into
base: master
Choose a base branch
from
Open

prajyoth1 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 142 additions & 123 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,140 +4,159 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Le titre de la page -->
<title>Cours HTML</title>
<!-- Icone de l'onglet -->
<title>Cours HTML - Version Avancée</title>
<link rel="shortcut icon" href="html-logo.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<h1>Texte - Titre H1</h1>
<p>
<em>em pour mettre en italique</em>,
<strong>strong pour mettre en gras</strong>
<span>L'élement en span ne revient pas à la ligne</span>.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
cumque ratione veniam officiis nulla a debitis at facilis sed
dignissimos.
</p>
</header>

<section>
<div>
<h2>Photo - Titre H2</h2>
<img src="./img-1.jpg" alt="image-arbre" height="200" />
</div>

<div>
<h3>Liste - Titre H3</h3>
<ul>
<li>UL = unordered list</li>
<li>UL = unordered list</li>
<li>UL = unordered list</li>
</ul>
<ol>
<li>OL = ordered list</li>
<li>OL = ordered list</li>
<li>OL = ordered list</li>
</ol>
</div>
<!-- ================= NAVBAR ================= -->
<nav>
<div class="logo">Cours HTML</div>
<ul>
<li><a href="#texte">Texte</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#formulaire">Formulaire</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<!-- ================= HEADER ================= -->
<header id="texte">
<h1 class="fade">Texte - Titre H1</h1>

<p>
<em>em pour mettre en italique</em>,
<strong>strong pour mettre en gras</strong>
<span class="highlight">L'élement en span ne revient pas à la ligne</span>.
</p>

<!-- Added multiple paragraphs -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</header>

<!-- ================= MEDIA SECTION ================= -->
<section id="media">

<h2>Galerie Photo</h2>

<div class="gallery">
<img src="./img-1.jpg" alt="image1">
<img src="./img-1.jpg" alt="image2">
<img src="./img-1.jpg" alt="image3">
<img src="./img-1.jpg" alt="image4">
</div>

<h3>Liste Améliorée</h3>

<ul class="styled-list">
<li>HTML Structure</li>
<li>CSS Styling</li>
<li>JavaScript Interaction</li>
</ul>

<h4>Table Améliorée</h4>

<table class="modern-table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Row 1</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="3">Large Cell</td>
</tr>
</tbody>
</table>

<div>
<h4>Tableaux - Titre H4</h4>
<table border="4" cellpadding="10" cellspacing="4" style="text-align: center">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</tbody>
</table>
</section>

<!-- ================= CARDS SECTION ================= -->
<section>
<h2>Cartes d'Information</h2>

<div class="cards">
<div class="card">
<i class="fas fa-code"></i>
<h3>HTML</h3>
<p>Langage de structure pour le web.</p>
</div>

<div>
<h5><span>&#9814;</span> Liens - Titre H5</h5>
<a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a>
<br />
<a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a>
<div class="card">
<i class="fas fa-paint-brush"></i>
<h3>CSS</h3>
<p>Langage de style et design.</p>
</div>

<div>
<h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6>
<video src="video.mp4" height="150" autoplay loop muted></video>
<div class="card">
<i class="fas fa-bolt"></i>
<h3>JavaScript</h3>
<p>Langage d'interaction.</p>
</div>
</section>
<br />
<!-- Formulaires en HTML -->
<section>
<h2>Formulaire</h2>
<form action="/action.php" method="post">
<label for="name">Nom</label>
<input id="name" type="text" placeholder="Entrez votre nom" /><br />

<label for="number">Entrez votre age</label>
<input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value">
<input type="range" id="range-age" min="0" max="100"
oninput="document.getElementById('number-age').value=this.value"><br />

<!-- Input select -->
<label for="gender">Genre</label>
<select id="gender">
<option selected="selected" value="Homme">Homme</option>
<option value="Femme">Femme</option>
</select><br />

<!-- Input radio -->
<div>
<input type="radio" name="type" id="human" checked />
<label for="human">Humain</label>

<input type="radio" name="type" id="dog" />
<label for="dog">Chien</label>

<input type="radio" name="type" id="cat" />
<label for="cat">Chat</label>
</div>

<textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br />

<!-- Input Checkbox -->
<label><input type="checkbox" />Accepter les CGV</label> <br />
<input type="submit" value="Submit" />
</form>
</section>
<br />
<!-- Mail & envoi de fichiers -->
<footer>
<a href="mailto:fs@gmail.com">Ecrivez-moi !</a>
<br />
<a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a>
<details>
<summary>Plus d'infos</summary>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum,
repellendus.
</p>
</details>
</footer>
</body>
</div>
</section>

<!-- ================= FORM SECTION ================= -->
<section id="formulaire">
<h2>Formulaire</h2>

<form class="modern-form">
<input type="text" placeholder="Nom">
<input type="email" placeholder="Email">
<textarea placeholder="Votre message"></textarea>
<button type="submit">Envoyer</button>
</form>
</section>

<!-- ================= FAQ SECTION ================= -->
<section>
<h2>FAQ</h2>

<details>
<summary>Qu'est-ce que HTML ?</summary>
<p>HTML est un langage de balisage.</p>
</details>

<details>
<summary>Qu'est-ce que CSS ?</summary>
<p>CSS permet de styliser une page web.</p>
</details>

<details>
<summary>Qu'est-ce que JavaScript ?</summary>
<p>JavaScript ajoute de l'interactivité.</p>
</details>
</section>

<!-- ================= FOOTER ================= -->
<footer id="contact">
<p>© 2026 Cours HTML - Version Professionnelle</p>
<a href="mailto:prajyothraib@gmail.com">prajyoth rai b</a>
</footer>

<script src="script.js"></script>
</body>
</html>
108 changes: 108 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}