a transformer en components
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
parent
a5ce114cc5
commit
4c27ccae22
@ -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>
|
Loading…
Reference in new issue