Open alnopa9 opened 4 years ago
I am not a collaborator, so I cannot push this code to the repo.
html, body{ margin: 0; padding: 0; } body{ font-size: 16px; display: flex; flex-direction: column; overflow: hidden; } .top{ display: flex; width: 100vw; height: auto; background-color: black; } .half{ display: flex; height: 100vh; width: 50vw; flex-direction: column; justify-content: center; align-self: flex-end; } .half img{ width: auto; height: 30vh; padding: 5%; } #left img{ height: 50vh; width: auto; } #left { justify-content: center; align-items: center; background-color: black; } #right { justify-content: center; align-items: center; background-color: #BBBBBB; height: 100%; } h1{ text-align: center; color: teal; } #right img{ height: 25vh; width: auto; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { 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); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE html> <html> <head> <title>Shuttle Launch History</title> <link rel="stylesheet" href="rocketstyle.css"/> </head> <body> <div class="top" id="top"> <!-- SSI line below --> <!--#include virtual="top.html" --> </div> <div> <div class="half" id="left"> <img src="images/halfshuttle.png" alt="Half Built Shuttle"/> </div> <div class="half" id="right"> </div> </div> </body> </html>
I am not a collaborator, so I cannot push this code to the repo.
CSS
HTML