IT3 - Opdracht 03 - FreshCotton
How do I make an it3 - opdracht 03 - freshcotton?
What is a it3 - opdracht 03 - freshcotton? How do you make a it3 - opdracht 03 - freshcotton? This script and codes were developed by Samuel on 10 November 2022, Thursday.
IT3 - Opdracht 03 - FreshCotton - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT3 - Opdracht 03 - FreshCotton</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1><span>FreshCotton</span></h1>
</header>
<main> <form id="comments_form" action="/comments/" method="post"> <div class="fieldset-wrapper"> <fieldset> <legend>Gegevens</legend> <p class="field field-text"> <label for="comment-author">Voornaam</label> <input name="comment-author" id="comment-author" placeholder="John" type="text" /> </p> <p class="field field-text"> <label for="comment-surname">Achternaam</label> <input name="comment-surname" id="comment-surname" placeholder="Doe" type="text" /> </p> <p class="field field-text"> <label for="comment-email">Email</label> <input name="comment-email" id="comment-email" placeholder="[email protected]" type="email" /> </p> <p class="field field-text"> <label for="comment-birth">Geboortedatum</label> <input name="comment-birth" id="comment-birth" type="date" max="31-12-1998" /> </p> <p class="field field-text"> <label for="comment-phone">Telefoonnummer</label> <input name="comment-phone" id="comment-phone" placeholder="+32493 72 89 33" type="tel" /> </p> <p class="field field-text"> <label for="comment-password">Wachtwoord</label> <input name="comment-password" id="comment-password" type="password" /> </p> </fieldset> </div> <div class="fieldset-wrapper"> <fieldset> <legend>Adres</legend> <p class="field field-text"> <label for="comment-street">Straat</label> <input name="comment-street" id="comment-street" placeholder="110th street" type="text" /> </p> <p class="field field-text"> <label for="comment-number">Nr.</label> <input name="comment-number" id="comment-number" placeholder="13" type="number" /> </p> <p class="field field-text"> <label for="comment-addition">Addition</label> <input name="comment-addition" id="comment-addition" placeholder="1" type="number" /> </p> <p class="field field-text"> <label for="comment-zip">Postcode</label> <input name="comment-zip" id="comment-zip" placeholder="10000" type="number" /> </p> <p class="field field-text"> <label for="comment-city">Stad</label> <input name="comment-city" id="comment-city" placeholder="New York" type="text" /> </p> <p class="field field-text"> <label for="comment-country">Land</label> <select name="comment-country" id="comment-country"> <option>België</option> <option>Nederland</option> <option>United Kingdom</option> </select> </p> <p class="field field-text"> <input name="submit" id="submit" type="submit" /> </p> </fieldset> </div> </form>
</main>
</body>
</html>
IT3 - Opdracht 03 - FreshCotton - Script Codes CSS Codes
/* html & body */
html, body { height: 100%;
}
body { background-color: #fff; color: #000; font-family: 'Helvetica Neue', sans-serif; font-size: 62.5%;
}
/* header */
h1 { background: url('https://s1.freshcotton.com/images/logoheader.svg') center center no-repeat; background-size: contain; height: 55px; margin: 25px auto; width: 318px;
}
h1 span { display: none;
}
/* form */
form { margin: 0 auto; width: 50%;
}
.fieldset-wrapper { clear: both; float: left; padding: 2%; width: 100%;
}
:root .fieldset-wrapper { border: 0;
}
legend { font-size: 1.4em; font-weight: bold; margin-bottom: 20px;
}
input { font: inherit; font-size: 1.2em; font-weight: 200; letter-spacing: 0.04em;
}
.field-text { float: left; margin: 0 20px 20px 0; width: 46%;
}
.field-text:nth-child(odd) { float: right;
}
.field-text label { cursor: pointer;
}
.field-text label, .field-text input { box-sizing: border-box; margin-top: 8px; width: 100%;
}
.field-text input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px #000 solid; padding: 6px; -webkit-transition: all .6s; transition: all .6s;
}
.field-text input[type="date"] { padding: 4.5px;
}
.field-text input[type="submit"] { background-color: #000; border: none; color: #fff; height: 30px; width: 90px; -webkit-transition: all .6s; transition: all .6s;
}
.field-text input[type="submit"]:hover { background-color: #19d4cd;
}
.field-text select { background-color: #000; border: none; color: #fff; height: 30px; margin: 9px 0 0 0; -webkit-transition: all .6s; transition: all .6s; width: 100%;
}
.field-text select:focus { background-color: #19d4cd; outline: 0;
}
.field-text input:focus { border-color: #19d4cd; outline: 0;
}
::-webkit-input-placeholder { color: #ccc; font-weight: 100;
}
::-moz-placeholder { color: #ccc; font-weight: 100;
}
:-ms-input-placeholder { color: #ccc; font-weight: 100;
}
.field-text :invalid { border-color: #c91c36;
}
@media screen and (max-width: 999px) { .field-text { width: 45%; }
}
@media screen and (max-width: 799px) { h1 { width: 220px; } .field-text { margin-right: 4%; width: 96%; }
}
Developer | Samuel |
Username | SamuelVDP |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,754 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CMT3 - Opdracht 07 - Flickity | 3,349 Kb |
IT2 - Vault | 2,673 Kb |
IT3 - Opdracht 05 - Battery API | 3,894 Kb |
CMT3 - Herhalingsoefening 02 | 2,246 Kb |
IT3 - Opdracht 09 - RellaxJS | 4,331 Kb |
IT3 - Opdracht 06 - PureCSS | 5,220 Kb |
IT3 - Opdracht 04 - Responsive Weekplanner | 3,898 Kb |
IT3 - Opdracht 01 - Drop The Needle | 6,566 Kb |
CMT3 - Herhalingsoefening 01 | 2,366 Kb |
CMT3 - Opdracht 06 - Isotope | 3,686 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Tab panels | Accessibility | 0 Kb |
Three js | Paulq | 2,353 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Flexbox slider | Rendro | 3,459 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!