Membuat Template Halaman Sederhana Dengan HTML dan CSS

Membuat Template Halaman Sederhana Dengan HTML dan CSS




Buat Sebuah file dengan nama style.css salin kode dibawah ini !! 
/* body */
body {
    background-color: #f2f2f2;
    font-family: sans-serif;
}

/*::-webkit-scrollbar {
  display: none;
}*/

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 1ex;
}

a {
    text-decoration: none;
}

.link {
    color: black;
    font-size: 19px;
}

/* ================= profile user=============== */
.img-user {
    width: 20%;
    border-radius: 50%;
}

.text-user {
    margin-left: 22%;
    margin-top: -18%;
    position: absolute;
    font-size: 33px;
    font-weight: inherit;
    font-family: sans-serif;
}

.font {
    margin-left: 22%;
    margin-top: -13%;
    position: absolute;
}

.sess {
    padding: 64px;
    font-size: 20px;
    font-weight: inherit;
    margin-left: 16%;
}

span {
    position: absolute;
    margin-left: 66%;
}

/* ============================================== */

/* ================= btn ======================== */
.btn-red {
    background-color: #6362f8 !important;
}

.btn-green {
    background-color: #4CAF50 !important;
}

.btn-blue {
    background-color: #1f91f3 !important;
}

.btn-black {
    background-color: #6362f8 !important;
}

.btn-grey {
    background-color: #adadad !important;
}

.btn-purple {
    background-color: #6967ce;
}

.btn-input {
    margin-top: 40px;
    margin-bottom: 37px;
}

.btn {
    color: #fff;
    padding: 14px;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.input-login {
    width: 96%;
    text-align: center;
    margin-bottom: 4%;
}

/* ============================================== */


/* ================= navbar ===================== */

/* navbar */
.navbar {
    left: 0;
    top: 0;
    overflow: hidden;
    /* background-image: linear-gradient(45deg, #302f2f, #9b9b9b); */
    /*    background-image: linear-gradient(45deg,#f95058,#fc9197);*/
    background-image: -webkit-linear-gradient(left, #9f78ff, #32cafe);
    position: fixed;
    width: 100%;
    height: 22%;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

/* ========== ==============*/


/* navbar sidebar*/
.sidebar {
    left: 0;
    top: 0;
    overflow: auto;
    background-color: #ffffff;
    position: fixed;
    width: 18%;
    height: 100%;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

.nav-sidebar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: 14%;
    margin-top: -25%;
}

.li-sidebar a {
    display: block;
    color: #2c2c2c;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 20px 25px;
}

.header {
    background-color: #484747;
    margin-left: -34px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    padding: 5px 13px;
}

/*logo*/
.logo-sidebar{
    margin-left: 14%;
    margin-top: -20%;
}
.logo {
    font-size: 32px;
    font-weight: 700;
    color: #2c2c2c;
    font-family: arial;
    margin-left: 13%;
    margin-top: -20px;
}

.user {
    margin-left: 36%;
    color: white;
    font-size: 18px;
}

/* img profile
.img-profile {
    width: 48%;
    margin-top: 40%;
    margin-left: 29%;
    border-radius: 50%;
} */

/* ========================================== */

/* body */
/* container */
.container {
    margin-left: 20%;
    margin-top: 1%;
    position: relative;
}

.text-container {
    margin-left: 1%;
    margin-top: 3%;
    font-family: sans-serif;
    color: #fff;
}

.text-level {
    margin-left: 79%;
    margin-top: -3.5%;
    font-family: sans-serif;
    color: #fff;
}

.card {
    background-color: #fff;
    padding: 30px 43px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 38%;
    height: 100px;
    margin: 9px;
    border-radius: 5px;
}

.card-title {
    font-size: 27px;
    margin-top: -19px;
    color: #2c2c2c;
}

.card-number {
    font-size: 41px;
    margin-left: 44%;
    margin-top: -49px;
    color: #2c2c2c;
}

.card-right {
    margin-left: 33%;
    margin-top: -22px;
    color: #2c2c2c;
}

/* ============================================ */


/* ============ login ============== */
/* body */
.logo-content{
    margin-left: 38%;
    margin-top: -7%;
}
.text-content{
    margin-left: -16%;
    margin-top: -14%;
    font-family: arial;
}
.content{
    text-align: center;
    margin-left: -47%;
    margin-right: 14%;
    margin-top: 5%;
    font-size: 18px;
    letter-spacing: 1px;
}
.container-login {
    justify-content: center;
    display: flex;
    padding: 13px;
    margin-top: 3%;
}

.card-login {
    background-color: #fff;
    width: 25%;
    padding: 49px 33px 40px 95px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 13px;
}

.head-login {
    font-size: 42px;
    margin-left: 20%;
}

.head2-login {
    font-size: 23px;
    margin-left: 21%;
    margin-top: -7%;
    margin-bottom: -9%;
}

.form-login {
    margin-top: 20%;
}

.form-pinjam{
    width: 50%;
    float: right;
    margin-top: -34.5%;
}

.input-form {
    border: 0.1em solid #dfdfdf;
    margin: 10px -50px;
    padding: 1em;
    width: 100%;
    border-radius: 6px;
    font-size: 17px;
}

.input,
select {
    border: 0.1em solid #dfdfdf;
    margin: 10px 0px;
    padding: 1em;
    width: 100%;
    border-radius: 6px;
    font-size: 17px;
}

.lb-login {
    margin: -47px;
    font-size: 18px;
}

.footer-login {
    margin-top: 45px;
    margin-left: -15%;
}

.login-link {
    display: block;
    margin-left: 23%;
    margin-top: 8%;
}

/* ====================================== */


/* section */
.section {
    background-color: #fff;
    padding: 30px 43px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 87%;
    margin: 9px;
    border-radius: 5px;
    margin-bottom: 5%;
}


/* ======== table ==========*/
.table {
    margin-top: 22px;
    margin-bottom: 24px;
}

.table-border {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1.5px solid #ddd;
    padding: 15px 12px;
    text-align: left;
    font-size: 15px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-responsive {
    overflow-x: auto;
}

.text-table {
    margin-top: -23px;
    font-size: 17px;
    text-transform: uppercase;
}

.line {
    border: 0.5px solid #656363;
}

.text-laporan{
    display: none;
}

/* ==================================== */

/* ===================== form ================= */

.form-section {
    margin-left: 6%;
    margin-right: 9%;
    margin-top: 3%;
}

.form-input {
    display: grid;
    padding: 13px 0px;
}

.form-line,
select {
    padding: 19px;
    margin-top: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-lb {
    font-size: 15px;
    font-weight: bold;
}

.form-btn {
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-cari {
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.radio {
    display: inline-flex;
}

.selected{
    display: flex;
}

.select-bulan {
    width: 16%;
    padding: 13px;
}


/* ======================== USER ============================ */
.section-user {
    background-color: #fff;
    padding: 30px 43px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 39%;
    margin: 9px;
    border-radius: 5px;
    margin-bottom: 5%;
}

Comments

Post a Comment

Popular posts from this blog

Inilah alur pembuatan SIP/SIK Perekam Medis secara online di Kota atau Kabupaten Cirebon tahun 2022 ! bisa lewat HP dan Laptop

Image
  Surat Izin Praktek (SIP) atau Surat Izin Kerja (SIK) sangatlah penting bagi seorang tenaga Kesehatan, termasuk seorang Perekam Medis dan Informasi Kesehatan (PMIK) yang notabenya merupakan seorang tenaga Kesehatan, meskipun seorang PMIK masuk dalam kategori Nakes Teknisi, tidak menuntut juga harus membuat SIK. Untuk dinyatakan sebagai PMIK seseorang harus memiliki Surat Izin Kerja Perekam Medis yang selanjutnya disingkat SIK Perekam Medis sebagai bukti tertulis yang diberikan untuk menjalankan pekerjaan rekam medis dan informasi kesehatan pada fasilitas pelayanan kesehatan. Untuk dapat melaksanakan pekerjaan rekam medis dan informasi kesehatan secara profesional Perekam Medis harus memiliki batasan kemampuan minimal yang harus dikuasai yang disebut Standar Profesi Perekam Medis. Lalu apa Dasar Hukumnya ? Peraturan Menteri Kesehatan Republik Indonesia Nomor 55 Tahun 2013 , Tentang Penyelenggaraan Pekerjaan Perekam Medis.   Adapun menurut Pasal 6 berbunyi sebagai berikut...
Read more

Terobosan Baru !!! Story Instagram kini di geser ke Atas bukan lagi kesamping seperti YouTube Shorts, Semakin menarik.

Image
  Dengan perkembangan interaksi didunia maya semakin diminati banyak halayak, kini Instagram terus berusaha untuk menghadirkan fitur yang lebih menarik dan selalu memperbaharui fitur-fitur yang lama. Nah selain tampilan story yang vertikal, fitur baru yang sedang dikerjakan oleh pihak Instagram adalah Story Instagram yang dapat di geser secara vertikal. Salah satu fitur yang sering banyak digunakan oleh kalangan masyarakat ialah fitur berbagi cerita, baik berupa foto maupun video. Selain itu disaat akan menerbitkan atau membuat Story, pengguna terlebih dahulu bisa mengatur kualitas atau tampilan dari si gambar maupun video tersebut dengan menggunakan filter agar terlihat lebih menarik. Namun penggunaan fitur terbaru ini hanya baru bisa diakses atau masih sedang tahap uji di negara Turki dan belum bisa digunakan secara luas. Fitur ini menggantikan metode Swipe Horizontal Story mirip dengan fitur terbaru platform medsos lainnya seperti TikTok maupun YouTube Shorts. Selain itu dis...
Read more

Apa saja persiapan menjadi seorang blogger di tahun 2022 ini ??? Inilah Tips Jitu dari Pemandu Tutoriall.My.Id

Image
  Kini menjadi seorang penulis semakin diminati banyak hal layak, bahkan dimulai dari umur 18 tahun ke atas, alasannya adalah karena dizaman serba digitalisasi ini orang semakin banyak mencari sebuah kabar, berita, informasi melalui internet, tidak hanya itu, kini banyak orang menjadi seorang penulis untuk menambah penghasilan mereka, salah satunya ialah menjadi seorang blogger. Dikarenakan blogger akan mendapatkan penghasilan dari Google Adsense. Sangat strategis untuk menambah penghasilan disaat masa pandemic ini. Apa itu blogger ? Namun, apakah kalian sendiri faham atau mengerti apa itu Blogger ?, kali ini Admin Pemandu Tutoriall.my.id akan memberikan penjelasan mengenai blogger. Seperti yang kalian kunjungi pada halaman website ini yang menyediakan berbagai materi tutorial, review, dan lain-lain, dan ini merupakan website yang dibuat dari Blogspot atau Blog. Jadi Blogger merupakan sebuah website yang memberikan informasi dalam urutan kronologis terbalik, dengan ciri hasnya ya...
Read more