We Keep Coding

How to make useable delete button to delete comments

I will like to know how to make my delete button work it has the id's of the comments and i just need to know how to get the button to delete the comments.I would also like to make it so the user can only delete there comment not other users i would also like to know how to put a date on a comments.
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
const Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(Comment){
if (comment.id === idToDelete){
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rahim reviews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

This works, changed render(), deleteComment() and const -> let Comments
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
let Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime().toString();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(comment){
if (comment.id === idToDelete){
document.getElementById(comment.id).style.display = "none"
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
element.setAttribute("id", comment.id);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rahim reviews</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

Insert/Append single child element to multiple parent elements with vanilla javascript

I have 5 div's with the class .faq, how to append a new child element at the end of each divs
This is what i have so far:
const faqBoxes = document.querySelectorAll('.faq')
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
faqBoxes.forEach(box => {
// box.insertAdjacentHTML('beforeend', toggler)
-- returned [object HTMLElement]
// box.appendChild(toggler)
-- but this appends the new element only on the last div
})
i am adding only a single div, instead of 5 for the sake of simplicity
HTML(before inserting element):
<div class="faq">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
HTML(After inserting element):
<div class="faq">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
<i class="toggler fas fa-chevron-down></i> <!-- new element-->
</div>
const faqContainer = document.querySelector('.faq-box')
const faqBoxes = document.querySelectorAll('.faq')
const displayIcons = () => {
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
faqBoxes.forEach(box => {
// box.insertAdjacentHTML('beforeend', toggler)
box.appendChild(toggler)
})
}
window.addEventListener('DOMContentLoaded', displayIcons)
const showFaqContent = event => {
if (event.target.classList.contains('toggler') || event.target.classList.contains('faq-title')) {
const parentElem = event.target.parentElement
parentElem.classList.add('active')
}
}
faqContainer.addEventListener('click', showFaqContent)
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'poppins';
background: #ECE9E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFFFFF, #ECE9E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.main-container {
height: 100%;
width: 90%;
}
.main-container h1 {
position: relative;
color: rgb(54, 94, 128);
}
.main-container h1 i {
font-size: 1.5rem;
}
.main-container h1::before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
background-color: rgba(70, 131, 180, 0.507);
}
.main-container h1::after {
content: '';
position: absolute;
width: 25%;
height: 3px;
bottom: 0px;
left: 0;
background-color: rgb(70, 131, 180);
}
.faq-box {
background-color: #fff;
border-radius: 8px;
box-shadow: 4px 4px 8px hsl(0, 0%, 80%);
}
.faq {
position: relative;
padding: .8rem 1rem;
margin: .5rem;
border-bottom: .5px solid rgba(221, 221, 221, 0.829);
}
.faq-title {
color: steelblue;
font-weight: 400;
cursor: pointer;
}
.faq.active h3 {
font-weight: bold;
}
.faq-content {
display: none;
font-family: 'nunito', 'sans-serif';
background-color: rgb(235, 235, 235);
border-radius: 5px;
border-left: 5px solid rgb(54, 94, 128);
margin-top: 10px;
padding: 1rem;
font-size: .9rem;
color: hsl(208, 41%, 20%);
transition: display .4s ease-in;
}
.faq.active .faq-content {
display: block;
}
.faq .toggler {
position: absolute;
top: 1.25rem;
right: 1rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day-12 Faq Boxes</title>
<!-- google api/fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300;400;600;700&display=swap" rel="stylesheet">
<!-- custom css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="main-container">
<h1><i class="fas fa-info-circle"></i> FAQ</h1>
<div class="faq-box hide">
<div class="faq active">
<h3 class="faq-title">How many team members can i invite?</h3>
<p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
</div>
<div class="faq">
<h3 class="faq-title">What is the maximux file upload size?</h3>
<p class="faq-content">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="faq">
<h3 class="faq-title">How do i reset my password?</h3>
<p class="faq-content">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
</div>
<div class="faq">
<h3 class="faq-title">Can i cancel my subscription?</h3>
<p class="faq-content">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="faq">
<h3 class="faq-title">Do you provide any additional support?</h3>
<p class="faq-content">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
<!-- fontawesome script -->
<script src="https://kit.fontawesome.com/39350fd9df.js"></script>
<!-- Custom Javascript -->
<script src="main.js" type="text/javascript"></script>
</body>

Add your createElement code to your loop so you create one new element on each iteration.
const faqBoxes = document.querySelectorAll('.faq');
faqBoxes.forEach(box => {
const toggler = document.createElement('i');
toggler.textContent = 'Hallo';
toggler.className = 'red';
box.appendChild(toggler);
});
.red { color: red; }
<div class="faq" />
<div class="faq" />
<div class="faq" />

Make two textareas side by side sharing a flexible border

I want to make two textareas side by side, which share a same border. Then we could drag the border and change their width, while keeping the sum of their widths constant. In other words, it is like the panels inside JSBin.
Does anyone know how to realise this?
PS: here is the code to make two stationary textareas side by side:
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<textarea name="t1"></textarea>
<textarea name="t2"></textarea>
</body>
</html>
Edit 1: the following code is from index.html of JSBin. But I don't see how it manages to realise the sharing border:
<div id="panelswaiting">
<div class="code stretch html panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong>Processor</strong></span><div class="dropdown" id="htmlprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html">
<a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a>
<a role="menuitemradio" href="#markdown">Markdown</a>
<a role="menuitemradio" href="#jade">Jade</a>
Convert to HTML
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
</div>
</div>
<div class="code stretch javascript panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span>
<div class="dropdown" id="javascriptprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript">
<a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a>
<a role="menuitemradio" href="#babel">ES6 / Babel</a>
<a role="menuitemradio" href="#jsx">JSX (React)</a>
<a role="menuitemradio" href="#coffeescript">CoffeeScript</a>
<a role="menuitemradio" href="#traceur">Traceur</a>
<a role="menuitemradio" href="#typescript">TypeScript</a>
<a role="menuitemradio" href="#processing">Processing</a>
<a role="menuitemradio" href="#livescript">LiveScript</a>
<a role="menuitemradio" href="#clojurescript">ClojureScript</a>
<a role="menuitem" href="#convert">Convert to JavaScript</a>
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
</div>
</div>
...
</div>
Edit 2:
Following the answer of Ankit vadariya, I have made a minimum case... There is only one thing left: how to ensure the min-width of .panel-right? It does not seem to work at the moment...
One way is to set max-width of .panel-left, but if we look at JSBin, there is no limit of max-width for each panel, whereas there is min-width...

Here is the your solution
Hope it will work for you.
Code
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
CSS
html,
body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.page-container {
margin: 20px;
}
/* horizontal panel*/
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
/* avoid browser level touch actions */
xtouch-action: none;
}
.panel-left {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
/* vertical panel */
.panel-container-vertical {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid silver;
overflow: hidden;
}
.panel-top {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
height: 150px;
width: 100%;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter-horizontal {
flex: 0 0 auto;
height: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
cursor: row-resize;
}
.panel-bottom {
flex: 1 1 auto;
/* resizable */
padding: 10px;
min-height: 200px;
background: #eee;
}
label {
font-size: 1.2em;
display: block;
font-weight: bold;
margin: 30px 0 10px;
}
pre {
margin: 20px;
padding: 10px;
background: #eee;
border: 1px solid silver;
border-radius: 4px;
overflow: auto;
}
HTML
<html>
<head>
<title>Simple Split Panels - jquery-resizable</title>
<meta charset="utf-8"/>
</head>
<body style="">
<div class="page-container">
<h1>
jquery-resizable - A simple splitter panel
</h1>
<hr />
<p>
Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in.
Note that Flexbox is not required, but used here to keep the layout simple.
</p>
<label>Horizontal Splitter Panes:</label>
<div class="panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
<label>Vertical Splitter Panes:</label>
<div class="panel-container-vertical">
<div class="panel-top">
top panel
</div>
<div class="splitter-horizontal">
</div>
<div class="panel-bottom">
bottom panel
</div>
</div>
<hr />
<p>
This example creates two resizables for the horizontal and vertical splitter panes:
</p>
<pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../src/jquery-resizable.js"></script>
<script>
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
</script>
</pre>
</div>
</body>
</html>

The only way I can see to do this is using something like JavaScript and analyzing in real-time the width of one to get the other to add to 100%.

Set height of p element based on content inside it

I have a notification panel where I show the last notification. But the content of the notification depends on what the notification pushes. So this can vary from a very short message to a longer one. The short message are shown perfectly but the longer once are not shown correctly now I wrote it like this to look better:
And this is the HTML where I am talking about:
<div data-role="content" class="ui-content">
<ul data-role="listview">
<li id="notification-block">
<img class="notification_bell" src="img/icons/alert.png">
<div class="notification-wrapper">
<h2 class="notification-header"></h2>
<p class="notification-message"></p>
<p class="read-more">
<a href="#all" style="text-decoration: none" data-transition="slide">
Meer <span class="fa fa-angle-right carot"></span>
</a>
</p>
</div>
</li>
</ul>
</div>
And this is how I set the content of the notification message dynamically:
$(".notification-header").append(title);
$(".notification-message").append(message).first("p");
As you see in the Fiddle it will have overflow hidden en elipsis. But What I want is that it changes the height and break the line to read it all.
Here is recreated FIDDLE

Change height: 150px to min-height: 150px for #notification-block and reset the white-space property for notification-message:
#notification-block .notification-message {
white-space:normal;
}
Updated fiddle: http://jsfiddle.net/84ps035L/

Please see my fiddle.
I kept notifications height of constant 150px. Notification messages can contain up to 3 lines of text, always kept aligned vertically to middle:
.notification-block {
display: table;
width: 100%;
}
.notification-wrapper {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
If there are more lines, the rest of notification message is truncated and replaced with ellipsis.
.notification-message {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
font-size: 13px;
line-height: 19px;
max-height: 57px; /* 3 lines of height 19 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
There are also some additional fixes to override jquery-mobile default styling.

add this class to your css file:
.notification-message{
white-space: normal !important;
overflow: visible !important;
word-break: break-word;
}
Fiddle

.notification-wrapper {
position: relative;
left: -10px;
font-size: 17px;
line-height: 1.47;
letter-spacing: 0.6px;
}
#notification-block {
height: 150px;
border-radius: 5px;
margin: 60px 10px 5px 10px;
background-color: #ffffff;
}
#notification-block h2 {
margin-top: 45px;
}
#notification-block img {
margin-top: 50px;
}
.notification-message {
white-space: normal !important;
}
.read-more,
.read-more a {
float: right;
font-weight: bold !important;
font-size: 16px !important;
color: black !important;
text-decoration: none !important;
}
<!DOCTYPE html>
<html>
<head>
<title>JQM latest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
</head>
<body>
<div data-role="content" class="ui-content">
<ul data-role="listview">
<li id="notification-block">
<img class="notification_bell" src="https://cdn1.iconfinder.com/data/icons/trycons/32/bell-512.png">
<div class="notification-wrapper">
<h2 class="notification-header">Gate update</h2>
<p class="notification-message">This is a very long message and will not shown properly because this is way to long for the wrapper</p>
<p class="read-more">
<a href="#all" style="text-decoration: none" data-transition="slide">
Meer <span class="fa fa-angle-right carot"></span>
</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>

Align and centre divs

I am making a web page. I am trying to centre and align my divs properly (the animated company logos).
I need them to sit next to each other instead of on top of each other, with spacing in between to fit the page.
This might make things more clear:
Here is my code:
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/CSS" href="Style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="container">
<h1>
My Interactive Webpage
</h1>
<h1>
Career Page
</h1>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Information</li>
<li>Games</li>
<li>Career</li>
</ul>
</header>
<div id="container">
<head>
<center>
<p><font face="verdana" color="green">Welcome to my Career Page!
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for. Please click the text to be taken to the respective homepage of each company.
</font></p>
</center>
</div>
<div class="tilt pic">
<style>
#rcorners3 {
border-radius: 25px;
background: url(http://i.imgur.com/AkIPWeF.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
<div class="tilt pic">
<style>
#rcorners2 {
border-radius: 25px;
background: url(http://i.imgur.com/Mouf1lw.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
<!DOCTYPE html>
<html>
<head>
<div class="tilt pic">
<style>
#rcorners4 {
border-radius: 25px;
background: url(http://i.imgur.com/pFeIHdd.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</body>
</html>
</body>
</html>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>

As others have mentioned there is a lot of unnecessary repetition in your code that can be cleaned up but to answer your question I'd suggest using a table, specifically a table row with its width set to 100% to format your images how you want them like so:
<table style="width: 100%;">
<tr>
<td>
<div class="tilt pic">
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
</td>
<td>
<div class="tilt pic">
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</td>
And lastly in order to center your images within their respective cells you need to add the following to each of their ids:
#rcorners3 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners2 {
margin-left:auto;
margin-right:auto;
...
}
#rcorners4 {
margin-left:auto;
margin-right:auto;
...
}
This makes ensures that the spacing on each side of the element is equal regardless of how much space is actually available.
See working example - http://jsfiddle.net/ddwqkm5t/1/

As mentioned already there are a lot of errors, I really tried to go through it, but it actually would take quite a while...
Here is an first attempt of removing some errors: https://jsfiddle.net/6qfq1c7g/
However, you should not use this code since there are still many mistakes.
Please consider to read something about classes and the html basic structure which should be something like http://www.w3schools.com/html/html_intro.asp
Do not use <html> or <head> or <body> twice.
You can of course use <style> tags within your html but you should at least put them all together so you are not switching between html and css all the time. Best practice would be creating a separate file for your css as you already implement in your head (style.css).
Use classes for same elements. Your "company" elements are basically all the same, so you should do something like
.company {
border: 1px solid #333;
border-radius: 5px;
// and so on ....
}
For the background then you can use specific ids or even classes again
.blizzard {
background-color: url('blizzard.jpg');
}
.ubisoft {
background-color: url('ubisoft.jpg');
}
This will clean up your code a lot.
Actual response:
To align your 3 elements every element needs the css style
display: inline-block;
I also recommend to give
vertical-align: top;
so that everything is aligned on the same height. To center it then again you should add
margin: 0 auto;
And the outer wrapping element should have
text-align: center;

you can try this one:
<html>
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/CSS" href="Style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="container">
<h1>
My Interactive Webpage
</h1>
<h1>
Career Page
</h1>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Information</li>
<li>Games</li>
<li>Career</li>
</ul>
</header>
<div id="container">
<head>
<center>
<p><font face="verdana" color="green">Welcome to my Career Page!
I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
Below are some of the companies I would dream of working for. Please click the text to be taken to the respective homepage of each company.
</font></p>
</center>
</div>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners3 {
border-radius: 25px;
background: url(http://i.imgur.com/AkIPWeF.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://eu.blizzard.com/en-gb/">
<font color="white"><p id="rcorners3">BLIZZARD ENTERTAINMENT</p></font>
</a>
</div>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners2 {
border-radius: 25px;
background: url(http://i.imgur.com/Mouf1lw.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="http://www.naughtydog.com/"> <font color="white"><p id="rcorners2">NAUGHTY DOG</p></font>
</a>
</div>
<!DOCTYPE html>
<html>
<head>
<div class="tilt pic" style="float:left; padding:10px;">
<style>
#rcorners4 {
border-radius: 25px;
background: url(http://i.imgur.com/pFeIHdd.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<a href="https://www.ubisoft.com/en-GB/">
<font color="white"><p id="rcorners4">UBISOFT</p></font>
</a>
</div>
</body>
</html>
</body>
</html>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>