Neuling1 Posted November 17, 2019 Report Share Posted November 17, 2019 Hello, the full green Website is mine. I want it to look like the second image. How can I do it? I am a begginer and don't really know much about HTML and CSS, so can someone help me? This is my code: <!doctype html> <html lang="de"> <head> <title>myCarsharing</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="description" content="Die offizielle Website von myCarsharing. Wenn Sie auf der Suche nach einem vertrauenswerten Autoverleih sind, dann sind Sie bei uns genau richtig."> <meta name="keywords" content="Autos, PKW, Autoverleih, Verleih, Carsharing"> <meta name="language" content="de"> <meta name="author" content="Zeeshan Tahir"> <meta name="date" content="2019-11-10T14:20:33+02:00"> <meta name="robots" content="index,follow"> <meta name="audience" content="alle"> <meta name="page-topic" content="Autoverleih"> <meta name="revisit-after" content="7 days"> <meta name="expires" content="0"> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="default.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">myCarsharing</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul id="nav1" class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-tem dropdown"> <a class="nav-link dropdown-toggle" href="ueberUns.html" id="navbarDropdown" role="button" data-toggle="dropdown">Über uns</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="ueberUns.html">Unternehmensgeschichte</a> <a class="dropdown-item" href="ueberUns.html">Idee und Angebot</a> <a class="dropdown-item" href="ueberUns.html">Fahrzeugstandorte</a> <a class="dropdown-item" href="ueberUns.html">Fahrzeugstandorte</a> <a class="dropdown-item" href="ueberUns.html">Ihre Vorteile</a> <a class="dropdown-item" href="ueberUns.html">Unsere Partner</a> <a class="dropdown-item" href="ueberUns.html">Rezessionen</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="fakten.html">Fakten</a> </div> </li> <li class="nav-item"><a class="nav-link" href="preise.html">Preise</a></li> <li class="nav-item"><a class="nav-link" href="reservierung.html">Reservierung</a></li> <li class="nav-item"><a class="nav-link" href="rstellplaetze.html">Stellplätze</a></li> <li class="nav-item"><a class="nav-link" href="allerlei.html">Allerlei</a></li> </ul> <ul id="nav2" class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="suche.html"><i class="fa fa-search"></i>Suche</a></li> <li class="nav-item"><a class="nav-link" href="meinKonto.html"><i class="fa fa-user"></i>mein Konto</a></li> <li class="nav-item"><a class="nav-link" href="kontakt.html"><i class="fa fa-envelope"></i>Kontakt</a></li> </ul> </div> </nav> <!--Headerbereich--> <header class="p-2 text-center"> <img src="img/myCarsharing.png" width="750" height="350" alt="Logo"> </header> <!--Hauptbereich--> <main> <div class="container"> <div class="container-1"> <div class="video"> <video controls muted src="https://www.dropbox.com/s/s53lgpfv4tn3w0c/emd20130902_carsharing_sd_dwdownload.mp4?raw=1"> Your browser does not support the video tag. </video> </div> <div class="image"> <img src="img/index bild.gif" width="530" height="360" alt="Gif von fahrendem Auto"> </div> </div> <div class="container-2"> <div class="box-1"> <article> <p>Loremx ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> </article> <article> <li>28.01.2020 Fahrraddemo</li> <li>15.02.2020 Mitgliedsversammlung</li> <li>23.03.2020 Arbeitskreistreffen</li> <li>01.05.2020 Wandertag</li> </article> <article> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p> </article> </div> <div class="box-2"> <audio controls src="Drive-off-squealing-tires.mp3"> Your browser does not support the audio tag. </audio> <a href="https://carsharing.de/">Bundesverband Carsharing</a> <div class="social_btn"> <div class="btn-twitter"> <button type="button" class="btn btn-lg btn-tw"><i class="fab fa-twitter pr-1"></i> Twitter</button> </div> <div class="btn-google-plus"> <button type="button" class="btn btn-lg btn-gplus"><i class="fab fa-google-plus-g pr-1"></i> Google +</button> </div> <div class="btn-facebook"> <button type="button" class="btn btn-lg btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button> </div> </div> </div> </div> </div> </main> <!--Footerbereich--> <footer class="p-2"> <nav id="nav3"> ©2019 | <a href="impressum.html">Impressum</a> | <a href="agb.html">AGBs</a> | <a href="datenschutz.html">Datenschutz</a> </nav> </footer> </div> </body> </html> And this is my CSS file: .container-1 { display: flex; flex-wrap: wrap; } .video { width: 50%; } .image { width: 50%; } .container-2 { display: flex; flex-wrap: wrap; } .box-1 { flex: 4; } .box-2 { flex: 1; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.