finished hw1
This commit is contained in:
parent
49f86c8a5b
commit
9c1c7ad12c
|
|
@ -26,26 +26,29 @@
|
|||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="3d_print_service.html">3D prints</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h2>3D print work order form</h2>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Customer details</legend>
|
||||
<!-- note that I am not using fieldset / legend here since the implementation of grid
|
||||
in chrome is bugged: https://bugs.chromium.org/p/chromium/issues/detail?id=854565 -->
|
||||
<div class="fieldset">
|
||||
<h3>Customer details</h3>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" name="username" maxlength="100" placeholder="Username" required>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" maxlength="100" placeholder="Email" required>
|
||||
<label for="address">Address</label>
|
||||
<textarea name="address" maxlength="500" placeholder="Address" required></textarea>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Work order</legend>
|
||||
</div>
|
||||
<div class="fieldset">
|
||||
<h3>Work order</h3>
|
||||
<label for="file">File to print (OBJ)</label>
|
||||
<input type="file" name="file" accept=".obj" required>
|
||||
<label for="urgent">Urgency</label>
|
||||
<input type="checkbox" name="urgency">
|
||||
<label for="urgent">Urgent</label>
|
||||
<input type="checkbox" name="urgent">
|
||||
<label for="copies"># of copies</label>
|
||||
<div class="range-10">
|
||||
<div>1</div>
|
||||
|
|
@ -58,9 +61,9 @@
|
|||
<div>8</div>
|
||||
<div>9</div>
|
||||
<div>10</div>
|
||||
<input type="range" name="copies" min="1" max="10" step="1" list="tickmarks">
|
||||
<input type="range" name="copies" min="1" max="10" step="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<button type="submit">Send the order</button>
|
||||
</form>
|
||||
</main>
|
||||
|
|
@ -91,7 +94,7 @@
|
|||
content="CH" about="[_:publisher]">
|
||||
Switzerland</span>.
|
||||
</p>
|
||||
<p>Page last updated on ####-##-##</p>
|
||||
<p>Page last updated on 2019-09-22</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="3d_print_service.html">3D prints</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
|
|
@ -308,7 +309,7 @@ exit $?</pre>
|
|||
the last one with systemd. Let's give a look to the service file:
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figure class="right">
|
||||
<figcaption>The <code>btkbd.service</code> file</figcaption>
|
||||
<pre>[Unit]
|
||||
Description=systemd Unit to automatically start a \
|
||||
|
|
@ -387,7 +388,7 @@ WantedBy=bluetooth.target</pre>
|
|||
content="CH" about="[_:publisher]">
|
||||
Switzerland</span>.
|
||||
</p>
|
||||
<p>Page last updated on ####-##-##</p>
|
||||
<p>Page last updated on 2019-09-22</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,42 +8,47 @@ input::placeholder, textarea::placeholder {
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
.fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: 7em 1fr;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
grid-gap: 1rem;
|
||||
border: none;
|
||||
margin: .5rem 0;
|
||||
margin: .5rem auto;
|
||||
padding: .5rem;
|
||||
background: #eee;
|
||||
border-radius: .5rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form .fieldset {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
fieldset {
|
||||
.fieldset {
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
position: relative;
|
||||
top: 10%;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: .25rem .5rem;
|
||||
border-radius: .25rem;
|
||||
.fieldset h3 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
.fieldset label {
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
fieldset label::after {
|
||||
.fieldset label::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
fieldset input, fieldset textarea {
|
||||
.fieldset input, .fieldset textarea {
|
||||
padding: .5rem;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
font-size: .85rem;
|
||||
|
|
@ -51,11 +56,11 @@ fieldset input, fieldset textarea {
|
|||
background: white;
|
||||
}
|
||||
|
||||
fieldset textarea[name="address"] {
|
||||
.fieldset textarea[name="address"] {
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
fieldset input[type="checkbox"] {
|
||||
.fieldset input[type="checkbox"] {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
max-width: 1em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
/* vim: set ts=2 sw=2 et tw=80 */
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
|
||||
grid-gap: .5rem;
|
||||
align-items: center;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: calc(100vw - 20rem);
|
||||
}
|
||||
|
||||
main a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main h2, main h4 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
min-width: 80px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
|
@ -7,8 +7,9 @@ body {
|
|||
margin: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: max-content 1fr max-content;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
|
|
@ -18,35 +19,18 @@ header, footer {
|
|||
background: rgba(255,0,0,0.5);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
nav, aside {
|
||||
flex: 0 1 10rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 2;
|
||||
max-width: 80%;
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 10rem 1fr 10rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
nav, aside {
|
||||
|
|
@ -165,7 +149,7 @@ main section {
|
|||
|
||||
footer {
|
||||
display: flex;
|
||||
align-itemss: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<!-- vim: set ts=2 sw=2 et tw=120: -->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>maggicl - Atelier INF (gallery)</title>
|
||||
<meta name="author" content="Claudio Maggioni (maggicl@usi.ch)">
|
||||
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Fira+Mono&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
<link href="css/gallery.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><code>maggicl</code> - Atelier INF</h1>
|
||||
</header>
|
||||
<div class="content">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="3d_print_service.html">3D prints</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h2>Gallery</h2>
|
||||
<h4>Images from <a href="https://sbb.ch">sbb.ch</a> and
|
||||
<a href="https://commons.wikimedia.org">Wikimedia commons</a></h4>
|
||||
<a href="img/gallery/astoro.jpg">
|
||||
<img src="img/gallery/astoro.jpg" alt="astoro">
|
||||
</a>
|
||||
<a href="img/gallery/giruno.jpg">
|
||||
<img src="img/gallery/giruno.jpg" alt="giruno">
|
||||
</a>
|
||||
<a href="img/gallery/flirt.jpg">
|
||||
<img src="img/gallery/flirt.jpg" alt="flirt">
|
||||
</a>
|
||||
<a href="img/gallery/dstock.jpg">
|
||||
<img src="img/gallery/dstock.jpg" alt="dstock">
|
||||
</a>
|
||||
<a href="img/gallery/astoro2.jpg">
|
||||
<img src="img/gallery/astoro2.jpg" alt="giruno2">
|
||||
</a>
|
||||
<a href="img/gallery/regio.jpg">
|
||||
<img src="img/gallery/regio.jpg" alt="regio">
|
||||
</a>
|
||||
<a href="img/gallery/dtz.jpg">
|
||||
<img src="img/gallery/dtz.jpg" alt="dtz">
|
||||
</a>
|
||||
<a href="img/gallery/domino.jpg">
|
||||
<img src="img/gallery/domino.jpg" alt="domino">
|
||||
</a>
|
||||
</main>
|
||||
<aside>
|
||||
<ul>
|
||||
<li><a href="https://reddit.com/u/Praticamentetilde">
|
||||
<i class="fa fa-reddit" aria-hidden="true"></i> Praticamentetilde
|
||||
</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<footer xmlns:dct="http://purl.org/dc/terms/"
|
||||
xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#">
|
||||
<a rel="license"
|
||||
href="http://creativecommons.org/publicdodiv/zero/1.0/">
|
||||
<img width="88" height="31"
|
||||
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
|
||||
alt="CC0" />
|
||||
</a>
|
||||
<section>
|
||||
<p>To the extent possible under law,
|
||||
<span resource="[_:publisher]" rel="dct:publisher">
|
||||
<span property="dct:title">Claudio Maggioni</span></span>
|
||||
has waived all copyright and related or neighboring rights to
|
||||
<span property="dct:title">SA3 AS1 Website</span>.
|
||||
This work is published from:
|
||||
<span property="vcard:Country" datatype="dct:ISO3166"
|
||||
content="CH" about="[_:publisher]">
|
||||
Switzerland</span>.
|
||||
</p>
|
||||
<p>Page last updated on 2019-09-22</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
|
|
@ -25,6 +25,7 @@
|
|||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="3d_print_service.html">3D prints</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
|
|
@ -102,7 +103,7 @@
|
|||
content="CH" about="[_:publisher]">
|
||||
Switzerland</span>.
|
||||
</p>
|
||||
<p>Page last updated on ####-##-##</p>
|
||||
<p>Page last updated on 2019-09-22</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
Reference in New Issue