Creating view [continue]
This commit is contained in:
Gregorio Chiko Putra
parent
530a73ed34
commit
efe0a14018
6948
public/css/main.css
vendored
6948
public/css/main.css
vendored
File diff suppressed because it is too large
Load Diff
4
public/js/app.js
vendored
4
public/js/app.js
vendored
@ -115,8 +115,8 @@
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
__webpack_require__(/*! /home/gregorio/Documents/works/codes/smk-kelulusan/resources/js/app.js */"./resources/js/app.js");
|
||||
module.exports = __webpack_require__(/*! /home/gregorio/Documents/works/codes/smk-kelulusan/resources/sass/main.scss */"./resources/sass/main.scss");
|
||||
__webpack_require__(/*! /home/gregorio/Documents/codes/smk-kelulusan/resources/js/app.js */"./resources/js/app.js");
|
||||
module.exports = __webpack_require__(/*! /home/gregorio/Documents/codes/smk-kelulusan/resources/sass/main.scss */"./resources/sass/main.scss");
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
54
resources/sass/main.scss
vendored
54
resources/sass/main.scss
vendored
@ -3,16 +3,31 @@
|
||||
@tailwind utilities;
|
||||
|
||||
html, body {
|
||||
@apply bg-gray-300 text-teal-800;
|
||||
@apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: calc(.75rem + 1vmin);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-5xl font-bold mb-8 mt-4;
|
||||
.header {
|
||||
h1 {
|
||||
@apply text-3xl font-bold mb-6 mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply bg-white w-3/4 mx-auto h-full mt-8 p-12;
|
||||
@apply bg-white mx-auto h-full p-12;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.header {
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply w-3/4 mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
@ -55,6 +70,33 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply py-2 px-4 bg-indigo-400 text-white border border-white rounded;
|
||||
.letter {
|
||||
@apply mx-auto p-1;
|
||||
max-width: 66ch;
|
||||
|
||||
.letter__header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply my-2;
|
||||
}
|
||||
|
||||
ol {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
@screen print {
|
||||
.container > .header, .container > .form {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply w-full max-w-full m-0 p-0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,12 +10,13 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<link rel="stylesheet" href="css/main.css"> </head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">Pengumuman Kelulusan SMK Bhakti Anindya</h1>
|
||||
<span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
|
||||
</div>
|
||||
|
||||
<form class="form">
|
||||
<div class="form-grid">
|
||||
@ -27,11 +28,50 @@
|
||||
<div class="form-group">
|
||||
<label class="form-label">NISN</label>
|
||||
<input class="form-input input-text" type="text">
|
||||
<!-- <p class="input-helper">Nama lengkap sesuai dengan absensi.</p> -->
|
||||
<p class="input-helper">Nomor Induk Siswa Nasional</p>
|
||||
</div>
|
||||
<button type="submit" class="form-submit">Lihat</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="letter">
|
||||
<div class="letter__header">
|
||||
<p><strong>SMK BHAKTI ANINDYA</strong></p>
|
||||
<p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="letter__body">
|
||||
<p class="letter__header"><strong>PERNYATAAN KELULUSAN</strong></p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
||||
</ol>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Nama</th>
|
||||
<th>:</th>
|
||||
<td>nama_lengkap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>NISN</th>
|
||||
<th>:</th>
|
||||
<td>nis_nasional</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Kelas</th>
|
||||
<th>:</th>
|
||||
<td>kelas</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tempat, Tanggal Lahir</th>
|
||||
<th>:</th>
|
||||
<td>tempat_lahir, tanggal_lahir</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Dinyatakan <strong>LULUS/TIDAK LULUS</strong> lorem ipsum dolor sit amet, consectur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
tailwind.config.js
vendored
7
tailwind.config.js
vendored
@ -415,7 +415,12 @@ module.exports = {
|
||||
'0': '0',
|
||||
auto: 'auto',
|
||||
},
|
||||
container: {}
|
||||
container: {},
|
||||
extend: {
|
||||
screens: {
|
||||
'print': {'raw': 'print'} // @media print { ... }
|
||||
}
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user