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>
|
After Width: | Height: | Size: 448 B |
After Width: | Height: | Size: 336 B |
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…
Reference in new issue