I have downloaded a login template for a project and I am trying to add a logo to the site.
Below is the html code I'm using
.logo{
position:absolute;
top: 5%;
left: 10%;
height: 100px;
width: 100px;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>RNL Trading intern</title>
<link rel="icon" type="image/x-icon" href="img/test-image.png">
</head>
<body >
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
<div class="d-flex align-items-center light-blue-gradient" style="height: 100vh;">
<div class="container" >
<div class="d-flex justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 shadow">
<div class="card-body">
<h3>Log in</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Wachtwoord</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</div>
</body>
</html>
The favicon works so the image source is valid. I wrote a little css to size up the image and position it to the top left:
This is what shows up on the page after refreshing cache:
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
You can't use an image directly without using img tag.
The correct way should be :
<div class="logo">
<img class="" src="./icons/test-image.png" alt="rnl-logo">
</div>
OR:
<img class="logo" src="./icons/test-image.png" alt="rnl-logo">
Reference : : The Image Embed element
Related
I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Loan Calculator</title>
</head>
<body class="bg-dark">
<div class="contr">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span id="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest Rate">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
.input-group-addon does not appear in the v4.0 documentation that was for v3.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
So i want this form which is in a card to be in the middle of the whole web page and responsive.I tried changing the height of everything to h-100 and align-items-center and nothing seems to work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 ">
<div class="col-md-6 h-100 ">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I was expecting this:
enter image description here
but i get this:
enter image description here
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
For more information: https://getbootstrap.com/docs/4.0/utilities/flex/#align-items
If I do not set my HTML and BODY tag class = "h-100" They are showing at like 210 pixels. I then have to keep setting lower level elements to h-100 also.
I'm really not sure how to fix it other than adding the h-100
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100">
I believe that the correct result of bootstrap HTML and body is that it should size it self roughly to the size of the viewing medium.
Here is the full page of what I'm trying to accomplish on jsfiddle.
https://jsfiddle.net/v2cqh3n8/
The reason I am trying to have the body set to a nice size is because I want to center align the login form. Which I am also having trouble with.
Try this bootstrap solution. Hope it works better for you, without adding height to BODY and HTML Tag .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="form-group">
<label for="">Username</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="text" class="form-control">
</div>
<button class="btn btn-primary">Log-in</button>
</div>
</div>
</div>
It worked by simply adding height to body in vh unit. h-100 justify-content-center to .row
Here is working example:
https://jsfiddle.net/HarishBoke/faocwnp6/1/
If all you want to do is put the form in the centre of the page, just use flexbox.
I've added in you js fiddle with the correct bootstrap classes.
The reason you need to set h-100 on these elements is that the content within those elements is not filling the DOM.
Side-note: You also don't need all of the containers/rows if you're just centering the element.
<!doctype html>
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100 d-flex align-items-center justify-content-center">
<form action="/login" method="POST" class="w-50">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input" placeholder="Username">
</div>
<div class="form-group">
<label for-"password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input" placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Just set the height of the html and body to 100% using css or h-100 classes and then add d-flex and align-items-center classes to the body.
html,
body {
height: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col">
<form action="/login" method="POST" class="w-50 mx-auto">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input"
placeholder="Username">
</div>
<div class="form-group">
<label for="password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input"
placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
</div>
</div>
</div>
</body>
</html>
I am having issues centering a form in Bootstrap. The form includes name and comment box including a post button.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name" >
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick ="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
When you run the code, the form only appears on the left side of the page. It won't center the page. Can anyone help me with this?
This would help you in making your form center of page.
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; // optional this is only to get full height
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#Form {
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="mx-auto" style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>
</body>
</html>
The mx-auto class does not work for Bootstrap 3. If you use Bootstrap 4, then it will work no problem. If you need to use Bootstrap 3, then put your own style with a margin: 0 auto;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="mx-auto" style="width: 200px;">
<form id="Form" onsubmit="return false">
<label for="usr">Name:</label>
<input type="text" id="name">
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick="myFunction()">Post</button>
</form>
</div>
<br>
<ul id="adduserinput">
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Like #MichaelvE said, the mx-auto works for Bootstrap 4, not 3.
A method I use with 3 is adding the class text-center to the form tag (or wrapping them all inside a <div class="text-center">...</div>. Works fine for me.
Note: It does not center only text, as the name implies.
If you want to go with the Bootstrap way, then you can go with col and col offset classes. Also, try to avoid fixed width elements if you want it to be responsive on all screen sizes. Even more, use form-groups classes for wrap labels and they related input. I show you an example of this (you can play with the browser's width):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<form id="Form" onsubmit="return false">
<div class="col-sm-offset-3 col-sm-6">
<br>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" type="text" id="name"/>
</div>
<div>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
</div>
<br>
<button class="btn btn-primary" onClick="myFunction()">
Post
</button>
</div>
</form>
</div>
As you can note, the formulary is centered on small, medium and large screen sizes, but it use the full width on extra small devices. Hope this helps you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js">
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The code above does contains the body part but it is not showing in the debugger console. I tried remove caching, installing different browsers, but all in vain.
I am trying to learn flask and that is why the url path is specified differently.
You are missing a </script> tag in your header this will fix the problem you are having.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>