<div class="contain">
<div class="wrapper">
<div class="contacts">
<h3>Our contacts</h3>
<ul>
<li>San Joe St.</li>
<li>00-1212121-11</li>
<li>[email protected]</li>
</ul>
</div>
<div class="form">
<h3>Send us a message</h3>
<form action="">
<p>
<label for="">Your name</label>
<input type="text">
</p>
<p>
<label for="">Skype</label>
<input type="text">
</p>
<p>
<label for="">Email Address</label>
<input type="text">
</p>
<p>
<label for="">Topic</label>
<input type="text">
</p>
<p class="full-width">
<label for="">Write your message</label>
<textarea name="" id="" cols="30" rows="7"></textarea>
</p>
<p class="full-width">
<button>Send</button>
</p>
</form>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.contain {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
@media (min-width: 600px) {
.contain {
padding: 0;
}
}
h3,
ul {
margin: 0;
}
h3 {
margin-bottom: 1rem;
}
input:focus,
textarea:focus {
outline: 3px solid gold;
}
input,
textarea,
button {
width: 100%;
border: 1px solid #000;
}
.wrapper {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.wrapper > * {
padding: 1em;
}
@media (min-width: 700px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
}
.wrapper > * {
padding: 2em 2em;
}
}
ul {
list-style: none;
padding: 0;
}
.contacts {
background: #4b5195;
color: #fff;
}
.form {
background: #fff;
}
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
form label {
display: block;
}
form p {
margin: 0;
}
.full-width {
grid-column: 1 / 3;
}
button,
input,
textarea {
padding: 1em;
}
button {
background: lightgrey;
width: 100%;
border: 0;
}
button:hover, button:focus {
background: gold;
outline: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.