Skip to content

les points à rèvoir dans le fichier index.html #1

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
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

les points à rèvoir dans le fichier index.html #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
be0e4b9
Update index.html
omarino-go Oct 24, 2025
3c4bff8
Update style.css
omarino-go Oct 24, 2025
1f4286b
correction index.hlm
Oct 25, 2025
dbb3472
rectification css
Oct 25, 2025
172d557
delete readm et index
Oct 25, 2025
f9a231f
delete css
Oct 25, 2025
8fbc38b
merge patch2 in1
Oct 25, 2025
5afb583
correction complete du projet
Oct 25, 2025
f733f45
Update index.html
omarino-go Oct 27, 2025
149c4fb
rectifiction
Oct 28, 2025
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
17 changes: 0 additions & 17 deletions README.md
View file
Open in desktop

This file was deleted.

71 changes: 40 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,49 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>single price grid</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="global">
<div class="titrep1">
<h1 class="titre1">Join our community</h1>
<p class="p1">30-day , hassle-free money back guarantee</p>
<p class="paragraphe1">
Gain access to our full library of tutoriels along whith expert code reviews,perfect <br>
for any developers who serious about honing their skills.
</p>
</div>
<div class="contenus">
<div class="contenu1">
<p class="contenu1P">
<span class="m">m</span>onthly Subscription <br> <br>
<span class="sp">$29</span> per month <br><br>
Full access for less than $1 a day</p>
<button class="btcontenu1">Sing Up</button>
</div>
<div class="contenu2">
<p class="contenu2-P">
<span><strong>W</strong>hy <strong>U</strong>s</span> <br> <br>
<span class="text">Tutorials by industry experts <br>
peer & expert code review <br>
coding exercices <br>
Acces to our Github repos <br>
Community from <br>
Flashcard decks <br>
New videos every week </span>
<body>
<div class="global">
<div class="titrep1">
<h1 class="titre1">Join our community</h1>
<p class="p1">30-day , hassle-free money back guarantee</p>
<p class="paragraphe1">
<!-- le br fait quoi jusqu'à présent si tu l'as laisse elle te crée des poblème dès que tu reduit l'écran essaie et tu verras -->
<!--j'attends la correction -->
<p>Gain access to our full library of tutoriels along whith expert code reviews,perfect</p>
<p>for any developers who serious about honing their skills.</p>
</p>
</div>
</div>
<div class="contenus">
<div class="contenu1">
<h2>Monthly Subscription </h2>
<div class="contenu1P">
<!-- es-que se faisable de mettre un titre dans un paragraphe. À révoir -- c'est l'aublie -->

<!-- pourquoi utiliser trop de br il ya déjà des balise de type **""bloque""** tu devrais les appliquer et dans css tu augmant la distance entre les deux je comprends bien je d -->
<div > <span> <span class="sp">$29</span> per month </span></div>
<div>Full access for less than $1 a day</div>
</div>
<button class="btcontenu1">Sing Up</button>
</div>
<div class="contenu2">
<p class="contenu2-P">
<h2>Why Us</h2>
<ul class="liste">
<li>Tutorials by industry experts </li>
<li>peer & expert code review</li>
<li>coding exercices</li>
<li>Acces to our Github repos</li>
<li>Community from</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</p>
</div>
</div>
</div>
</body>
</html>
</html>
<!-- l'essentiel n'est pas que ça marche mais c'est de bien faire et en un temps minum -->
77 changes: 60 additions & 17 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
/* si tu commente une ou plusieurs ligne et tu n'as plus besoin d'eux pourquoi les laissés il faut les supprimer s'il font rien ou le decommenter dans le cas contraire */
/* Les nom utiliser pour les classes ou les id doit avoir une signification */
body{
/* les deux propriètes css que tu utilsé font quoi
le nagivigateur donne de margin par defaur pour eviter ca j'ai initialiseé mon margin en o px
margin:permet de creer de l'espace a l'exterieur d'un element;
position relative:permet de positionner un element de sa position static*/
position: relative;
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color:rgba(206, 206, 185, 0.829);
margin: 0;
}
.global{
/* les trois propriètes css que tu as utilisé font quoi exactement
les 2 elements permettent de centrer verticalement et horizontalement et border-raduis permet d'arondir les bordures*/
justify-content: center;
align-items: center;
background-color: blue;
Expand All @@ -16,29 +24,36 @@ body{
margin: 20px auto*/
}
.titrep1{
/* les trois propriètes css que tu as utilisé font quoi exactement
elles permettent de positionner nos elements horizontalemnts et verticalements */
justify-content: center;
align-items: center;
background-color: #fff;
border: 2px solid #fff;
background-color: #fff;
padding: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.contenus{
/* les quatre propriètes css que tu as utilisé font quoi exactement
dislpay-flex :elle met les elements en ligne l'un apres l'autre sur la meme ligne
flex-wrap:apres avoir mis en s'il n' y a pas d'espace elle permet de retourner a la ligne directement*/
position: relative;
display: flex;
flex-wrap:wrap;
background: blue;
border-radius: 6px;
width:100%;
display: flex;
}
.contenu1{
background-color: rgba(4, 199, 134, 0.842);
width: 50%;
/* au lieu d'utiliser 4 balises juste pour les centre pourquoi pas utilisé une padding et faire pareil pour optimiser ton code bonee remarque c'est noté*/
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;

background-color: rgba(4, 199, 134, 0.842);
width: 50%;
color: #fff;
border-radius: 1px;
border-bottom-left-radius: 5px;
Expand All @@ -48,12 +63,14 @@ body{
transform: translate(-50%, -50%);*/
}
.contenu2{
background-color: aqua;
width: 50%;
/* pareil ici aussi */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

background-color: aqua;
width: 50%;
border-radius: 1px;
color: #fff;
border-bottom-right-radius: 5px;
Expand All @@ -73,22 +90,44 @@ body{
font-size: 1.5em;
}
.btcontenu1{
background-color: rgb(147, 236, 14);
padding-left:85px;
/* au lieu de 4 propriètes */
/* padding: 10px 30%; */
/* padding-left:85px;
padding-right: 85px;
padding-bottom: 10px;
padding-top: 10px;
border: 0px;
padding-top: 10px;*/
padding: 5% 20%;
background-color: rgb(147, 236, 14);
/* de preference : border: none; */
border: none;

border-radius: 5px;
}

.contenu1P{
margin: 20px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 10px;
}
.text{
/* trés bien refléchis la seul chose que j'étais sûr que tu vas raté c'est elle que tu as trouvé😅 mais il faut l'augmenté merci*/
line-height: 20px;
}
.liste li {
list-style: none;
gap: 20px;
}
.paragraphe1{
line-height: 20px;
display: block;
gap:10px;

}
@media screen and (max-width: 588px) {
.contenus {
/* je vois l'utilité de ces 4 propriètés css, explication
display-block:permet de disposer les ementents qui sont sur en ligne en bloc l'un au dessous de l'autre*/
display: block;
align-items: center;
gap: 100px;
Expand All @@ -97,22 +136,26 @@ body{
.contenu1,
.contenu2 {
width: 100%;
/* l'utilité de ces deux propriètés */
align-items: center;
justify-content: center;
}
.global{
margin:10px 10px;
}
.contenu2-P{
margin-right: 44%;
margin-right: 20%;
}
.contenu1P{
margin-right:40%;
margin-right:20%;
display: block;
gap: 20px;
}
.btcontenu1{
padding: 10px 120px;
/* la taille du boutton n'est pas fix,elle doit être en % */
padding: 2% 40%;
}
.contenu1{
height:200px;
height:300px;
}
}
}