Skip to content

Instantly share code, notes, and snippets.

@olavxxx

olavxxx/index.html

Last active March 27, 2017 11:09
Show Gist options
  • Save olavxxx/741ca998bb0f945afe5646ff9b32726d to your computer and use it in GitHub Desktop.
Save olavxxx/741ca998bb0f945afe5646ff9b32726d to your computer and use it in GitHub Desktop.
Download ZIP
Added file upload
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Charset -->
<meta charset="UTF-8">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<!-- http://materializecss.com/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Godkjenning av privat husleiekontrakt</h1>
<div class="row center">
<h5 class="header col s12 light">Ved behov for hjelp til &aring; fylle ut skjemaet, kan du m&oslash;te opp ved ....</h5>
</div>
<br><br>
<div class="row">
<form class="col s12">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header active"><i class="material-icons">assignment</i>1. Utleieobjekt og utleier</div>
<div class="collapsible-body">
<div class="row">
<div class="input-field col s6">
<input id="adress_rentobject" type="text" class="validate">
<label for="adress_rentobject">Utleieobjektets addresse*</label>
</div>
<div class="input-field col s6">
<input id="price_rentobject" type="text" class="validate">
<label for="price_rentobject">M&aring;nedsleie*</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Fyll inn utleiers navn her" id="name_landlord" type="text" class="validate">
<label for="name_landlord">Utleiers Navn*</label>
</div>
<div class="input-field col s6">
<input id="phone_landlord" type="text" class="validate">
<label for="phone_landlord">Utleiers Telefonnummer*</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="email_landlord" type="email" class="validate">
<label for="email_landlord">Utleiers E-Post*</label>
</div>
<div class="input-field col s6">
<input id="date_landlord" type="date" class="datepicker">
<label for="date_landlord">Husleiekontrakten starter (dato)*</label>
</div>
</div>
<div class="file-field input-field">
<div class="btn">
<span>Last opp kontrakt</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Last opp kontrakt">
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">assignment_ind</i>2. Din personlige informasjon</div>
<div class="collapsible-body">
<div class="row">
<div class="input-field col s6">
<input placeholder="Fyll inn ditt navn her" id="name_person" type="text" class="validate">
<label for="name_person">Ditt Navn*</label>
</div>
<div class="input-field col s6">
<input id="phone_person" type="text" class="validate">
<label for="phone_person">Ditt Telefonnummer</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="email_person" type="email" class="validate">
<label for="email_person">Din E-Post*</label>
</div>
<div class="input-field col s6">
<input id="dufnr_person" type="text" class="validate">
<label for="dufnr_person">Ditt DUF.nr*</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="bank_person" type="text" class="validate">
<label for="bank_person">Ditt Bankkontonr</label>
</div>
<div class="input-field col s6">
<input id="address_person" type="text" class="validate">
<label for="address_person">Din n&aring;v&aelig;rende adresse / mottak</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<select>
<option value="" disabled selected>Velg ditt kj&oslash;nn</option>
<option value="Kvinne">Kvinne</option>
<option value="Mann">Mann</option>
</select>
<label>Kj&oslash;nn*</label>
</div>
<div class="input-field col s6">
<select>
<option value="" disabled selected>Velg din sivilstatus</option>
<option value="Kvinne">Gift</option>
<option value="Mann">Ugift</option>
</select>
<label>Sivilstatus*</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="children_moving_in_person" type="text" class="validate">
<label for="children_moving_in_person">Antall barn som skal flytte inn i samme bolig med deg nå</label>
</div>
<div class="input-field col s6">
<input id="adult_moving_in_person" type="text" class="validate">
<label for="adult_moving_in_person">Antall voksne som skal flytte inn i samme bolig med deg</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="native_language_person" type="text" class="validate">
<label for="native_language_person">Spr&aring;k (ditt morsm&aring;l)*</label>
</div>
<div class="input-field col s6">
<select>
<option value="" disabled selected>Velg i listen</option>
<option value="Ingen">Ingen</option>
<option value="Engelsk">Engelsk</option>
<option value="Norsk">Norsk</option>
<option value="Norsk">Norsk og Engelsk</option>
</select>
<label>Spr&aring;k ut over morsm&aring;l*</label>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">assignment_late</i>3. Har du en kontaktperson (som ikke er utleieren)?</div>
<div class="collapsible-body">
<div class="row">
<div class="input-field col s12">
Vennligst oppgi navn til den som hjelper til med din søknad.
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Fyll inn ditt navn her" id="name_contactperson" type="text" class="validate">
<label for="name_contactperson">Navn</label>
</div>
<div class="input-field col s6">
<input id="phone_contactperson" type="text" class="validate">
<label for="phone_contactperson">Telefonnummer</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="email_contactperson" type="email" class="validate">
<label for="email_contactperson">E-Post</label>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">send</i>4. Send inn skjema</div>
<div class="collapsible-body">
<div class="row">
<div class="input-field col s12">
<textarea id="textareaOtherInformation" class="materialize-textarea"></textarea>
<label for="textareaOtherInformation">Har du andre opplysninger som kan være viktige for saksbehandlingen?</label>
</div>
</div>
<a class="waves-effect waves-light btn">Send skjema<i class="material-icons right">send</i></a>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container">
<div class="section">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 2 // Creates a dropdown of 15 years to control year
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment