Beiträge von MagicMike

MagicMike · 14. Dezember 2020

musste es auf zwei Posts teilen

Code

*{

  margin: 0;
  padding: 0;


}






@font-face {
  font-family: Marienthal;
  src: url(Marienthal.ttf);
}

body{
  width: 100%;
  height: 100vh;
  background: url(header.jpg) no-repeat 50% 50%;
  background-attachment: fixed;
  align-items: center;
  background-size: cover;
}

.über_uns{


  position: relative;
  display: block;
  top: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255,.0);
  padding:20px;
  width: 600px;

}

.über_uns  p{


  font-family: Rubik, sans-serif;
  font-size: 40px;
  text-align: center;
  color: white;
}

.über_uns h2{
  
  font-family: Rubik, sans-serif;
  font-size: 60px;
  text-align: center;
  color:white;
}

.fuhrpark_content{
  position: relative;
  height: 700px;
  display: grid;
  width: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top:1300px;
 
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content 1fr 1fr 1fr;
align-items: center;
padding-left: 70px;

background: rgba(255, 255, 255,.0);

  
}

.fuhrpark_content img{

  transition: 1s;
  padding: 20px;

}

.fuhrpark_content img:hover{


 transform: scale(1.1);
}

.news_content{
  margin-left:60px;
  margin-right:60px;
  margin-bottom:200px;
  background: rgba(255, 255, 255,.0);
}

.karriere_content{
  margin-top: 200px;
  margin-left:60px;
  margin-right:60px;
  margin-bottom:400px;
  background: rgba(255, 255, 255,.0);

}

.text-part-karriere, .text-part p{
  width: 100%;
  font-family: Rubik, sans-serif;
  font-size: 40px;
  text-align: center;
}

.logo{

   
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
   
    }


nav{
position: fixed;
width: 100%;
height: 200px;
z-index: 1;
justify-content: space-around;
text-align: center;

}
    
nav.black {
background: rgb(94, 91, 91);

}
.navbar {

  list-style: none;
  transition: 2s;
  top: 85%;
  left: 52%;
  transform: translate(-50%, -50%);
 position: relative;
 text-decoration: none;
width: 100%;


}


nav ul li{

  display: inline;
  padding: 20px;
  letter-spacing: 3px;
  margin: auto;
  
  
}
  
.line1, .line2, .line3{

  width: 30px;
    height: 2px;
    margin: 5px;
    background-color: white;
}

  .burger {
  

    right: 5%;
    top: 12px;
    position: absolute;
    display: none;
    transition: 0.3s ease;

  }
  
  nav ul li a{

    text-decoration: none;
    color: white;
    font-size: 20px;
    font-family: Oswald, sans-serif;
 

  }


.navbar a:hover{

  border: 2px solid white;
}
 


html{
  scroll-behavior: smooth;
}

.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}


/* Footer Anfang*/


footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  
  background: rgb(94, 91, 91);
}


.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: white;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #69c204;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;

}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: white;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #69c204;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: white;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #69c204;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: white;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background:white;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height:30px;
  width: 100%;
  border: none;
  outline: none;
  background: #69c204;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: rgb(252, 25, 25);
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
 
  align-items: center;
}
.bottom center span{
  color: white;
}
.bottom center a{
  color: white;
  text-decoration: none;
}

@media screen and (max-width: 900px) {
  footer{
    margin-top:252px;
margin-bottom:5px;
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }

  .burger{
    display: block;
    cursor: pointer;
    
  }

.logo img{
width: 400px;
height: auto;

}

.über_uns  p{


  font-family: Rubik, sans-serif;
  font-size: 20px;
  text-align: center;
  color: white;
}

.über_uns h2{
  
  font-family: Rubik, sans-serif;
  font-size: 30px;
  text-align: center;
  color:white;
}

  .news_content{
    
   display: block;
  
  }

  .karriere_content{

    margin-top:252px;
margin-bottom:5px;
margin-left:50px;
margin-right:50px;
display: block;
margin: 5px;

  }

  .fuhrpark_content{

    grid-template-rows: auto;
    grid-template-columns: 10px 10px;
    display: block;
    position: relative;
  height: 1200px;
  margin-top:1400px;
  margin-bottom:-50px;
  background: rgba(255, 255, 255,.0);
  align-items: center;
  }

  .fuhrpark_content img{

    transition: 1s;
    width: 100%;
    height: auto;
    padding-right: 70px;
  }
  
  .fuhrpark_content img:hover{
  
  
   transform: scale(1.1);
  }

.navbar{
position: absolute;

height: 300px;
background-color: #333;
width: 80%;
margin-top: 220px;
transform: translate(-50%, -700px);
transition: 0.5s ease-in;

}

nav ul li a {

  display: block;
 
  letter-spacing: 1px;
  margin: 0px;
  font-size: 30px;
 
  
  
}
.navbar-active{

  
  transform: translate(-50%, -149px);

}



.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
transition: all 0.3s ease;

}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
  transition: all 0.3s ease;
}


  a:hover{

    color: coral;
    border: none;
  }
}

Alles anzeigen

MagicMike · 14. Dezember 2020

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

<!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:info@boschtransporte.de" style="color: black;"><span class="fas fa-envelope"></span></a> 
          <span class="text">info@boschtransporte.de </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 class="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>

Alles anzeigen

Beiträge von MagicMike

Beim verkleinern des Browsers entsteht ein Rand

Beim verkleinern des Browsers entsteht ein Rand