<html lang="en">
<main>
<head>
<meta charset="UTF-8">
<meta hhtp-equiv="X-UA-Compatible" content="IE:edge">
<meta name="viewport" content="width=device-width, initial-scale=1"
<link rel="stylesheet" href="css/main.css" type="text/css">
<title id="main"}>Drip Productions</title>
</head>
<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=Otomanopee+One&display=swap" rel="stylesheet">
<header id="thumbnail">
<h1>Drip Productions</h1>
</header>
<a href="https://www.webnovel.com/book/the-great-demon-system_17711949906610105"><u><b>
The Great Demon System</u></b></a>
<div class="container">
<div class="img-col">
<img class="thin-purple-border" <img id="shadow" src="https://ranobes.net/uploads/posts/2021-03/1615277712_the-great-demon-system.jpg" alt="The Great Demon System by Drip • Великая система демонов" jsname="HiaYvf" jsaction="load:XAeZkd;" class="n3VNCb" data-noaft="1" style="width: 299.25px; height: 399px; margin: 0px;" alt="The Great Demon System.">
</div>
<div class="text-col">
<header2>
<div id="shadow2" class="thin-purple-border1">
</header2>
<h3>Summary:</h3>
<p>In a world filled with abilities and superpowers, Moby Kane, a 16-year-old boy, is an orphan who is living his life with a little too much optimism, trying his best to get by.
Due to him having no ability, he had been bullied and tortured every day. However, for some odd reason, he never complained and always stayed happy no matter what. It was almost unnatural.
On one cruel day of immense pain, he realized that the world is a brutal, unforgiving place, making him regain his lost senses.
In his moment of desperation, a miracle happening
<p>[ You have unlocked the Demon System ]
Now that Moby has the power to change his cruel destiny, how will he use it to get back at the world that wronged him on the road to becoming the demon lord...
</p>
</div>
</div>
</div>
</main>
</html>
.container{
display: flex;
align-items:center:
margin-right: 10px;
}
img{
max-width: 100%
}
.img-col {
flex-basis: 600%
}
h3{
font-size: 27px
}
a {
font-size: 30px;
color: black}
<style>
#shadow {
box-shadow:0 10px 20px rgb(
32, 0, 41
), 0 6px 6px rgb(32, 0, 41);
}
.thin-purple-border {
border-color: #200029;
border-width: 3px;
border-style: solid;
}
.thin-purple-border1 {
border-color: #200029;
border-width:5px;
border-style: solid;
border-radius: 10px;
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
background-color: #663175
}
}
.thin-purple-border {
border-color: #200029;
border-width:3px;
border-style: solid;
}
p {
font-size:20px
}
h2 {
font-family:'Otomanopee One', sans-serif;
}
h3 {
text-align: center;}
p {
text-align: center;
}
body {
background-color:
#663175
;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E")
}
header {
background-color: #200029;
padding: 5px
}
h1 {
color: #7f0e9e;
text-align:center;
font-family:'Otomanopee One', sans-serif;}
#thumbnail{
box-shadow:0 10px 20px rgb(
32, 0, 41
), 0 6px 6px rgb(32, 0, 41);
}
#shadow2 {
box-shadow:0 10px 20px rgb(
32, 0, 41
), 0 6px 6px rgb(0,0,0,0.23);
}
#shadow {
box-shadow:0 10px 20px rgb(
32, 0, 41
), 0 6px 6px rgb(32, 0, 41);
}
</style> // !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
o.assert.isNotNull(document.getElementById("main")),Object(o.assert)(document.querySelectorAll("#main div, #main figure, #main section, #main a, #main h1, #main img").length,'element with id="main" must contain other elements')
External CSS
This Pen doesn't use any external CSS resources.