312 lines
7.9 KiB
HTML
312 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
|
<meta charset="UTF-8">
|
|
<title>BR0TCRAFT</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
src: url('/fonts/Orbitron-Black.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #120000;
|
|
color: #ffb3b3;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.header {
|
|
background-color: #330000;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-bottom: 5px solid #660000;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 2.5em;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.container {
|
|
padding-top: 80px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
perspective: 1000px;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 80%;
|
|
margin: 20px auto;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.section-title {
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
.item {
|
|
background-color: #220000;
|
|
color: #ffcccc;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.item-content img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-left: 20px;
|
|
width: calc(100% - 220px);
|
|
height: 200px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
width: 100%;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
.description {
|
|
margin-top: 20px; /* Space from the carousel */
|
|
padding: 15px;
|
|
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
|
border-radius: 10px;
|
|
border: 2px solid #660000; /* Red border */
|
|
}
|
|
.description p {
|
|
color: #ffcccc; /* Light red text color */
|
|
font-size: 1.1em;
|
|
line-height: 1.6;
|
|
}
|
|
.item-content {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px; /* Spacing around the content */
|
|
}
|
|
|
|
.item-content2 img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 25%;
|
|
width: 50%;
|
|
margin: auto;
|
|
height: auto;
|
|
max-height: calc(100% - 0px); /* Adjust image height here */
|
|
top: 5px;
|
|
object-fit: contain;/* Cover the area and maintain aspect ratio */
|
|
border-radius: 10px; /* Round all corners of the image */
|
|
}
|
|
.devvlog-item {
|
|
height: 200px;
|
|
}
|
|
.item-text {
|
|
position: absolute;
|
|
bottom: 10px; /* Space from the bottom */
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.item:hover {
|
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border: 1px solid #ff6666;
|
|
border-radius: 11px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.item:hover::before {
|
|
opacity: 1;
|
|
}
|
|
.item2 {
|
|
background-color: #220000;
|
|
color: #ffcccc;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin: 10px;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.section2 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 80%;
|
|
margin: 20px auto;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.section-title2 {
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ff6666;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
@media (max-width: 800px) {
|
|
.content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.buttons {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="/" style="text-decoration: none; color: inherit;">
|
|
<h1>BR0TCRAFT</h1>
|
|
</a>
|
|
</div>
|
|
<div class="container">
|
|
<div class="section">
|
|
<div class="section-title">Pocket Code</div>
|
|
<div class="content">
|
|
<div class="item">
|
|
<div class="item-content">
|
|
<img src="/img/developmentEnvironment/PocketCodetiny.png" alt="App 1 Image">
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<a href="https://play.google.com/store/apps/details?id=org.catrobat.catroid&hl=de&pli=1" class="button">Herunterladen</a>
|
|
<a href="https://share.catrob.at/app/user/3a747897-7a83-11eb-a92d-005056a36f47" class="button">Mein Catrobat-Acount</a>
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>Pocket Code ist eine von Catroabt programmierte Entwicklungsumgebung fürs Handy. Darin lassen sich Spiele fürs Handy am Handy entwickeln. Ich selber habe dort auch schon das ein oder andere gemacht, von denen auch ein paar Apps online zu finden sind.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section2">
|
|
<div class="section-title2">Meine Apps</div>
|
|
<a href="/" class="item devvlog-item">
|
|
<div class="item-content2">
|
|
<img src="img/Apps/Earthlarge.png" alt="App 1 Image">
|
|
<div class="item-text">Ki-Chatbot</div>
|
|
</div>
|
|
</a>
|
|
<a href="/apps/PocketCode/Tower-defense/index.html" class="item devvlog-item">
|
|
<div class="item-content2">
|
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
|
|
<div class="item-text">Tower defense (Beta)</div>
|
|
</div>
|
|
</a>
|
|
<a href="/apps/PocketCode/auto-clicker/index.html" class="item devvlog-item">
|
|
<div class="item-content2">
|
|
<img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image">
|
|
<div class="item-text">auto-clicker</div>
|
|
</div>
|
|
<a href="/apps/PocketCode/Sensor-datas/index.html" class="item devvlog-item">
|
|
<div class="item-content2">
|
|
<img src="/img/Apps/PocketCode/Sensor/Sensor.png" alt="App 1 Image">
|
|
<div class="item-text">Sensor Datas</div>
|
|
</div>
|
|
</a>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|