How to center the icons using css - html
I have a mini project here. When I try to text-align: center; in body, the icons don't follow. If I remove the left: 0; in .content-label i in css, it stays on the right and I have no clue how to put it on the left side.
For more info, please check my code.
https://jsfiddle.net/Foxseiz/zse8tuL9/2/
There you go.
Try not to use position absolute as first priority as its the last option to style and element :)
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
}
.content-label {
position: relative;
}
.content-label i {
left: 0;
top: 8px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
.content-label {
position: relative;
display: flex;
flex-direction: row-reverse;
margin: 0 auto;
text-align: center;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
Use
.content-label.inputIconBg i {
margin-right: -42px;
}
to align icon inside input
You can use Flexbox.
You can set your content-label as flex element and center with justify-content property.
N.B. i used order property because you set the i tag after the input, so i change the order.
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
order:2;
}
.content-label {
position: relative;
display:flex; /* add this */
justify-content:center; /* add this */
}
.content-label i {
/*position: absolute;
left: 0;
top: 8px;*/ /* comment this */
margin: 9px 0 8px 8px;
color: #aaa;
transition: 0.3s;
order:1;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
Related
dropdown form in a navigation bar
i am trying to have a dropdown box with a form so i can change any settings in case of a misspell and, after a few research i can't find the root of the problem. I need the icon to be on the navigation bar. I already tryed to change de z-index of the settings container with no success, change the display of the boxes, used flex containers and still with no results.
This is the HTML and CSS (scripts are running as intended)
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
overflow: hidden;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!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.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
Removing overflow: hidden from your navbar should fix the issue.
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!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.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
CSS File:-
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
HTML File:-
<!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.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Can't position button element
I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it
how can I place it to be there?
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
<!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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
If you're able to change the HTML, here's a way:
Wrap your button inside another div:
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
Then set the margin-left on that wrapper:
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
Check this snippet for the result.
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
<!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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question"></span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I just define a button-container class and use flex & justify:
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
.button-container {
display: flex;
justify-content: start;
margin-left: 30%;
}
<!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.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-container">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
CSS Styling Issue: classes are styled together, but look vastly different
Trying to figure out why my input fields for my username & password are dramatically different, when they are paired together on my CSS file. Im fairly new and just thinking around, but not sure why there is a size difference.
Wonky sizing from password/ username fields. Disregard the horrible image as the logo, just playing around with it all.
*{
font-family: "lato", sans-serif;
}
body{
background-color: #59c9fc;
}
.login-div{
margin: 100px auto;
width: 350px;
background-color: #fff
padding: 60px;
}
.logo{
background-color:#59c9fc;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 10px;
}
.logo img{
width: 100%;
}
.title, .sub-title{
text-align: center;
color: #505050;
font-size: 35px;
}
.sub-title{
font-size: 18px;
}
.form{
width: 100%;
margin-top: 30px;
}
.form input{
font-size: 18px;
padding: 10px 20px 10px 5px;
border: none;
outline: none;
background: none;
}
.username, .password {
display: block;
border-radius: 500px;
border: 1px solid rgba(0, 0, 0,0.2);
padding: 10px;
margin: 10px 0;
background-color: #fff;
}
.form svg{
height: 20px;
margin-bottom: -5px;
margin-left: 10px;
margin-right: 5px;
}
.options{
display: flex;
flex-direction: row;
justify-content:space-between;
padding: 5px 0px;
margin-bottom: 30px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" class="css">
<title>Document</title>
</head>
<body>
<div class="login-div">
<div class="logo">
<img src="finger.png" alt="">
</div>
<div class="title">Education Community</div>
<div class="sub-title">K-12 Education Consultants</div>
<div class="form">
<div class="username">
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
</path>
</svg>
<input type="text" class="text" placeholder="username or email">
</div>
<div class="password">
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input type="text" class="password" placeholder="password">
</div>
<div class="options">
<div class="remember-me">
<input id="remember-me" type="checkbox">
<label for="remember-me">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password
</div>
</div>
<button class="signin-btn">LOGIN</button>
<div class="signup">
New client? Register here.
</div>
</div>
</div>
</body>
</html>
Remove the password class form the password input.
<input type="text" placeholder="password">
* {
font-family: "lato", sans-serif;
}
body {
background-color: #59c9fc;
}
.login-div {
margin: 100px auto;
width: 350px;
background-color: #fff padding: 60px;
}
.logo {
background-color: #59c9fc;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 10px;
}
.logo img {
width: 100%;
}
.title,
.sub-title {
text-align: center;
color: #505050;
font-size: 35px;
}
.sub-title {
font-size: 18px;
}
.form {
width: 100%;
margin-top: 30px;
}
.form input {
font-size: 18px;
padding: 10px 20px 10px 5px;
border: none;
outline: none;
background: none;
}
.username,
.password {
display: block;
border-radius: 500px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
margin: 10px 0;
background-color: #fff;
}
.form svg {
height: 20px;
margin-bottom: -5px;
margin-left: 10px;
margin-right: 5px;
}
.options {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 5px 0px;
margin-bottom: 30px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400&display=swap" rel="stylesheet">
<div class="login-div">
<div class="logo">
<img src="finger.png" alt="">
</div>
<div class="title">Education Community</div>
<div class="sub-title">K-12 Education Consultants</div>
<div class="form">
<div class="username">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z">
</path>
</svg>
<input type="text" class="text" placeholder="username or email">
</div>
<div class="password">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878">
</path>
</svg>
<input type="text" placeholder="password">
</div>
<div class="options">
<div class="remember-me">
<input id="remember-me" type="checkbox">
<label for="remember-me">Remember me?</label>
</div>
<div class="forgot-password">
Forgot Password
</div>
</div>
<button class="signin-btn">LOGIN</button>
<div class="signup">
New client? Register here.
</div>
</div>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/OJRKZEy?editors=1100
Font Awesome Icons are not displaying correctly
I'm having a little problem with my Navbar icons. I'm trying to put my Instagram and YouTube icons, but they don't show up. When I click the link, I go to youtube/instagram page, but they are not displaying in the navbar.
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
This is because the social media icons are part of the Font Awesome Brands font family.
Change the mark up from fas to fab
<div class="social-media-icons">
</div>
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
Center login box to the page responsively with a footer at the bottom
I am getting frustrated in my past few days of attempts with trying to make my login box completely center on the page. I want it to be responsive to device size, so I went with Bootstrap. For me though, I have it centering responsively on the page at the top, but I need to also move it down to center it over the entire page.
Also I have a footer that goes underneath.
Here is what I have
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="login.aspx.vb" Inherits="login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="Scripts/bootstrap.min.js"></script>
<style type="text/css">
body, html {
background: url(../images/bgmain.png) 100% no-repeat fixed;
font-family: 'Oxygen', sans-serif;
background-size: cover;
}
.main {
vertical-align: middle;
}
hr {
width: 10%;
color: #fff;
}
.form-group {
margin-bottom: 15px;
}
label {
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login {
background-color: #fff;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
h1 {
font-family: 'Montserrat', sans-serif;
}
.main-center {
margin-top: 50px;
margin: 0 auto;
max-width: 400px;
padding: 40px 40px;
}
.login-button {
margin-top: 5px;
}
.login-register {
font-size: 11px;
text-align: center;
}
#footer {
position: fixed;
bottom: 0;
padding: 5px;
align-content: center;
width: 100%;
}
.auto-style1 {
width: 88px;
height: 32px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row main">
<div class="panel-title text-center">
<h1 class="title">Title</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">User</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<asp:TextBox ID="tbUser" runat="server" class="form-control" name="user" placeholder="Enter your password"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<asp:TextBox ID="txtPass" runat="server" class="form-control" placeholder="Enter your password" name="password"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group ">
<asp:Button ID="Button2" runat="server" class="btn btn-primary btn-lg btn-block login-button" Text="Login" />
</div>
<div class="login-register">
Create account or reset password
<asp:Label ID="lblerror1" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
</div>
<div id="footer" class="login-register">
<img alt="" class="auto-style1" src="images/logo.png" /><br />
Copyright © 2016. All rights reserved. Privacy Policy</div>
</form>
</body>
</html>
Change the .main-center class with the following:
.main-center {
margin: 0 auto;
max-width: 400px;
padding: 40px 40px;
position:absolute;
left:0;
right:0;
top: 50%;
transform: translateY(-50%);
}
This will also fix the footer problem.
Working example: https://jsfiddle.net/ze8m1nhq/