I'm trying to make a login/signup page using bootstrap 4.5 I'm not a developer and have watched some YouTube videos to understand things. I want to make this page responsive as bootstrap is mobile first. I'm lost in classes and the more I read the more I'm lost, unfortunately. I have managed somehow in two weeks, I don't know how, to make the page thus far. It looks good in my opinion. The original idea came from https://codepen.io/microsarme6943/pen/LbNNrN I could not make it responsive. Then came across https://codepen.io/cassandraPaige/pen/ZEYmMJg as its similar to other one but without media queries. My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.css" integrity="sha512-f73UKwzP1Oia45eqHpHwzJtFLpvULbhVpEJfaWczo/ZCV5NWSnK4vLDnjTaMps28ocZ05RbI83k2RlQH92zy7A==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style9.css">
<title>Login</title>
</head>
<body>
<div class="container-fluid min-vh-100 d-flex flex-column">
<div class="row flex-grow-1">
<div class="col-md-2 border">
<div class="p-1 my-flex-items">
<ul>
<li><img class="logo" src="logo1.png"/></li>
<li class="move1"><a class="login" href="#"><i class="fas fa-user-check"></i> Login</a></li>
<li class="move2"><a class="reg" href="#"><i class="fas fa-user-plus"></i> Sign Up</a></li>
<li class="move3"><a class="about" href="#"><i class="fas fa-info"></i> About</a></li>
<li class="move4"><a class="faq" href="#"><i class="fas fa-question"></i> FAQ</a></li>
</ul>
</div>
</div>
<div class="col-md-10 border">
<div class="d-flex flex-column flex-md-column align-items-start align-items-md-start my-welcome">
<h3 class="heading p-2 align-items-stretch" >Welcome To Your Account</h3>
<span class="p-2">BUSINESS NAME SOMETHING<br>Log-in using your credentials</span><br>
<span class="p-2">To learn more about services<br> Please visit out website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a></span>
</div>
<div class="d-flex flex-row justify-content-start my-social">
<div class="btn fb">
<a href="https://www.facebook.com" target="blank"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="btn ln">
<a href="https://www.linkedin.com" target="blank"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="btn tw">
<a href="https://www.twitter.com" target="blank"><i class="fab fa-twitter"></i></a>
</div>
<div class="btn in">
<a href="https://www.instagram.com" target="blank"><i class="fab fa-instagram"></i></a>
</div>
<div class="btn te">
<a href="https://www.telegram.org" target="blank"><i class="fab fa-telegram-plane"></i></a>
</div>
</div>
<div class="container my-login">
<div class="login">
<p><span>Login</span> to your account to see what <br>We have for you.</p><br>
<form action="">
<div class="form-group">
<label for="Please select">Select an option</label>
<select name="Please select" id="selection" class="form-control">
<option value="Company">Company</option>
<option value="Individual" disabled>Individual</option>
</select>
</div>
<div class="form-group">
<label for="company">Company id</label>
<input type="text" name="company" id="company" class="form-control">
<small class="form-text text-muted">
A unique company id which we provided you.
</small>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control">
<small class="form-text text-muted">
Type your username.
</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
<small class="form-text text-muted">
Type your password. Passowrd is case sentive.
</small>
</div>
<div class="form-check">
<input type="checkbox" id="rememberme" class="form-check-input">
<label for="checkbox" class="form-check-label">Remember me</label>
</div>
<button><i class="fas fa-lock-open"></i></button>
<p>Forgot Your Password?<span><a class="sign-up" href="#" > Request reset password</a></span></p>
<p>Dont't Have An Account?<span><a class="reg" href="#" > Sign up</a></span></p>
</form>
</div>
</div>
<div class="container my-signup">
<div class="reg">
<p><span>Register</span> Fill in the form below <br>To get started.</p><br>
<form action="">
<div class="form-group">
<label for="Please select">Account Type</label>
<select name="Please select" id="selection" class="form-control">
<option value="Company">Company</option>
<option value="Individual" disabled>Individual</option>
</select>
<small class="form-text">
Select appropriate account type from the list.
</small>
</div>
<div class="form-group">
<label for="company">Company Name</label>
<input type="text" name="company" id="company" class="form-control">
<small class="form-text">
Your company name as it appears on companies house documents.
</small>
</div>
<div class="form-group">
<label for="contactname">Contact Person's Name</label>
<input type="text" name="contactname" id="contactname" class="form-control">
<small class="form-text">
Point of contact or person dealing with this account in your office.
</small>
</div>
<div class="form-group">
<label for="email">Your Company Email</label>
<input type="email" name="email" id="email" class="form-control">
<small class="form-text">
Your official company email address. Free email providers are not accepted.
</small>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" name="address" id="address" class="form-control">
<small class="form-text">
Your office address including post code.
</small>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control">
<small class="form-text">
Your desired username.
</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control">
<small class="form-text">
Password must be at least 8 character mix of letters & number.
</small>
</div>
<div class="form-group">
<label for="password">Re-type Password</label>
<input type="password" name="password" id="password" class="form-control">
<small class="form-text">
Re-type your type. It must match the password you set above.
</small>
</div>
<div class="form-check">
<input type="checkbox" id="rememberme" class="form-check-input">
<label for="checkbox" class="form-check-label">I / We Agree with terms & conditions.</label>
</div>
<button><i class="far fa-plus-square"></i></i></button>
<p>Already Have An account?<span class="login"><a href="#"> Log in</a></span></p>
</form>
</div>
</div>
<div class="container my-info">
<ul>
<p>Below is an overview of vast services which our clients can benifit from.<br></p>
<li class="1"><p>Some bullet point one goes here.</p></li>
<li class="2"><p>Some bullet point two goes here.</p</li>
<li class="3"><p>Some bullet point three goes here.</p</li>
<li class="4"><p>Some bullet point four goes here.</p</li>
<p>To learn in detail about our services & how we can help you progress visit our main website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a></p>
</ul>
</div>
<div class="container my-about">
<p> We are something something and we offer lots of something something to companies and indivusuals alike. <br>With our experience we have designed our services to match your every need and requirement.<br> You can contact us by filling the online contact us form on our website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a> for a tailored experience where we will measure you and something something and give you the best possible quote. We offer fully coustimesed solution based on your business model to satisfy your exact needs. Get in touch today for a detailed discussion.</p>
</div>
<div class="row footer text-center my-footer">
<div class="col footer-row">
<i class="fas fa-copyright"><span class="copyright"> Copyright text something something. All right reserved something something. From year something something.</i><span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous"></script>
<script type='text/javascript' src="app4.js"></script>
</body>
</html>
and CSS is:
*{
margin: 0px;
padding: 0;
box-sizing: border-box;
}
.my-flex-items ul{
margin: 0px;
padding: 0px;
text-align: center;
}
.my-flex-items ul li{
justify-content: space-around;
list-style: none;
background-color: white;
align-items: center;
list-style: none;
padding: 30px 25px;
}
.my-flex-items li a{
font-size: 20px;
color: black;
text-align: left;
text-decoration: none;
}
.my-welcome{
top: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
color: white;
}
.my-welcome .fas{
color: crimson;
}
.my-welcome a{
color: white;
}
.my-social{
background-color: rgb(0, 0, 0);
color: white;
}
.my-social a{
color: white;
}
.my-login{
background-color: rgb(224, 224, 224);
}
.my-login input{
padding:7px 15px;
}
.my-login input:focus{
border-color: crimson;
box-shadow: none;
}
.my-login button{
border-radius: 50%;
height: 50px;
width: 50px;
background-color: crimson;
color: white;
outline: none;
border: 0px;
display: block;
margin: 35px auto ;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.my-signup{
background-color: rgb(224, 224, 224);
}
.my-signup input:focus{
border-color: crimson;
box-shadow: none;
}
.my-signup button{
border-radius: 50%;
height: 50px;
width: 50px;
background-color: crimson;
color: white;
outline: none;
border: 0px;
display: block;
margin: 35px auto ;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.my-info{
background-color: rgb(224, 224, 224);
}
.my-info .fas{
color: crimson;
}
.my-about{
background-color: rgb(224, 224, 224);
}
.my-about .fas{
color: crimson;
}
.my-footer{
margin: 5px auto;
}
.my-footer .fas{
color: crimson;
}
I want this to resize and becomes responsive and it can be done by appropriate classes of bootstrap. flex box and grid system I believe. I'm 1000% I have mixed classes up and can not figure out the error. I do apologies but I'm trying here not to be a 1000% noob but I'm failing to correct it.
The issues.
- Welcome part should be full width of right side column but it is not.
- When the page is resized two rows are defined. Top one should not be half of screen but only one row to contain links. Icons on top and its appropriate link under it. User+ icon on top with Signup text under it. Icon of i on top and text info under it. All icons in one line (inline?) to navigation is not half the viewing area. At the moment it pans out vertically and it should horizontally in straight line.
- Only welcome screen/slide should be visible and upon clicking icon the relative text should slide form left like in second codepen link. On mobile view it will slide from top as mobile view is top to bottom (don't know the correct term, sorry!)
- The focus on both login and registration (company field) is bootstrap default light blue. I read on bootstrap and searched Stackoverflow and got the rest changed to crimson color as its the theme I'm going with but those two fields I have banged my head and it is not changing.
I know I'm months away to make it anywhere near decently workable because of classes confusion. I understand that. On desktop view I want the side menu to have that first codepen link hoover style where it follows the cursor. So a mixture of both codepens in fully responsive without media query.
Solution.
Lost and no idea to be honest. Yes the CSS files says style9.css because I'm on ninth variation of this! I find it funny that I have not given this up and I don't want to give up and fully make it with help and assistance of course, hence, the post. There is also an image on both desktop and mobile view and it centers nicely on both views. I don't know how I managed to get that right.
If anyone can least check the classes for me and point out where I have it messed up and I will try to clean it and use the recommended class or term to make it functional.
I sincerely apologies for the novel here but my lack of knowledge requires me to be explicit in explaining to the best of my ability.
If anyone can help and suggest? check the code? I'd appreciate it very much. Thank you and have a lovely weekend.
Regards.
-Tee