How can I have 2 different styles for 2 media queries while both are the same max width but 1 has a max heightHow do I retrieve an HTML element's actual width and height?How can I transition height: 0; to height: auto; using CSS?How can I remove a style added with .css() function?Vertical alignment of elements overlapping in IEGridView Lines Not Showing up in IECSS media queries: max-width OR max-heightHow can I make Bootstrap columns all the same height?Bootstrap 3 - background-color issueCannot display HTML stringTextarea too large for page?
can i play a electric guitar through a bass amp?
How could an uplifted falcon's brain work?
What are these boxed doors outside store fronts in New York?
Why not use SQL instead of GraphQL?
Is a tag line useful on a cover?
Theorems that impeded progress
Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)
Prove that NP is closed under karp reduction?
Font hinting is lost in Chrome-like browsers (for some languages )
Is it unprofessional to ask if a job posting on GlassDoor is real?
Why are electrically insulating heatsinks so rare? Is it just cost?
What's the output of a record cartridge playing an out-of-speed record
What is the word for reserving something for yourself before others do?
TGV timetables / schedules?
Risk of getting Chronic Wasting Disease (CWD) in the United States?
What defenses are there against being summoned by the Gate spell?
Can a Warlock become Neutral Good?
What do three bars across the stem of a note mean?
LaTeX closing $ signs makes cursor jump
Has the BBC provided arguments for saying Brexit being cancelled is unlikely?
Python: next in for loop
Windows 98 hangs after entering password on fresh install
Why did Neo believe he could trust the machine when he asked for peace?
Why do falling prices hurt debtors?
How can I have 2 different styles for 2 media queries while both are the same max width but 1 has a max height
How do I retrieve an HTML element's actual width and height?How can I transition height: 0; to height: auto; using CSS?How can I remove a style added with .css() function?Vertical alignment of elements overlapping in IEGridView Lines Not Showing up in IECSS media queries: max-width OR max-heightHow can I make Bootstrap columns all the same height?Bootstrap 3 - background-color issueCannot display HTML stringTextarea too large for page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
Hey Guys I Was setting a media query with a max width of 715px. I only wanted to change the background position of the header because the background image wasn't centered. So I moved it background-position: -300px; but now when I switch to the galaxy S5 for example the screen width is 640px so it will catch the styles from the 715px query, but the height is 360px so the image goes halfway off the screen. I thought I could fix this using
`@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
`
and set the image position back to normal just when it has that width plus the height, this doesn't work though? Any ideas?
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html css
asked Mar 9 at 2:37
spabsaspabsa
395
add a comment |
0
Hey Guys I Was setting a media query with a max width of 715px. I only wanted to change the background position of the header because the background image wasn't centered. So I moved it background-position: -300px; but now when I switch to the galaxy S5 for example the screen width is 640px so it will catch the styles from the 715px query, but the height is 360px so the image goes halfway off the screen. I thought I could fix this using
`@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
`
and set the image position back to normal just when it has that width plus the height, this doesn't work though? Any ideas?
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html css
asked Mar 9 at 2:37
spabsaspabsa
395
1
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
1
Try@media screen and (max-width: 640px and max-height: 360px)
– snazzybouche
Mar 9 at 2:51
add a comment |
0
0
0
Hey Guys I Was setting a media query with a max width of 715px. I only wanted to change the background position of the header because the background image wasn't centered. So I moved it background-position: -300px; but now when I switch to the galaxy S5 for example the screen width is 640px so it will catch the styles from the 715px query, but the height is 360px so the image goes halfway off the screen. I thought I could fix this using
`@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
`
and set the image position back to normal just when it has that width plus the height, this doesn't work though? Any ideas?
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html css
asked Mar 9 at 2:37
spabsaspabsa
395
Hey Guys I Was setting a media query with a max width of 715px. I only wanted to change the background position of the header because the background image wasn't centered. So I moved it background-position: -300px; but now when I switch to the galaxy S5 for example the screen width is 640px so it will catch the styles from the 715px query, but the height is 360px so the image goes halfway off the screen. I thought I could fix this using
`@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
`
and set the image position back to normal just when it has that width plus the height, this doesn't work though? Any ideas?
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) , screen and (max-height: 360px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html css
html css
asked Mar 9 at 2:37
spabsaspabsa
395
asked Mar 9 at 2:37
spabsaspabsa
395
asked Mar 9 at 2:37
spabsaspabsa
395
asked Mar 9 at 2:37
spabsaspabsa
395
asked Mar 9 at 2:37
spabsaspabsa
395
395
1
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
1
Try@media screen and (max-width: 640px and max-height: 360px)
– snazzybouche
Mar 9 at 2:51
add a comment |
1
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
1
Try@media screen and (max-width: 640px and max-height: 360px)
– snazzybouche
Mar 9 at 2:51
1
1
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
1
1
Try
@media screen and (max-width: 640px and max-height: 360px)– snazzybouche
Mar 9 at 2:51
Try
@media screen and (max-width: 640px and max-height: 360px)– snazzybouche
Mar 9 at 2:51
add a comment |
2 Answers
2
active
oldest
votes
1
Add both media query using this css
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
add a comment |
0
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Mar 9 at 3:19
NootakuNootaku
245
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073480%2fhow-can-i-have-2-different-styles-for-2-media-queries-while-both-are-the-same-ma%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Add both media query using this css
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
add a comment |
1
Add both media query using this css
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
add a comment |
1
1
1
Add both media query using this css
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
Add both media query using this css
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>html, body
margin: 0;
padding: 0;
/*---HEADER---*/
header
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
.careers-wrapper
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
header h1
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
/*---NAV---*/
nav
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
li a
text-decoration-line: none;
color: rgba(102,102,102,0.75);
ul
margin-right: 30px;
margin-top: 25px;
li
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
li a:hover
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
.after:after
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
.logo
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
/*---FORM---*/
form
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
.form h2
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.form h2:after
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
.form h2:before
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
.form .row
margin: 20px;
display: flex;
label
color: black;
label, input
font-size: 1.3rem;
font-family: 'Rajdhani';
.label
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
.middle
margin-left: 15px;
margin-right: 15px;
.row-1 input, .row-3 input
flex-basis: 33.33%;
.row-2 input
width: 100%;
.row-4
justify-content: space-between;
.row-4 input, .row-4 .label
flex-basis: 24%;
.row-5
flex-direction: column;
.radio
margin-top: 10px;
.row-6
justify-content: space-between;
.row-6 input, .row-6 .label
flex-basis: 24%;
.row-7
justify-content: space-between;
.row-7 .col
flex-basis: 50%;
.row-8
justify-content: space-between;
.row-8 .col
flex-basis: 50%;
.crime-textarea
margin-top: 10px;
display: none;
resize: none;
#crime-yes:checked ~ textarea
display: block;
.row-9
justify-content: space-between;
.row-9 .label
flex-basis: 24%;
.row-9 input
margin-left: 15px;
flex-grow: 1;
.row-10
justify-content: space-between;
.row-10 input, .row-10 .label
flex-basis: 24%;
.row-11
justify-content: space-between;
.row-11 input, .row-11 .label
flex-basis: 24%;
.row-12
justify-content: space-between;
.row-12 input, .row-12 .label
flex-basis: 24%;
.row-13
justify-content: space-between;
.row-13 input, .row-13 .label
flex-basis: 24%;
h3
font-family: 'Rajdhani';
text-align: center;
/*---TABLE---*/
table
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
thead tr
background-color: rgba(102, 102, 102, 0.3);
color: black;
thead th
font-size: 1.3rem;
font-family: 'Rajdhani';
th td
margin-right: 10px;
margin-left: 10px;
tbody input
width: 100%;
#submit
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
#submit:hover
cursor: pointer;
background-color: #cc0000;
/*---FOOTER---*/
.footer .wrapper
display: flex;
.footer div
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
.footer h1
font-size: 2rem;
margin-top: 15px;
.footer .inner
margin-left: 55px;
.social .inner
margin-left: 45px;
.contact .inner
margin-left: 35px;
.footer .inner:before
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
.footer h1 span
display: inline;
position: relative;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
.wrap:before
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
.links a
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
.links a:hover
color: red;
.contact p
position: relative;
top: -10px;
.social i
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.social i:hover
color: red;
cursor: pointer;
#msg
margin-top: -15px;
.footer-textarea
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
.footer button
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
button:hover
cursor: pointer;
color: red;
.dark
color: red;
.copyright
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
@media screen and (max-width: 1440px)
/*---FOOTER---*/
.footer button
margin-left: 16.5%;
/*---TABLET-LARGE---*/
@media screen and (max-width: 1024px)
/*---NAV---*/
.logo
font-size: 5rem;
nav li
font-size: 2.5rem;
/*---MAIN---*/
header
background-position: -700px;
/*---FOOTER---*/
.footer .inner
margin-left: 30px;
.footer-textarea
width: 88%;
.footer button
margin-right: 10.25%;
@media screen and (max-width: 823px)
/*---MAIN---*/
header, .careers-wrapper
height: 65vh;
.label
font-size: 1rem;
padding: 0;
@media screen and (max-width: 812px)
/*---NAV---*/
nav li
font-size: 1.7rem;
.logo
font-size: 2.7rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
label
font-size: 1rem;
/*---FOOTER---*/
.footer button
margin-left: 8.5%;
.contact .inner
margin-right: 20px;
@media screen and (max-width: 768px)
/*---NAV---*/
nav li
font-size: 1.6rem;
.logo
font-size: 3rem;
/*---MAIN---*/
header
background-position: -600px;
header, .careers-wrapper
height: 65vh;
.row-1 input, .row-2 input, .row-3 input
font-size: 1.2rem;
/*---FOOTER---*/
.footer button
margin-left: 7.4%;
@media screen and (max-width: 731px)
/*---MAIN---*/
header
background-position: 0px;
/*---FOOTER---*/
.footer button
margin-left: 6%;
.contact .inner p
margin: 5px;
/*------LANDSCAPE-MODE-MOBILE------*/
@media screen and (max-width: 715px)
/*---NAV---*/
nav ul
padding-left: 0;
margin: 0;
nav li
font-size: 1.4rem;
nav .logo
font-size: 2.5rem;
/*---MAIN---*/
header, .careers-wrapper
height: 100vh;
header
background-position: -300px;
form
margin-left: 10px;
margin-right: 10px;
.row
flex-direction: column;
.middle
margin: 0;
.row-1 input, .row-3 input
margin-top: 5px;
margin-bottom: 5px;
.row-4 input, .row-6 input
margin-bottom: 7px;
.row-9 input
margin-left: 0;
#submit
width: 90%;
/*---FOOTER---*/
.links a
font-size: 1.1rem;
top: -13px;
.contact .inner
margin-right: 15px;
.contact p
margin: 5px;
.footer-textarea
position: relative;
top: -5px;
width: 90.5%;
.footer button
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
@media screen and (max-width: 640px) and (min-height: 320px)
header
background-position: 0px;
@media screen and (max-width: 586px)
/*---MAIN---*/
header h1
font-size: 3.5rem;
/*---FOOTER---*/
.footer .wrapper
display: flex;
flex-direction: column;
.footer div
margin: 0;
.footer h1
font-size: 2rem;
margin-top: 10px;
.footer .inner
margin: 0;
.footer .inner:before
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
.footer h1 span:after
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
.social .inner
position: relative;
top: -10px;
.links a
margin-left: 5px;
.social h1
margin-bottom: 10px;
#msg
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
.footer button
right: 9.25%;
margin-top: 0.2px;
.social i
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
.footer-textarea
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
.contact p
margin: 5px;
font-size: 1.2rem;
.copyright
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
.copyright span
color: white;
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
answered Mar 9 at 3:02
Hiren VaghasiyaHiren Vaghasiya
3,8551621
3,8551621
add a comment |
add a comment |
0
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Mar 9 at 3:19
NootakuNootaku
245
add a comment |
0
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Mar 9 at 3:19
NootakuNootaku
245
add a comment |
0
0
0
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Mar 9 at 3:19
NootakuNootaku
245
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Mar 9 at 3:19
NootakuNootaku
245
edited Mar 9 at 3:28
answered Mar 9 at 3:19
NootakuNootaku
245
answered Mar 9 at 3:19
NootakuNootaku
245
answered Mar 9 at 3:19
NootakuNootaku
245
245
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073480%2fhow-can-i-have-2-different-styles-for-2-media-queries-while-both-are-the-same-ma%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
We don't want all your code. We only want the relevant code that will help us solve your problem. Please see Minimum, Complete, and Verifiable Example
– Aniket G
Mar 9 at 2:41
1
Try
@media screen and (max-width: 640px and max-height: 360px)– snazzybouche
Mar 9 at 2:51