Greetings, I have a question that may seem amateurish, but I am facing some difficulties.
Below is the CSS code I am using:
body{
background-image: url(street-photography1.jpg);
background-size: cover;
color: white;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
}
form{
background-color: rgba(19, 18, 18, 0.66);
color: white;
padding: 40px;
margin-top: 200px;
padding-bottom: 60px;
}
.form-control{
background-color: rgba(14, 14, 14, 0.35);
border-radius: 0px;
color: white;
}
.logo1{
padding: 40px;
margin-top: 200px;
}
h1{
text-align: center;
}
.btn{
width: 100%;
margin-top: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="container">
<div class="column">
<div class=" col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
</div>
<div class="row">
<div class="col-sm-offset-6 col-sm-7">
<form>
<h1>Hello, world!</h1>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Password
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<footer class="container">
<div class="row">
<p class="col-sm-5">
Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
</body>
</html>My current webpage can be viewed here.
Any suggestions on how I can align my message logo to be in the same line as the validation form?