Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Forms
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/

/**Theme Color: #ff6200**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	color: #444;
	box-sizing: border-box;
	margin: 0px;
}

.container {
	max-width: 1280px;
	width: 100%;
	padding: 0px 15px;
	margin: auto;
}

.container-fluid {
	width: 100%;
	padding: 0px 30px;
}

.form-fix {
	max-width: 800px;
	width: 100%;
	margin: auto;
}

.form-fix h2 {
	font-size: 30px;
	font-weight: normal;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 10px;
}

/**Typeo CSS End**/
.form {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	margin: auto;
	justify-content: space-between;
}

.form-group {
	width: calc(50% - 10px);
	margin: 10px 0px;
}

.form-control {
	width: 100%;
	padding: 10px 15px;
	outline: none;
	border: #ccc 1px solid;
	font-size: 17px;
	font-family: 'Poppins';
	transition: 0.5s all;
}

select.form-control {
	appearance: none;
	padding: 12px;
	background-image: url(https://coderwrap.com/wp-content/uploads/2023/01/slt-arrow-down.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 5px) 20px;
}

.form-control:focus {
	border-color: #ff6200;
}

.form-control::-webkit-input-placeholder {
	color: #000;
}

.form-control:-ms-input-placeholder {
	color: #000;
}

.form-control::placeholder {
	color: #000;
}

.fg-full-width {
	width: 100%;
}

textarea.form-control {
	height: 150px;
}

.submit-btn {
	padding: 10px 40px;
	border: none;
	outline: none;
	font-family: 'Poppins';
	font-size: 20px;
	text-transform: uppercase;
	background-color: #ff6200;
	color: #fff;
	cursor: pointer;
	transition: 0.5s all;
}

.submit-btn:hover {
	opacity: 0.8;
}

@media(max-width:700px) {
	.form-group {
		width: 100%;
	}

}

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *