0
Website I'm buildingPosition von Divs in CSS/HTML
Hallo, ich frage mich, ob jemand könnte mir das Layout in dieser Fotografie erreichen helfen? Ich versuche, diese Website zu erstellen, und mein aktueller Fortschritt ist frustrierend. Ich habe das grundlegende Layout erstellt, aber es funktioniert nicht richtig.
Ich bin mir nicht sicher, wie Sie den Inhalt so positionieren, dass er zu diesem Bild passt. Wenn mir jemand in die Schreibrichtung zeigen könnte, wäre das toll.
<body>
<div>
<div>
<div>
<div>
<h3>LOGO</h3>
</div>
<div>
<hr>
<h2>Console</h2>
</div>
<div class="form">
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<a href="#forgot">Forgot your password?</a>
<button type="submit">Log in</button>
</form>
</div>
<div class="images">
<a id="firstPostLink" target="_blank">
<div class="box" id="firstPostImg">
</div>
</a>
<a id="secondPostURL" target="_blank">
<div class="box" id="secondPostImg">
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
Heres die CSS`body { background-color: # 13253F; Farbe: weiß; }
a {
text-decoration: none;
color: white;
}
hr {
border: solid #6cc1d6;
border-width: 5px 5px 5px 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 160px;
position: relative;
left: 100px;
}
h3 {
text-align: center;
}
h2 {
margin-left: 100px;
margin-top: -15px;
}
label {
color: #f0f0f0;
}
.form {
padding: 20px;
margin: 0 auto;
position:relative
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 600px;
height: 600px;
border:2px solid white;
}
.images {
position:absolute;
left:200px;
height:100%;
}
#firstPostImg {
position:relative;
left:1100px;
top:-300px;
}
#secondPostImg{
position:relative;
left:1100px;
top:-300px;
padding-bottom:0;
}`
Hier ist der Link zum codepen
Sie müssen einige der CSS schreiben Sie das Layout, um zu versuchen verwenden zu tun – VikingBlooded
sich dieser in der Codepen Link, aber ich werde den Code auch hinzufügen – Martin
Darüber hinaus müssen Sie so viel wie möglich versuchen, damit es funktioniert. Wir helfen Ihnen bei der Korrektur bestimmter Teile, aber wir schreiben Ihnen keinen Code. – VikingBlooded