Page 79 - COPA VOL II of II - TP -Punjabi
P. 79
cursor: pointer; <label for=”fname”>First Name</label>
right; </div>
} <div class=”col-75”>
input[type=submit]:hover { <input type=”text” id=”fname”
background-color: #45a049; placeholder=”Your name..”>
} </div>
.container { </div>
border-radius: 5px; <div class=”row”>
background-color: #f2f2f2; <div class=”col-25”>
padding: 20px; <label for=”lname”>Last Name</label>
} </div>
.col-25 { <div class=”col-75”>
left; <input t ype=”text” id=”lname” name=”lastname”
width: 25%; placeholder=”Your last name..”>
margin-top: 6px; </div>
} </div>
.col-75 { <div class=”row”>
left; <div class=”col-25”>
width: 75%; <label for=”country”>Country</label>
margin-top: 6px; </div>
} <div class=”col-75”>
/* Clear after the columns <select id=”country” name=”country”>
.row:after { <option value=”australia”>Australia</option>
content: “”; <option value=”canada”>Canada</option>
display: table; <option value=”usa”>USA</option>
clear: both; </select>
} </div>
/* Responsive l ayout - w hen t he screen i s less t han </div>
600px wide, make the two columns stack on top of <div class=”row”>
each other instead of next to each other */ <div class=”col-25”>
@media screen and (max-width: 600px) { <label for=”subject”>Subject</label>
.col-25, .col-75, input[type=submit] { </div>
width: 100%; <div class=”col-75”>
< textarea i d=”subject” name=”subject”
margin-top: 0; placeholder=”Write something..”
} style=”height:100px”></textarea>
} </div>
</style> </div>
</head> <br>
<body> <div class=”row”>
<h2>Responsive Form</h2> <input type=”submit” value=”Submit”>
<p>Resizethe browser window to see </div>
When the screen is less than 600px wide, make the </form>
two columns stack on top of each other instead of </div>
next to each other.</p> </body>
<div class=”container”> </html>
<form action=”/action_page.php”>
<div class=”row”>
<div class=”col-25”>
IT ਅਤੇ ITES : COPA (NSQF - ਸੰਸ਼ੋਧਭਤ 2022) - ਅਿਭਆਸ 1.31.114 65
