Hallo zusammen,
ich bin neuling im Bereich Html und Css. Für einen Bekannten habe ich eine einfache Homepage erstellt. Das Problem ist das beim Verkleinern des Browsers ein Rand an der rechten Seite entsteht, und auf dem Smartphone der Background kleiner wird.
Die Seite ist unter boschtransporte.de zu finden
Kann mir vielleicht einer Helfen Bitte!
HTML CODE:
ich bin neuling im Bereich Html und Css. Für einen Bekannten habe ich eine einfache Homepage erstellt. Das Problem ist das beim Verkleinern des Browsers ein Rand an der rechten Seite entsteht, und auf dem Smartphone der Background kleiner wird.
Die Seite ist unter boschtransporte.de zu finden
Kann mir vielleicht einer Helfen Bitte!
HTML CODE:
HTML:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
<title>Bosch Transporte GmbH</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,300;1,400&display=swap');
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
$('burger').click(function(){
$('ul').toggleClass('show');
});
});
</script>
<script>
$(window).scroll(function(){
if($(window).scrollTop()){
$("nav").addClass("black");
}
else{
$("nav").removeClass("black");
}
})
</script>
<link rel="stylesheet" href="style.css">
</head>
<body style="margin: 0px;">
<header>
<nav>
<div class="logo" ><img src="logo.jpg" alt="Bosch Transporte">
</div>
<ul class="navbar">
<li><a href="#überuns">Über uns</a></li>
<li ><a href="#fuhrpark">Fuhrpark</a></li>
<li><a href="#news">News</a></li>
<li><a href="#karriere">Karriere</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<script src="app.js"></script>
<div class="über_uns" id="überuns">
<h2>
Bosch Transporte
</h2>
<p>Wir machen Transport besser</p>
</div>
<div class="fuhrpark_content" id="fuhrpark">
<div class="boxa"><a href="img1.jpg"><img src="image\img1.jpg" width="400px" height="300px" alt="1"></a></div>
<div class="boxb"><a href="img2.jpg"><img src="image\img2.jpg" width="400px" height="300px" alt="2"></a></div>
<div class="boxc"><a href="img3.jpg"><img src="image\img3.jpg" width="400px" height="300px" alt="3"></a></div>
<div class="boxd"><a href="img4.jpg"><img src="image\img4.jpg" width="400px" height="300px" alt="4"></a></div>
<div class="boxe"><a href="img5.jpg"><img src="image\img5.jpg" width="400px" height="300px" alt="5"></a></div>
</div>
<div class="news_content" id="news">
<rssapp-wall id="LC0IX0YMDuDC4L14"></rssapp-wall><script src="https://widget.rss.app/v1/wall.js" type="text/javascript" async></script>
</div>
<div class="karriere_content" id="karriere">
<div class="text-part-karriere">
<p>Momentan keine offenen Stellen</p>
</div>
</div>
<footer>
<div class="main-content">
<div class="left box">
<h2>
Impressum</h2>
<div class="content">
<div class="social">
<a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
<a href="https://instagram.com/coding.np" style="color: #8a3ab9;"><span class="fab fa-instagram"></span></a>
</div>
</div>
</div>
<div class="center box">
<h2>
Address</h2>
<div class="content">
<div class="place">
<a href="https://www.google.de/maps/place/Weilstetter+Str.+22,+72336+Balingen" style="color: black;" ><span class="fas fa-map-marker-alt"></span></a>
<span class="text">Weilstetter Straße 22, 72336 Balingen </span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+49 7433 2106989</span>
</div>
<div class="email">
<a href="mailto:[email protected]" style="color: black;"><span class="fas fa-envelope"></span></a>
<span class="text">[email protected] </span>
</div>
<div class="bottom">
<center>
<script>type="text/javascript">
document.write(new Date().getFullYear() +"|"+ "Bosch Transporte"); </script>
</center>
</div>
</div>
</div>
<div class="right box">
<h2>
Kontaktieren Sie uns</h2>
<div class="content">
<form action="#">
<div clss="email">
<div class="text">Email *</div>
<input type="email" required></div>
<div class="msg">
<div class="text">Nachricht *</div>
<textarea id=".msgForm" rows="2" cols="25" required></textarea>
<br />
<div class="btn">
<button type="submit">Senden</button>
</div>
</footer>
</body>
</html>