<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<style>
body > * {
font-family: sans-serif;
box-sizing: border-box;
}
#comments {
width: 500px;
display: flex;
flex-flow: column;
margin: auto;
background: darkgrey;
padding: 5px;
border-radius: 5px;
}
#comments > .comment {
width: calc(100% - 14px);
display: flex;
flex-flow: column;
margin-bottom: 5px;
padding: 5px;
border-radius: 5px;
}
#comments > .comment.blue {
border: 2px solid lightcyan;
}
#comments > .comment.pink {
border: 2px solid lightpink;
}
#comments > .comment > .comment-top {
display: flex;
flex-flow: row;
}
#comments > .comment > .comment-top > .count {
margin: 0 5px;
}
#comments > .comment > .comment-bottom {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
}
#comments > .comment > .comment-bottom > .comment-title {
font-weight: bold;
text-decoration: underline;
}
#comments > .comment > .comment-bottom > .comment-text {
background: white;
margin-top: 5px;
padding: 5px;
border-radius: 5px;
width: calc(100% - 10px);
}
#new-comment {
display: flex;
flex-flow: column;
align-items: flex-end;
width: 500px;
margin: auto;
}
#new-comment > .input-group {
display: flex;
flex-flow: column;
justify-content: flex-start;
width: 100%;
}
</style>
<body>
<div id="comments"></div>
<div id="input-container">
<form id="new-comment">
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" required validation-message="name is required" />
</div>
<div class="input-group">
<label for="name">Comment</label>
<textarea type="text" id="comment" required validation-message="comment is required" ></textarea>
</div>
<button type="button" id="add-comment-button">Add</button>
</form>
<span id="error"></span>
</div>
<script src='./index.js'></script>
</body>
</html>