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>
Related
I want the style of this page of mine to be justified in the center but it doesn't work.
Especially for the converter tab I want each element to have its own line and must be centered inside the div container.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!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="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried the display block and in-line block but the element inside the container is not moving.
i think the container class is the implemented one because he is the in the general div that contain the "converter-tab" div , and the reason of not-centered elements is the padding and margin css classes.
try to remove it or replace it by this one :
.container {
margin: auto;
}
What you really have to do in this case is to assign a property text-align: center
to your .converter-tab class and moreover you have to wrap your h2, input and button individually inside a separate div for each one.
You can check my working snippet below:
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: block;
align-items: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
text-align: center;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!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="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<div><h2>Metric/Imperial Unit Conversion</h2></div>
<div><input type="text" id="input-el" class="converter-input" /></div>
<div><button class="converter-btn" id="convert-btn">Convert</button></div>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I've annotated your css below. I've made your input div children block level elements so they appear on their own line. I've then added margin: auto to them to make them centered. I've aligned text to the center using text-align: center;
Alignment is always a PITA (much less so these days) but there's a handy tool to use to help you: howtocenterincss.com
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-tab > * {
display: block; /* make each item a block element so it appears on its own line */
text-align: center; /* make text (e.g. inside <p> tags) centered */
margin-inline: auto; /* make block level elements centered */
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
margin-bottom: 0.5rem; /*just added this to neaten it up a smidge */
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
text-align: center; /* center the text in your output div */
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
As it's acceptably supported all over major browsers I'd use flex: just change the display mode of your container div to flex, set flex-direction: column; and justify-content: center;. After this adjust top and bottom padding as you prefer.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding: 2rem 1rem;
margin: 0 auto;
}
.converter-tab {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: white;
background: #6943ff;
width: 550px;
height: 285px;
}
.converter-input {
width: 117px;
height: 83px;
background: none;
border: solid 1px white;
color: white;
font-size: 2.5rem;
}
.converter-btn {
width: 117px;
height: 42px;
border-radius: 5px;
border: none;
}
.output {
background: #f4f4f4;
color: #5a537b;
width: 550px;
height: 400px;
}
.length,
.volume,
.mass {
width: 500px;
height: 108px;
background: #ffffff;
margin-bottom: 20px;
margin-top: 10px;
}
<!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="style.css" />
<title>Unit Conversion</title>
</head>
<body>
<div class="container">
<div class="converter-tab">
<h2>Metric/Imperial Unit Conversion</h2>
<input type="text" id="input-el" class="converter-input" />
<button class="converter-btn" id="convert-btn">Convert</button>
</div>
<div class="output">
<div class="length" id="length-el">
<h2>Length (Meter/Feeet)</h2>
<p class="" id="output-el"></p>
</div>
<div class="volume" id="volume-el">
<h2>Volume (Liters/Gallons)</h2>
<p class="" id="output-el2"></p>
</div>
<div class="mass" id="mass-el">
<h2>Mass (Kilograms/Pounds)</h2>
<p class="" id="output-el3"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
How the page layout should look^
As shown by the screenshot, the two images in this html code are making a white space on the right side of the page. There is no padding nor does the image itself extend beyond where it apparently does - what is causing this unnecessary white space and how do I remove it?
CSS below:
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
margin: 0;
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
/** {*/
/*background: #000 !important;*/
/*color: #0f0 !important;*/
/*outline: solid #f00 1px !important;*/
/*}*/
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.leftSide {
position: relative;
float: left;
width: 55%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: left;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: right;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.rightSide {
position: relative;
float: right;
width: 45%;
}
.form {
border-radius: 5px;
position: relative;
float: left;
background-color: #F7F6F6;
width: 50%;
padding: 20px;
height: 120%;
border: 20px black;
}
.insideForm {
background-color: white;
border: black 5px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
margin-right: 0px;
max-width: 100%;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
max-width: 100%;
height: auto;
}
.centerDiv {
position: relative;
text-align: center ;
}
.footer {
width: 100%;
height: 100px;
background-color: #303233;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="leftSide">
<div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2></div>
<img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<p class="Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</p>
<div class="leftPicture1">
<img src="img.jpeg" width="95%">
</div>
<div class="leftPicture2">
<img src="img3.jpg" width="95%">
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv"><h2> Find out more today </h2></div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="Swimming%20pool.jpg" width="95%">
</div>
<div class="rightPicture2">
<img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
</div>
</div>
<div class="footer">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>
Is there anything that I am missing here? I have had this problem before and I was unable to fix it.
EDIT: New screenshot showing supersized image
Have you tried
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It seems like you are struggling with box model sizes
https://www.w3schools.com/css/css3_box-sizing.asp
You have added a width of 95% to the img tag:
<img src="img.jpeg" width="95%">
Change this to 100% or remove and add to your styles eg:
.leftPicture1 img {
width: 100%;
}
Here is the code. Hope it will help you. if any changes please let me know.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
margin: 0;
padding: 0;
}
*,
::after,
::before {
box-sizing: border-box;
}
.logo-wrap {
display: flex;
justify-content: space-between;
}
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
.topnav {
padding: 20px;
}
.content-part {
padding: 20px 0;
display: flex;
width: 100%;
}
.left-part {
margin: 15px 0;
padding: 0 20px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.leftSide {
width: 70%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
}
.rightSide {
width: 30%;
}
.left-images {
display: flex;
}
.form {
border-radius: 5px;
background-color: #F7F6F6;
padding: 0 20px 20px 20px;
}
.insideForm {
background-color: white;
padding: 10px;
border: black 5px;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.centerDiv {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.footer {
width: 100%;
height: 80px;
background-color: #303233;
position: relative;
display:flex;
justify-content:space-between;
padding:20px;
}
#media screen and (max-width: 767px) {
.topnav a:not(:first-child) {
display: none;
}
.content-part,.left-images{
display:block;
}
.leftPicture1,.leftPicture2{padding-left:0}
.leftSide,.rightSide{width:100%;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="logo-wrap">
<img src="https://dummyimage.com/100x50/000000/ffffff.png">
<img src="https://dummyimage.com/100x50/ff00ff/ffffff.png">
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="content-part">
<div class="leftSide">
<div class="centerDiv">
<h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2>
</div>
<img src="http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="left-part">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<div class="points-Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</div>
</div>
<div class="left-images">
<div class="leftPicture1">
<img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" width="100%">
</div>
<div class="leftPicture2">
<img src="http://lorempixel.com/output/technics-q-c-640-480-5.jpg" width="100%">
</div>
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv">
<h2> Find out more today </h2>
</div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input type="text" id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="http://lorempixel.com/output/business-q-c-640-480-8.jpg" width="100%">
</div>
<div class="rightPicture2">
<img src="http://lorempixel.com/output/transport-q-c-640-480-3.jpg" width="100%">
</div>
</div>
</div>
<div class="footer">
<img src="logo.png">
<img src="icon.png">
</div>
</body>
</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>
I have this simple html page, with css it is working good except when I scroll the page down, the input form is above the header. I would like the header to always be above the content When I scroll.
Can anyone help ?
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
When an element has position: absolute or position: fixed, it happens that it can overlap with other elements. When it happens, the container that will be rendered above will be the one that has the higher z-index value. If the z-index isn't set, then it's the lowest possible.
For this reason, you can just add:
z-index: 1;
to your sticky class:
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>