Je cherche à faire une page de "sujet/topic" similaire à OC. Quelque chose de simple et propre avec bootstrap 4.
Comment je pourrais améliorer mon code? (par exemple le hover sur media-heading ne rends pas très bien)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conversation name</title>
<meta name="viewport" content="width=device-width">
<!--<link rel="icon" type="image/png" href="http://www.favicon.cc/logo3d/430212.png"/>-->
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<%@include file="shared/resources.jsp"%>
<style type="text/css">
.container {
margin-top: 3%;
padding-top: 1%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.jumbotron:hover {
background-color: black;
color: white;
}
.media:hover {
background-color: lightgray;
color: white;
}
.else-bloc {
padding-top: 3%;
margin: auto;
width: 1000px;
background-color: white;
}
</style>
</head>
<body>
<div id="header">
<%@include file="shared/header.jsp"%>
</div>
<div class="container bg-light">
<div class="messages-bloc">
<div class="page-header text-muted">
<h3>Example page header <small class="text-body">(Subtext for header)</small></h3>
</div>
<div class="jumbotron">
<h1>Main message</h1>
<p>
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
</p>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://www.phplivesupport.com/pics/icons/avatars/public/avatar_53.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading text-body">Media heading</h4>
<p>
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis
risus.
</p>
</div>
</div>
</div>
<!--
<div id="footer">
<%--@include file="shared/footer.jsp"--%>
</div>
-->
</div>
<div class="else-bloc">
<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<form id="comment__form">
<textarea id="comment__textarea" placeholder="Join the discussion…" cols="30" rows="4" maxlength="132"></textarea>
<br>
<button type="button" class="btn btn-secondary btn-lg">Answer</button>
</form>
</div>
</div>
</body>
</html>
Merci d'avance!
Page similaire à OC
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
