update,
This commit is contained in:
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (1).png
(Stored with Git LFS)
Normal file
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (1).png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (2).png
(Stored with Git LFS)
Normal file
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (2).png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (3).png
(Stored with Git LFS)
Normal file
BIN
macylee2486/task2/html_ws/draft_0001/127.0.0.1_8080_a3_draft1.html (3).png
(Stored with Git LFS)
Normal file
Binary file not shown.
34
macylee2486/task2/html_ws/draft_0001/A1_draft1.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/A1_draft1.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A1</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A1 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A1 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A1" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A1">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet" style="margin: 0; box-shadow: unset;">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A1 document. 11111s</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/A1_head.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/A1_head.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A1</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A1 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A1 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A1" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A1">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet" style="margin: 0; box-shadow: unset;">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<div>helloworld</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
BIN
macylee2486/task2/html_ws/draft_0001/a1_test.pdf
Normal file
BIN
macylee2486/task2/html_ws/draft_0001/a1_test.pdf
Normal file
Binary file not shown.
34
macylee2486/task2/html_ws/draft_0001/a3-landscape.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a3-landscape.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A3 landscape</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A3 landscape }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A3 landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A3 document (landscape).</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a3.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a3.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A3</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A3 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A3">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A3 document.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a3_draft1.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a3_draft1.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A3</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A3 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A3">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet" style="margin: 0; box-shadow: unset;">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A3 document. 11111s</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a4-landscape.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a4-landscape.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A4 landscape</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A4 landscape }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A4 landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A4 document (landscape).</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a4.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a4.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A4</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A4 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A4">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A4 document.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a5-landscape.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a5-landscape.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A5 landscape</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A5 landscape }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A5 landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A5 document (landscape).</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/a5.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/a5.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A5</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A5 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A5">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an A5 document.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/legal-landscape.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/legal-landscape.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Legal landscape</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: legal landscape }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="legal landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an legal-size document (landscape).</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/legal.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/legal.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Legal</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: legal }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="legal">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an legal-size document.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/letter-landscape.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/letter-landscape.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Letter landscape</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: letter landscape }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="letter landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an letter-size document (landscape).</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
34
macylee2486/task2/html_ws/draft_0001/letter.html
Normal file
34
macylee2486/task2/html_ws/draft_0001/letter.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Letter</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: letter }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="letter">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is an letter-size document.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
42
macylee2486/task2/html_ws/draft_0001/multiple-sheets.html
Normal file
42
macylee2486/task2/html_ws/draft_0001/multiple-sheets.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Multiple Sheets</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A4 }</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A4">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is the first sheet.</article>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- The second sheet -->
|
||||
<section class="sheet padding-10mm">
|
||||
|
||||
<!-- Write HTML just like a web page -->
|
||||
<article>This is the second sheet.</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
75
macylee2486/task2/html_ws/draft_0001/receipt.html
Normal file
75
macylee2486/task2/html_ws/draft_0001/receipt.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Receipt</title>
|
||||
|
||||
<!-- Normalize or reset CSS with your favorite library -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
|
||||
|
||||
<!-- Load paper.css for happy printing -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
|
||||
|
||||
<!-- Set page size here: A5, A4 or A3 -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<style>@page { size: A5 landscape }</style>
|
||||
|
||||
<!-- Custom styles for this document -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
body { font-family: serif }
|
||||
h1 { font-family: 'Tangerine', cursive; font-size: 40pt; line-height: 18mm}
|
||||
h2, h3 { font-family: 'Tangerine', cursive; font-size: 24pt; line-height: 7mm }
|
||||
h4 { font-size: 32pt; line-height: 14mm }
|
||||
h2 + p { font-size: 18pt; line-height: 7mm }
|
||||
h3 + p { font-size: 14pt; line-height: 7mm }
|
||||
li { font-size: 11pt; line-height: 5mm }
|
||||
|
||||
h1 { margin: 0 }
|
||||
h1 + ul { margin: 2mm 0 5mm }
|
||||
h2, h3 { margin: 0 3mm 3mm 0; float: left }
|
||||
h2 + p,
|
||||
h3 + p { margin: 0 0 3mm 50mm }
|
||||
h4 { margin: 2mm 0 0 50mm; border-bottom: 2px solid black }
|
||||
h4 + ul { margin: 5mm 0 0 50mm }
|
||||
article { border: 4px double black; padding: 5mm 10mm; border-radius: 3mm }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- Set "A5", "A4" or "A3" for class name -->
|
||||
<!-- Set also "landscape" if you need -->
|
||||
<body class="A5 landscape">
|
||||
|
||||
<!-- Each sheet element should have the class "sheet" -->
|
||||
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
|
||||
<section class="sheet padding-20mm">
|
||||
|
||||
<h1>OpenSource Cafe, Shimokitazawa</h1>
|
||||
<ul>
|
||||
<li>6-11-14-G1 Daita, Setagaya-ku, Tokyo, Japan</li>
|
||||
<li>TEL: +81-70-54315221</li>
|
||||
<li>http://www.osscafe.net</li>
|
||||
</ul>
|
||||
|
||||
<article>
|
||||
<h2>Received from:</h2>
|
||||
<p>John Doe</p>
|
||||
|
||||
<h3>For:</h3>
|
||||
<p>Coworking-space fee</p>
|
||||
|
||||
<h4>¥ 1,000-</h4>
|
||||
<ul>
|
||||
<li>Tax: included</li>
|
||||
<li>Paid by: cash</li>
|
||||
<li>No. 00000</li>
|
||||
<li>Oct 10, 2015</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
50
macylee2486/task2/html_ws/draft_0001/style.css
Normal file
50
macylee2486/task2/html_ws/draft_0001/style.css
Normal file
@@ -0,0 +1,50 @@
|
||||
@page { margin: 0 }
|
||||
body { margin: 0 }
|
||||
.sheet {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
/** Paper sizes **/
|
||||
body.A1 .sheet { width: 594mm; height: 841mm }
|
||||
body.A3 .sheet { width: 297mm; height: 419mm }
|
||||
body.A3.landscape .sheet { width: 420mm; height: 296mm }
|
||||
body.A4 .sheet { width: 210mm; height: 296mm }
|
||||
body.A4.landscape .sheet { width: 297mm; height: 209mm }
|
||||
body.A5 .sheet { width: 148mm; height: 209mm }
|
||||
body.A5.landscape .sheet { width: 210mm; height: 147mm }
|
||||
body.letter .sheet { width: 216mm; height: 279mm }
|
||||
body.letter.landscape .sheet { width: 280mm; height: 215mm }
|
||||
body.legal .sheet { width: 216mm; height: 356mm }
|
||||
body.legal.landscape .sheet { width: 357mm; height: 215mm }
|
||||
|
||||
/** Padding area **/
|
||||
.sheet.padding-10mm { padding: 10mm }
|
||||
.sheet.padding-15mm { padding: 15mm }
|
||||
.sheet.padding-20mm { padding: 20mm }
|
||||
.sheet.padding-25mm { padding: 25mm }
|
||||
|
||||
/** For screen preview **/
|
||||
@media screen {
|
||||
body { background: #e0e0e0 }
|
||||
.sheet {
|
||||
background: white;
|
||||
box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
|
||||
margin: 5mm auto;
|
||||
}
|
||||
}
|
||||
|
||||
/** Fix for Chrome issue #273306 **/
|
||||
@media print {
|
||||
body.A1 { width: 594mm }
|
||||
body.A3.landscape { width: 420mm }
|
||||
body.A3, body.A4.landscape { width: 297mm }
|
||||
body.A4, body.A5.landscape { width: 210mm }
|
||||
body.A5 { width: 148mm }
|
||||
body.letter, body.legal { width: 216mm }
|
||||
body.letter.landscape { width: 280mm }
|
||||
body.legal.landscape { width: 357mm }
|
||||
}
|
BIN
macylee2486/task2/html_ws/draft_0001/test.png
(Stored with Git LFS)
Normal file
BIN
macylee2486/task2/html_ws/draft_0001/test.png
(Stored with Git LFS)
Normal file
Binary file not shown.
Reference in New Issue
Block a user