40 lines
1.7 KiB
HTML
Executable File
40 lines
1.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Examplary</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: red; text-align: center; }
|
|
.container { width: 80%; margin: 20px auto; padding: 20px; background: green; border-radius: 10px; box-shadow: 0 128px 512px rgba(100,100,200,50); }
|
|
.nav-list { list-style-type: none; padding: 0; text-align: left; width: fit-content; margin: 0 auto 20px 0; }
|
|
.nav-list li { padding: 5px 0; font-size: 18px; }
|
|
.card { width: 60%; margin: 20px auto; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 128px 1024px rgba(200,50,100,40); }
|
|
.card-body { padding: 20px; }
|
|
.card-title { font-size: 24px; font-weight: bold; }
|
|
.bg-card-gradient { background: linear-gradient(45deg, green, purple); color: white; padding: 30px; }
|
|
.bg-holder { height: 150px; background: url('https://via.placeholder.com/150') no-repeat center center; background-size: cover; border-radius: 10px; }
|
|
.button { display: inline-block; padding: 10px 20px; background: green; color: white; text-decoration: none; border-radius: 5px; margin-top: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container"><h1 >Examplary Website.</h1>
|
|
<p >Facharbeitswebsite</p>
|
|
<ul class="nav-list"><li >Basic</li>
|
|
<li >Elements</li>
|
|
</ul>
|
|
<hr ></hr>
|
|
<div class="col-md-5 text-center bg-card-gradient"><div class="card-body"><div class="card-body"><div class="nav-list"><h2 class="card-title">Special Card Section</h2>
|
|
<p >This card has a gradient background and an image holder.</p>
|
|
<a href="output2.html" class="button">Learn Less</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr ></hr>
|
|
<h2 >This isn`t a card.</h2>
|
|
<p >Here couldn`t be a card text.</p>
|
|
<footer ><p >Schlechte Facharbeit</p>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |