Guten Tag,
Möchte gerne einen "PEN" von Codepen.io auf meiner Webseite integrieren. (LINK zum "Pen" <a href="https://codepen.io/Unna/pen/WQoVWr">https://codepen.io/Unna/pen/WQoVWr</a> ) Der "PEN" ist ein animierter Hintergrund und besteht aus HTML, CSS sowie JAVA. Für meine Webseite habe ich bereits eine Ordnerstruktur erstellt und somit Html, CSS und JAVA getrennt. In einem Post hier habe ich schon gelesen dass man hierfür die Settings im oberen rechten Rand nutzen sollte. Wenn Ihr mir es bitte nocheinmal ausführlich erklären könntet wäre ich euch sehr dankbar. Gerne auch mit Video. Vielen Dank im vorraus.
Code
<html>
<head>
<style>
body {
overflow: auto;
height: 1000px;
background: black;
display: flex;
flex-direction: column;
}
article{
flex:1;
height:50vh;
width:80vw;
margin:30px auto;
border:2px solid red;
text-align:center;
}
h1,h2,h4{
color:white;
text-align:center;
}
h2 a{
color:green;
}
h2 a:hover{
color:red;
}
textarea{
width:80%;
margin:0 auto;
min-height:100px;
}
</style>
</head>
<body>
<h1> Wie man Codepen einbinden kann</h1>
<article>
<h1>Möglichkeit 1 </h1>
<div>
<p class="codepen" data-theme-id="dark" data-default-tab="js,result" data-user="Unna" data-slug-hash="WQoVWr" style="height: 345px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic points - base">
<span>See the Pen <a href="https://codepen.io/Unna/pen/WQoVWr">
Dynamic points - base</a> by Gauthier Ressel (<a href="https://codepen.io/Unna">@Unna</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<br>
<h4>Code zum einbinden</h4>
<textarea><p class="codepen" data-theme-id="dark" data-default-tab="js,result" data-user="Unna" data-slug-hash="WQoVWr" style="height: 345px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic points - base">
<span>See the Pen <a href="https://codepen.io/Unna/pen/WQoVWr">
Dynamic points - base</a> by Gauthier Ressel (<a href="https://codepen.io/Unna">@Unna</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>