Hello,
I'm having a problem where the text is on the bottom of each input box for my contact form. I'd like to make it so that the text is on the top of each input box. I have posted my code below as well as attached an image of my contact form.
I'm having a problem where the text is on the bottom of each input box for my contact form. I'd like to make it so that the text is on the top of each input box. I have posted my code below as well as attached an image of my contact form.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>Easy Tutorials</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<form>
<div class="input-group">
<input type="text" id="name" required>
<label for="name">Twoje imię (wymagane)</label>
</div>
<div class="input-group">
<input type="text" id="number" required>
<label for="number">Adres E-mail (wymagane)</label>
</div>
<div class="input-group">
<input type="email" id="email" required>
<label for="email">Temat</label>
</div>
<div class="input-group">
<textarea id="message" rows="8"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
<button type="submit">WYŚLIJ WIADOMOŚĆ</button>
</form>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form{
width: 90%;
max-width: 600px;
}
.input-group{
margin-bottom: 30px;
position: relative;
}
input, textarea{
width: 100%;
padding: 10px;
outline: 0;
border: 1px solid #000;
color: #000;
background: transparent;
font-size: 15px;
}
label{
display: block;
position: absolute;
height: 100%;
top: 10;
left: 10;
margin: 10px 0;
}
button{
padding: 10px 0;
color: #000;
outline: none;
background: transparent;
border: 1px solid #000;
width: 100%;
cursor: pointer;
}
