I am able to get the desired style with my text elements but not with my form. I was previously trying to achieve this in a mockup practice website I was working on and decided to just attempt it on a clean slate. As you can see I am able to get the background color on the screen but now it stacks. I started looking at the structure of my HTML and there is nothing I can think of that would produce the outcome I am getting. The red opposed to the form itself is in a column though and I have flex-direction column on on my 'form' in my css so maybe it is the structure and I am missing something? Help would be much appreciated & thank you in advance!
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');
/* page style */
* {
box-sizing: border-box;
}
#contact-page {
font-family: 'Raleway';
background: #464B59;
}
/* contact grid (container) */
.contact-grid {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100vh;
}
/* contact-info */
.contact-info {
background: white;
padding: 80px;
max-width: 500px;
text-align: center;
width: 200;
}
.contact-info h2 {
font-size: 40px;
}
/* form */
.form {
width: 400px;
height: 500px;
border: green 2px solid;
background: red;
background-size: cover;
background-position: center;
}
form {
display: flex;
flex-direction: column;
}<!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>contact</title>
</head>
<body id="contact-page">
<div >
<div >
<h2>get in touch</h2>
<hr>
<p>The best way to reach me directly is via Linkden.</p>
<p>If you are looking inquire proffesionally please fill out the contact form and I will get back to you as soon as I can.</p>
<p>Thank you & have a wonderful day</p>
</div>
<div >
<form action="https://formsubmit.co/[email protected]" method="POST">
<input type="text" name="name" required placeholder="name">
<input type="email" name="email" required placeholder="email">
<textarea name="message" id="" cols="30" rows="10" placeholder="message"></textarea>
<button type="submit">Send</button>
</form>
</div>
</div>
</body>
</html>CodePudding user response：
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');
/* page style */
* {
box-sizing: border-box;
}
#contact-page {
font-family: 'Raleway';
background: #464B59;
}
/* contact grid (container) */
.contact-grid {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100vh;
}
/* contact-info */
.contact-info {
background: white;
padding: 80px;
max-width: 500px;
text-align: center;
}
.contact-info h2 {
font-size: 40px;
}
/* form */
.form {
width: 600px;
padding:20px;
border: green 2px solid;
background: red;
background-size: cover;
background-position: center;
}
form {
display: flex;
flex-direction: column;
}
form input{
padding: 10px;
margin-bottom: 20px;
}
form textarea{
padding: 10px;
margin-bottom: 10px;
}
form button{
padding: 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>contact</title>
</head>
<body id="contact-page">
<div >
<div >
<h2>get in touch</h2>
<hr>
<p>The best way to reach me directly is via Linkden.</p>
<p>If you are looking inquire proffesionally please fill out the contact form and I will get back to you as soon as I can.</p>
<p>Thank you & have a wonderful day</p>
</div>
<div >
<form action="https://formsubmit.co/[email protected]" method="POST">
<input type="text" name="name" required placeholder="name">
<input type="email" name="email" required placeholder="email">
<textarea name="message" id="" cols="30" rows="10" placeholder="message"></textarea>
<button type="submit">Send</button>
</form>
</div>
</div>
</body>
</html>