Frage
Mit Bildern
wie kann man das beheben?
sidebar.css.sidebar {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
background-color: #333;
transition: right 0.3s ease;
}
.sidebar-open {
right: 0;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
}
.sidebar li {
float: left;
}
.sidebar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.sidebar li a:hover {
background-color: #111;
}
private.php
<?php
session_start();
if(!isset($_SESSION["username"])){
header("Location: index.php");
exit;
}
$username = $_SESSION["username"];
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import Styles -->
<link rel="stylesheet" href="cnd/css/loader.css">
<link rel="stylesheet" href="cnd/css/container.css">
<link rel="stylesheet" href="cnd/css/color-changer.css">
<link rel="stylesheet" href="cnd/css/background.css">
<link rel="stylesheet" href="cnd/css/navbar.css">
<link rel="stylesheet" href="cnd/css/sidebar.css">
<title>Your Personal Site</title>
<!-- import scripts -->
<script src="cnd/js/sidebar.js"></script>
<script src="cnd/js/loader.js"></script>
<script>
const imageFiles = [
'baldur.jpg',
'baldur2.jpg',
'baldur3.jpg',
];
function setRandomImage() {
const randomIndex = Math.floor(Math.random() * imageFiles.length);
const randomImage = imageFiles[randomIndex];
const imgElement = document.querySelector('.random-img');
imgElement.src = `/personal-site/images/${randomImage}`;
}
</script>
<script>
function setColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<div class="loader"></div>
<div class="container">
<h1>Hallo <?php echo $username?></h1>
<img src="" alt="random image of my dog" width="900px" height="900px" class="random-img">
<script>
setRandomImage();
</script>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</div>
<div class="dropdown">
<span>Change Color</span>
<div class="dropdown-content">
<div class="color-changer">
<button onclick="setColor('green')" class="button-green">Green</button>
<button onclick="setColor('red')" class="button-red">Red</button>
<button onclick="setColor('blue')" class="button-blue">Blue</button>
</div>
</div>
</div>
<div class="navbar">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="games.php">Games</a>
</li>
<li class="account-dropdown">
<a href="">Account
</li>
</ul>
</div>
<div class="sidebar" id="sidebar">
<ul>
<li>
<a href="">Home</a><br>
</li>
<li>
<a href="">Pricing</a><br>
</li>
<li>
<a href="">Settings</a><br>
</li>
</ul>
</div>
</body>
</html>
Homepage,
HTML,
Webseite,
CSS,
JavaScript,
HTML5,
Code,
PHP,
Programmiersprache,
Webdesign,
Webentwicklung,
Frontend,
Visual Studio Code
