I attempted to replicate a form that contains a vertical line
<span class="vertical-line">or</span>this form?
I considered using hr but it generates a horizontal line instead of a vertical one. Maybe if we apply some CSS to rotate it, but I'm unsure of the best approach.
Here's what I have experimented with so far:
* {
box-sizing: border-box;
}
header {
background-color: rgb(147, 88, 134);
width: 100%;
height: 65px;
}
.tit2 {
float: right;
color: white;
margin-right: 70px;
font-size: 20px;
padding: 7px;
margin-top: 10px;
}
.tit1 {
float: left;
color: white;
font-weight: bold;
font-size: 25px;
margin-left: 100px;
margin-top: 10px;
}
.goo {
background-color: red;
color: white;
width: 200px;
height: 50px;
}
.face {
background-color: rgb(27, 122, 255);
color: white;
width: 200px;
height: 50px;
}
.git {
background-color: black;
color: white;
width: 200px;
height: 50px;
}
.git,
.face,
.goo {
margin: 10px;
text-align: center;
font-weight: bold;
border-radius: 8px;
}
h1 {
color: rgb(186, 183, 183);
text-align: center;
padding-top: 10px;
}
#login {
background-color: rgb(147, 88, 134);
color: white;
text-align: center;
border-radius: 4px;
width: 140px;
height: 50px;
font-weight: bold;
margin: 7px;
}
.botona2 {
border: 1px solid black;
border-radius: 2px;
width: 250px;
height: 50px;
padding: 20px;
margin: 10px;
}
.tout {
border: 2px solid rgb(235, 235, 235);
border-radius: 15px;
width: 80%;
height: 400px;
margin: auto;
margin-top: 80px;
box-shadow: 5px 10px 18px 10px #dbdbdb;
}
.vertical-line {
border-left: 2px solid #000;
display: inline-block;
height: 130px;
margin-right: 20px;
}<header>
<p class="tit1">Simo App</p>
<p class="tit2">Login</p>
</header>
<div class="tout">
<h1>Choose a Login Method</h1><br><br>
<div class="row">
<div class="col-sm-6">
<button class="goo"> Google</button><br>
<button class="face">Facebook</button><br>
<button class="git">Github</button><br>
</div>
<span class="vertical-line">or</span>
<div class="col-sm-5">
<form>
<label><input type="text" placeholder="Username" class="botona2"></label><br>
<label><input type="password" placeholder="Password" class="botona2"></label><br>
<label><input type="submit" value="Login" id="login"></label>
</form>
</div>
</div>
</div>