I am using Bootstrap 4 and have some issues. I have the following issues:
- Center the input-fiels (inline)
- space between these inputs
- add a larg textarea under the input-fiels
This is what it looks like currently:
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zenuni Company</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="form-inline">
<div class="form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Here is my CSS code
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html{
height: 100%;
}
#content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0,0,0,0.2);
}
input.transparent-input{
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; } /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
.no-padding {
padding-right: 50px;
padding-bottom: 10px;
}
I would appreciate your help!
Aucun commentaire:
Enregistrer un commentaire