Ajout post tag

master
Noan07 2 years ago
parent 10b690f490
commit da4915d35d

@ -0,0 +1,33 @@
#suivreAussi{
font-size: 8px;
text-align: center;
border: 2px solid;
border-radius: 30px;
width: 200px;
}
#listeCompteASuivre{
border-top: 2px solid;
}
.infoPersonne{
display: flex;
}
.name{
font-size: 12px;
}
.arobase{
color:gray;
}
.PhotoProfile{
margin: 10px 15px 0px 20px;
width: 40px;
height:40px;
border-radius: 20px;
border: 2px solid #555;
}

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
<link rel="stylesheet" href="SuivreAussi.css" />
</head>
<body>
<div id="suivreAussi">
<h1>Suivre aussi</h1>
<div id="listeCompteASuivre">
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 B

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#likeCommentaire{
background-color: white;
position:fixed;
margin-left:33%;
margin-right: 33%;
border: 2px solid #666;
border-radius:10px;
width: 33%;
}
#divButton{
display:flex;
justify-content: space-between;
}
#divButton > div{
width:50%;
}
#buttonLike,#buttonCommentaire {
margin-top:10px;
background-color: white;
border:none;
width:100%;
height:25px;
}
#buttonLike{
border-bottom:solid 5px black;
}
#like{
display: block;
}
#buttonCommentaire{
border-bottom: none;
}
#commentaire{
display: none;
}
/*like et commentaire*/
#like, #commentaire{
font-size: 8px;
text-align: center;
}
#listeCompteASuivre{
border-top: 2px solid;
}
.infoPersonne{
display: flex;
}
.name{
font-size: 12px;
}
.arobase{
color:gray;
}
.PhotoProfile{
margin: 10px 15px 0px 20px;
width: 40px;
height:40px;
border-radius: 20px;
border: 2px solid #555;
}
</style>
</head>
<body>
<div id="likeCommentaire">
<div id="divButton">
<div><button type="button" id="buttonLike" onclick="openLike()">like</button></div>
<div><button type="button" id="buttonCommentaire" onclick="openCommentaire()">commentaire</button></div>
</div>
<div id="like">
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
</div>
</div>
</div>
<div id="commentaire">
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
<h4>texte du commantaire</h4>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
<h4>texte du commantaire</h4>
</div>
</div>
<div class="infoPersonne">
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<div class="cadreName">
<h2 class="name">personne 1</h2>
<h3 class="arobase">@personne1</h3>
<h4>texte du commantaire</h4>
</div>
</div>
</div>
</div>
</body>
<script>
function openLike() {
document.getElementById("like").style.display = "block";
document.getElementById("buttonLike").style.borderBottom = "solid 5px black";
document.getElementById("commentaire").style.display = "none";
document.getElementById("buttonCommentaire").style.borderBottom = "none";
}
function openCommentaire() {
document.getElementById("like").style.display = "none";
document.getElementById("buttonLike").style.borderBottom = "none";
document.getElementById("commentaire").style.display = "block";
document.getElementById("buttonCommentaire").style.borderBottom = "solid 5px black";
}
</script>
</html>

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Roboto, Helvetica, sans-serif;
}
.form-popup {
background-color: white;
display: none;
position:fixed;
margin-left:33%;
margin-right: 33%;
border: 2px solid #666;
border-radius:10px;
width: 33%;
}
/* Largeur complète pour les champs de saisie */
.form-container input[name="lien"],
.form-container textarea[name="description"],
.form-container label{
width: 80%;
margin: 10px 10% 50px 10%;
}
textarea{
resize: none;
height: 100px;
}
input[name="lien"],
textarea[name="description"]{
margin-left: 100px;
border: none;
background: #D9D9D9;
}
.input{
margin-top:20px;
}
#buttonForm{
margin-left:10%;
margin-right:10%;
margin-bottom:10px;
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<h2>Forme Popup</h2>
<p>Cliquez sur le bouton "Ouvrir la forme" pour ouvrir la fdbjfndbfhbdbnfhdbfnbdhbfhbdhbfhdbfhdhbfhdbhfforme Popup.</p>
<div class="open-btn">
<button class="open-button" onclick="openForm()"><strong>Ouvrir la forme</strong></button>
</div>
<div>
<div class="form-popup" id="popupFormulaireCreationPoste">
<form action="/action_page.php" class="form-container">
<div class="input">
<label for="lien">Lien:</label>
<input type="text" name="lien" required />
</div>
<div class="input">
<label for="description">Description:</label>
<textarea name="description" row =250></textarea>
</div>
<div id="buttonForm">
<div>
<button type="button" class="btn cancel" onclick="closeForm()">retour</button>
</div>
<div>
<button type="submit" class="btn">Poster</button>
</div>
</div>
</form>
</div>
</div>
<script>
function openForm() {
document.getElementById("popupFormulaireCreationPoste").style.display = "block";
}
function closeForm() {
document.getElementById("popupFormulaireCreationPoste").style.display = "none";
}
</script>
</body>
</html>

@ -0,0 +1,32 @@
#PhotoProfile{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height:150px;
border-radius: 80px;
border: 2px solid #555;
}
#blocAbonnement{
display: flex;
justify-content: center;
}
#blocAbonnement div{
margin-left: 80px;
margin-right: 80px;
}
#blocName{
text-align: center;
}
.nombre{
color:black;
}
.texteNombre{
color:grey;
}

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
<link rel="stylesheet" href="pagePerso.css" />
</head>
<body>
<div id="image">
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
</div>
<div id="blocName">
<h1>Lena 1er</h1>
<h2 class="subdo">@Lena1er</h2>
<div>
<div id="blocAbonnement">
<div>
<div class="nombre">10k</div>
<div class="texteNombre">Abonnement</div>
</div>
<div>
<div class="nombre">10k</div>
<div class="texteNombre">Abonnée</div>
</div>
</div>
</body>
</html>

@ -0,0 +1,74 @@
body{
background: green;
}
#cadrePoste{
background: white;
border-radius: 5px;
width: 40%;
margin-left: auto;
margin-right: auto;
}
/*haut du poste*/
/*
#cadreInfoPoste{
display: flex;
align-items:center;
}
#PhotoProfile{
margin: 10px 15px 0px 20px;
width: 40px;
height:40px;
border-radius: 20px;
border: 2px solid #555;
}
#NomProfile{
font-family: arial;
font-size: 18px;
}*/
#hautPoste{
display: flex;
align-items:center;
justify-content: space-between;
margin-right: 15px;
}
#cadreInfoPoste{
display: flex;
align-items:center;
}
#PhotoProfile{
margin: 10px 15px 0px 20px;
width: 40px;
height:40px;
border-radius: 20px;
border: 2px solid #555;
}
#NomProfile{
font-family: arial;
font-size: 18px;
}
/*bas poste*/
#basPoste{
display: flex;
align-items:center;
justify-content: space-between;
margin-left: 10px;
margin-right: 10px;
}
#like, #commentaire{
display: flex;
align-items:center;
}

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
<link rel="stylesheet" href="poste.css" />
</head>
<body>
<!--<div id="cadrePoste">
<div id="cadreInfoPoste">
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<h6 id="NomProfile">Lena 1er</h6>
</div>
</div>-->
<div id="cadrePoste">
<div id="hautPoste">
<div id="cadreInfoPoste">
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
<h6 id="NomProfile">Lena 1er</h6>
</div>
<div>6 jours</div>
</div>
<div id="contenuePoste">
/*utliser leakpreview*/
</div>
<div id="basPoste">
<div id="like">
<img src="coeurs.png">
<div>10k</div>
</div>
<div id="commentaire"> </>
<img src="commentaire.png">
<div>10k</div>
</div>
</div>
</div>
</body>
</html>
Loading…
Cancel
Save