<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheets" type="text/css" href="styles.css"
</head>
<!-- ======================
~Global~
====================== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Work+Sans:wght@300&display=swap" rel="stylesheet">
<!-- ======================
~LAYOUT~
====================== -->
<body>
<main>
<form id="survey-form">
<div class="flex-container">
<div class="container1">
<h1 id="title" class="title">Survey</h1>
</div>
<div class="container2">
<p id="description">Lets <span>ignite</span> your curiosity, <span>peak</span> your interest and <span>explore</span> exciting new avenues.</p>
<hr>
</div>
<div class="container3">
<h2 class="profile">Profile</h2>
<div class="form-group">
<div class="info">
<label for="number" id="number-label">Age </label><br />
<input type="number" name="age" id="number" min="0" max="99" class="form-control" placeholder="0" />
<br />
<label for="name" id="name-label">Name </label><br />
<input type="text" name="name" id="name" class="form-control" placeholder="John Doe" required /><br />
<label for="email" id="email-label">Email </label><br />
<input type="email" name="email" id="email" class="form-control" placeholder="johndoe@email.com" required /><br />
<label for="birthplace" id="nation-label">Birthplace</label><br>
<input type="country" name="birthplace" id="birthplace" class="form-control" placeholder="Place of birth">
</div>
<div class="gender">
<h4>Gender</h4>
<input type="radio" id="male" name="gender" value="male" class="radio">
<label for="male" class="gender-label">Male</label>
<br>
<input type="radio" id="female" name="gender" value="female" class="radio">
<label for="female" class="gender-label">Female</label>
<br>
<input type="radio" id="other" name="gender" value="other" class="radio">
<label for="other" class="gender-label">Other</label>
<br>
</div>
<div class="occupation">
<p>Select from the options given below</p>
<select id="dropdown" name="occupation" class="form-control" required>
<option disabled selected value>Current occupation</option>
<option value="full-time">Full Time</option>
<option value="part-time">Part Time</option>
<option value="student">Student</option>
<option value="prefernottosay">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="container4">
<p>Unsure of your interests? <span>No problem!</span> Our list will guide you through the process.</p>
</div>
<div class="container5">
<div class="pastime">
<div class="column1">
<input type="checkbox" id="animals" name="interest" value="animals" class="interest-input">
<label for="animals" class="interest-label">Animals</label>
<br>
<input type="checkbox" id="anime" name="interest" value="anime" class="interest-input">
<label for="anime" class="interest-label">Anime</label>
<br>
<input type="checkbox" id="arts" name="interest" value="arts" class="interest-input">
<label for="arts" class="interest-label">Arts</label>
<br>
<input type="checkbox" id="crafts" name="interest" value="crafts" class="interest-input">
<label for="crafts" class="interest-label">Crafts</label>
<br>
<input type="checkbox" id="decor" name="interest" value="decor" class="interest-input">
<label for="decor" class="interest-label">Decor</label>
<br>
<input type="checkbox" id="design" name="interest" value="design" class="interest-input">
<label for="design" class="interest-label">Design</label>
<br>
<input type="checkbox" id="drawing" name="interest" value="drawing" class="interest-input">
<label for="drawing" class="interest-label">Drawing</label>
<br>
<input type="checkbox" id="education" name="interest" value="education" class="interest-input">
<label for="education" class="interest-label">Education</label>
<br>
<input type="checkbox" id="exercise" name="interest" value="exercise" class="interest-input">
<label for="exercise" class="interest-label">Exercise</label>
<br>
<input type="checkbox" id="family" name="interest" value="family" class="interest-input">
<label for="family" class="interest-label">Family</label>
<br>
</div>
<div class="column2">
<input type="checkbox" id="fashion" name="interest" value="fashion" class="interest-input">
<label for="fashion" class="interest-label">Fashion</label>
<br>
<input type="checkbox" id="financials" name="interest" value="financials" class="interest-input">
<label for="financials" class="interest-label">Financials</label>
<br>
<input type="checkbox" id="flying" name="interest" value="flying" class="interest-input">
<label for="flying" class="interest-label">Flying</label>
<br>
<input type="checkbox" id="food" name="interest" value="food" class="interest-input">
<label for="food" class="interest-label">Food</label>
<br>
<input type="checkbox" id="friends" name="interest" value="friends" class="interest-input">
<label for="friends" class="interest-label">Friends</label>
<br>
<input type="checkbox" id="games" name="interest" value="games" class="interest-input">
<label for="games" class="interest-label">Games</label>
<br>
<input type="checkbox" id="gardening" name="interest" value="gardening" class="interest-input">
<label for="gardening" class="interest-label">Gardening</label>
<br>
<input type="checkbox" id="healing" name="interest" value="healing" class="interest-input">
<label for="healing" class="interest-label">Healing</label>
<br>
<input type="checkbox" id="hiking" name="interest" value="hiking" class="interest-input">
<label for="hiking" class="interest-label">Hiking</label>
<br>
<input type="checkbox" id="history" name="interest" value="history" class="interest-input">
<label for="history" class="interest-label">History</label>
<br>
</div>
<div class="column3">
<input type="checkbox" id="languages" name="interest" value="languages" class="interest-input">
<label for="languages" class="interest-label">Languages</label>
<br>
<input type="checkbox" id="love" name="interest" value="love" class="interest-input">
<label for="love" class="interest-label">Love</label>
<br>
<input type="checkbox" id="movies" name="interest" value="movies" class="interest-input">
<label for="movies" class="interest-label">Movies</label>
<br>
<input type="checkbox" id="music" name="interest" value="music" class="interest-input">
<label for="music" class="interest-label">Music</label>
<br>
<input type="checkbox" id="painting" name="interest" value="painting" class="interest-input">
<label for="painting" class="interest-label">painting</label>
<br>
<input type="checkbox" id="parachuting" name="interest" value="parachuting" class="interest-input">
<label for="parachuting" class="interest-label">Parachuting</label>
<br>
<input type="checkbox" id="politics" name="interest" value="politics" class="interest-input">
<label for="politics" class="interest-label">Politics</label>
<br>
<input type="checkbox" id="racing" name="interest" value="racing" class="interest-input">
<label for="racing" class="interest-label">Racing</label>
<br>
<input type="checkbox" id="reading" name="interest" value="reading" class="interest-input">
<label for="reading" class="interest-label">Reading</label>
<br>
<input type="checkbox" id="religion" name="interest" value="religion" class="interest-input">
<label for="religion" class="interest-label">Religion</label>
<br>
</div>
<div class="column4">
<input type="checkbox" id="research" name="interest" value="research" class="interest-input">
<label for="research" class="interest-label">Research</label>
<br>
<input type="checkbox" id="rockclimbing" name="interest" value="rockclimbing" class="interest-input">
<label for="rockclimbing" class="interest-label">Rock Climbing</label>
<br>
<input type="checkbox" id="Sailing" name="interest" value="sailing" class="interest-input">
<label for="sailing" class="interest-label">Sailing</label>
<br>
<input type="checkbox" id="shopping" name="interest" value="shopping" class="interest-input">
<label for="shopping" class="interest-label">Shopping</label>
<br>
<input type="checkbox" id="socialmedia" name="interest" value="socialmedia" class="interest-input">
<label for="socialmedia" class="interest-label">Social Media</label>
<br>
<input type="checkbox" id="sports" name="interest" value="sports" class="interest-input">
<label for="sports" class="interest-label">Sports</label>
<br>
<input type="checkbox" id="technology" name="interest" value="technology" class="interest-input">
<label for="technology" class="interest-label">Technology</label>
<br>
<input type="checkbox" id="thebeach" name="interest" value="thebeach" class="interest-input">
<label for="thebeach" class="interest-label">The Beach</label>
<br>
<input type="checkbox" id="travel" name="interest" value="travel" class="interest-input">
<label for="travel" class="interest-label">Travel</label>
<br>
<input type="checkbox" id="tvshows" name="interest" value="tvshows" class="interest-input">
<label for="tvshows" class="interest-label">TV Shows</label>
<br>
</div>
</div>
</div>
<div class="container6">
<textarea placeholder="Leave a comment..."></textarea>
<button type="submit" id="submit" class="button"><strong>Submit</strong>
</buttom>
</div>
</div>
</form>
</main>
</body>
that is the html
/* ----------------------
~Global~
---------------------- */
:root {
--primary-color: rgb(18, 49, 77, 0.7);
--secondary-color: rgb(181, 108, 0);
--third-color: rgb(9, 105, 93, 0.7);
--fourth-color: rgb(46, 45, 44);
}
span {
color: var(--secondary-color);
font-weight: bold;
}
.container2,
.container3,
.container4,
.container6 {
border-left: 1px solid grey;
border-right: 1px solid grey;
border-color: var(--secondary-color);
}
input:focus {
border: 1px solid var(--secondary-color)
;
}
.radio:focus {
border: 1px solid var(--secondary-color);
}
select:focus {
border: 1px solid var(--secondary-color);
}
body {
max-width: 1200px;
margin: auto;
}
main {
max-width: 700px;
margin: auto;
float: none;
padding: 10px;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
/* ----------------------
~Layout~
---------------------- */
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
/* ----------------------
~Header~
---------------------- */
.container1 {
color: rgb(255, 255, 255);
width: 700px;
height: 80px;
text-align: center;
background-color: var(--primary-color);
}
.title {
font-size: 48px;
font-weight: 500px;
font-family: 'Work Sans', sans-serif;
text-align: center;
letter-spacing: 5px;
margin: 0.5rem;
}
/* ----------------------
~Description~
---------------------- */
.container2 {
width: 700px;
height: 80px;
}
#description {
font-size: 15px;
font-family: 'Poppins', sans-serif;
text-align: center;
letter-spacing: 0.4px;
margin: 1.25em 0;
color: var(--fourth-color);
}
hr {
width: 580px;
background-color: var(--primary-color);
}
/* ----------------------
~Profile~
---------------------- */
.container3 {
font-family: 'Work Sans', sans-serif;
width: 700px;
height: 370px;
}
.profile {
color: var(--third-color);
font-family: 'Poppins', sans-serif;
font-weight: 100px;
text-align: left;
letter-spacing: 1px;
margin-left: 67px;
}
.form-group {
display: flex;
margin-top: 40px;
justify-content: center;
gap: 2em;
}
.info {
color: var(--primary-color);
padding-top: 0.5em;
letter-spacing: 1px;
}
#number-label,
#name-label,
#email-label,
#nation-label {
padding-left: 0.75em;
}
.form-control {
margin: 0.5em;
outline: rgb(18, 49, 77, 0.7);
width: 150px;
height: 25px;
border-radius: 5px;
}
.gender {
width: 110px;
margin-left: 1em;
border: 2px solid;
border-color: var(--primary-color);
}
.gender > h4 {
color: rgb(18, 49, 77, 0.7);
font-family: 'Poppins', sans-serif;
text-align: center;
letter-spacing: 1px;
padding-top: 10px;
}
.gender > label {
color: var(--secondary-color);
letter-spacing: 1px;
}
.gender > input {
margin: 10px;
}
.occupation {
margin-top: 20px;
}
.occupation > p {
font-weight: 500;
margin-top: 18px;
color: var(--third-color);
}
.occupation > select {
color: var(--primary-color);
margin: 0 63px;
}
/* ----------------------
~Interest Header~
---------------------- */
.container4 {
font-size: 13px;
font-family: 'Poppins', sans-serif;
text-align: center;
letter-spacing: 0.4px;
color: var(--fourth-color);
}
/* ----------------------
~Interest~
---------------------- */
.container5 {
font-family: 'Work Sans', sans-serif;
background-color: var(--primary-color);
}
.pastime {
display: flex;
padding: 1em;
justify-content: center;
gap: 2em;
color: white;
}
.interest-input,
.interest-label {
margin: 0.3em 0.2em;
}
/* ----------------------
~Footer~
---------------------- */
.container6 {
display: flex;
flex-direction: row;
width: 700px;
height: 200px;
font-family: 'Poppins', sans-serif;
border-bottom: 1px solid var(--secondary-color);
}
textarea {
width: 300px;
height: 150px;
margin: 2em;
font-size: 13px;
box-sizing: border-box;
border: 1px solid var(--primary-color);
resize: none;
}
.button {
width: 200px;
height: 100px;
margin: 1.75em 2.25em;
font-size: 30px;
background-color: hsla(210, 10%, 35%, 0.3);
color: hsla(33, 50%, 50%, 0.8);
cursor: pointer;
}
.button:hover {
background-color: hsla(33, 50%, 35%, 0.8);
color: hsla(210, 10%, 35%, 0.8);
}
.button:active {
background-color: hsla(33, 50%, 35%, 0.8);
color: hsla(210, 10%, 35%, 0.8);
transform: translateY(4px);
}
This is the CSS
I see what you are saying about the utility classes. I suppose one could just create a library of utility classes and just copy and paste them in to projects as needed.
Seeing as this is just a small survey I think I will stick with the way I wrote the code for now, but I will definitely consider the those classes on my next project.