Położenia elementów

0

Słuchajcie mam problem :) :(

Siedziałem nad tym 3 godziny i nie zrobiłem, pomimo 40 stron poradników.

Poddaje się, ale o co chodzi.

Jak elementy takie jak label login i haslo oraz przycisk submit ustawić na gorze strony na czarnym divie po prawej stronie przypiete do dolnego marginesu

ogolnie zarys ma byc taki elementy i pozniej menu maja na stale byc w wyznaczonych miejscach, jednak ze przy rozszerzaniu strony maxymalizowaniu elementy te maja rozszerzac sie
![title ](dsa.png)
dsa.png
https://zapodaj.net/9105476243c29.png.html>dsa.png

HTML

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Simple Work Management</title>
        <meta name="description" content="Interactive web site">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="screen.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
         <div class="box">
            <a href="index.html"> <img src="gallery/blacCat.jpg" alt="Cat logo" style="float:left"/></a>
             
            <p id="fName">Koty Code</p>
             
             <button type="submit" class="btn btn-primary">Sign in</button>
            <form class="form-inline">
                <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" placeholder="Enter email">
    </div>
                
                <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" placeholder="Password">
    </div>   
                
            </form>
        </div>
             
    </body>
</html>
@font-face {
    font-family: kernel1;
    src: url(font/kernel1.ttf);
}
body {
  background:#353a40;
}

.box {
    float: left;
    border: solid 0px;
    min-width: 700px;
    width: 100%;
    height: 230px;
    background-color: black;
    color: white;
    font-weight: bold;
}
img {
    margin: 0px;
    max-height: 100%;
    max-width: 100%;
}
#fName {
    font-family: kernel1;
    float: left;
    margin: 20px;
    padding: 1px;
    font-size: 50px;
    color: white;
}
.form-group {
    float: inherit;
    margin: 1px;
    padding: 1px;
    overflow: visible;
    
}
.form-control {
}
.btn-primary {
    min-width: 20px;
    float: left;
}
1

a czemu nie korzystasz z grida bootstrapa? dodatkowo wpisujesz jakieś klasy w div, zamiast w plik css
nie ma "width=device-width, initial-scale=1"
tworzysz class="row" i w nim dajesz background tego kota, potem tworzysz odpowiednie div z zawartością czyli panel logowania czy co tam chcesz, a wielkośc na poszczególnych rozdzielczościach ustalasz zgodnie z gridem bootstrap, musisz doczytać dude;

1 użytkowników online, w tym zalogowanych: 0, gości: 1