MEMBUAT WEBSITE INTERFACE RUMAH SAKIT
Untuk
kali ini kami akan berbagi ilmu tentang membuat website yang kasualis dengan
sederhana dengan menggunakan bahasa-bahasa yang amat mudah di pahami dan
dimengerti untuk di pelajari bagi pemula, di dalam merancang website sederhana
ini hanya menggunakan bahasa pemograman yang sederhana seperti HTML (hypertext
markup language), CSS, Javascript dan php tidak komplikated banget sih, ini
tampilan awal menu dari website interface rumah sakit atau hospital, nanti kami
akan share yang lanjutan-lanjutan dari menu-menu berikutnya, semoga menambah
referensi untuk belajar.
Script
Codingan :
kita awal mula making
script menunya semuanya di coding atau diketik, kami sarankan untuk di ketik
supaya nantinya bisa memahami untuk lebih mengerti dalam pengkodeannya.
INDEX.PHP
<!Doctype html>
<head>
<link
rel="shourtcut icon" href="images/icon.png">
<title>Konsultan
Dokter Spesialis</title>
<!--SCRIPT
JQUERY-->
<script>
jQuery(document).ready(function($)
{
$('.popup').click(function(event)
{
var width
= 575,
height = 400,
left = ($(window).width() - width)
/ 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width
+
',height=' + height +
',top=' + top
+
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
});
</script>
<!--TUTUP
JQUERY-->
<!--SCRIPT CSS-->
<link
rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<!--TUTUP CSS-->
<body
bgcolor="#D7E7F3">
</div> <!-- /.fly -->
<div
class="flying-robot"><img src="fly.png"
alt=""></div>
<div class="main">
<div
class="content">
<font
face="Cambria" size="6"><b> HOSPITAL | SPESIALIS
KOTA BOGOR</b></font>
<p><font
face="Cambria" size="3">Konsultasi langsung dengan para
ahlinya doktor spesialis di kota bogor</font><p>
</div>
<!--SLIDE PHOTO
HOME-->
<div
class="container">
<div class='atas'>
<font face="BatangChe"
color="blue" size="7"><center>Hi, Kami
Konsultan<br>Sahabat Kesehatan
Anda.</center></font></div>
</div>
<br>
<div
class='slide'>
<input
type='radio' name='radio-set' checked='checked' />
<img
alt='founder-chaidir-web-id' src="images/1.jpg">
<span><h3><font
face="BatangChe">Konsultasi Bersama Dokter
Ahli</font></h3></span>
<input
type='radio' name='radio-set' />
<img
alt='chaidir-hermawan-kertajaya' src="images/4.jpg">
<span><h3><font
face="BatangChe">Konsultasi Bersama Dokter
Ahli</font></h3></span>
<input
type='radio' name='radio-set' />
<img
alt='chaidir-jaya-setiabudi' src="images/3.jpg">
<span><h3><font
face="BatangChe">Konsultasi Bersama Dokter
Ahli</font></h3></span>
<input
type='radio' name='radio-set' />
<img
alt='chaidir-mamak' src="images/6.png">
<span><h3><font
face="BatangChe">Konsultasi Bersama Dokter
Ahli</font></h3></span>
</div>
<!--SUB SUB MENU
CSS-->
<div class="fly">
<div
class="content">
<ul>
<li><a
href="index.php">Beranda</a></li>
<li><a
href="index.php">Dokter</a></li>
<li><a
href="index.php">Jadwal Dokter</a></li>
<li><a
href="index.php">Rumah Sakit</a></li>
<li><a
href="index.php">Kontak</a></li>
<li><a
class="active" href="login.php">Login</li>
</ul>
<!--TUTUP MENU
CSS-->
<!--BEIRTA/INFORMASI
CSS-->
</div>
</div>
<br>
<div class="container">
<div class="animasi">
<font face="Cambria"
color="blue" size="6"><b>RUMAH SAKIT SPESIALIS
KOTA BOGOR</font></b></div>
<hr></div><br>
<div class="container">
<p><font
face="Cambria" size="5">Berita
Baru</font></p>
<br>
<img
src="images/5.jpg" width="450"
height="250"></p><hr>
<p>Apakah
dokter penyakit dalam sudah mendiagnosis Anda terkena hipertensi? Selain
mengurangi stres dan rutin berolahraga, hal utama lainnya yang harus Anda
perhatikan adalah asupan makanan. Makanan apa sajakah yang harus dihindari atau
dibatasi oleh pengidap hipertensi? Dan sebaliknya, makanan apa sajakah yang
dianjurkan bagi pengidap hipertensi? Mari simak berikut ini!<br>
<b>Makanan yang
harus dihindari atau dibatasi:</b><br>
<b>Garam</b><br>
Hindari mengonsumsi
garam lebih dari 2 gram per hari. Sodium (Natrium) merupakan komponen utama
dari garam yang dapat meningkatkan tekanan darah. Sodium bersifat menahan
cairan tubuh dan akibatnya akan membebani kerja jantung. Oleh karena itu, para
dokter ahli penyakit dalam sering kali menganjurkan penderita hipertensi untuk
mengurangi konsumsi garam.<br>
<b>Kafein</b><br>
Menurut American
Heart Association, kafein dapat meningkatkan tekanan darah secara sementara.
Anda dapat tetap mengonsumsi satu atau dua gelas kecil kopi per hari, namun tak
lebih. Bahkan, sebuah riset di Yunani melaporkan bahwa orang yang mengonsumsi
kopi satu sampai dua gelas kecil per hari justru memiliki pembuluh darah yang
lebih elastis daripada yang mengonsumsi kurang atau lebih dari itu.<br>
<b>Makanan
berlemak</b><br>
Makanan berlemak
buruk bagi kesehatan jantung dan pembuluh darah karena dapat menyebabkan
penyumbatan. Hindari daging merah dan makanan cepat saji yang memiliki
kandungan lemak relatif tinggi.<br>
<b>Alkohol</b><br>
Konsumsi alkohol
berlebihan dapat meningkatkan tekanan darah. Selain itu, alkohol juga dapat
merusak dinding pembuluh darah.<br>
<b>Gula</b><br>
Makanan dengan
kandungan gula tinggi dapat menyebabkan peningkatan berat badan dan obesitas
yang merupakan salah satu faktor penyebab tekanan darah tinggi. Dokter penyakit
dalam biasanya akan mengingatkan pengidap hipertensi untuk membatasi konsumsi
glukosa yang tidak hanya berasal dari gula pasir, tapi juga dari nasi putih
atau makanan manis lainnya.<br>
<b>Makanan yang
dianjurkan:</b><br>
<b>Ikan</b><br>
Asam lemak omega 3
dalam minyak ikan seperti salmon, tuna, dan mackerel dapat membantu menurunkan
tekanan darah pada penderita hipertensi ringan. American Heart Association
merekomendasikan untuk mengonsumsi salmon atau ikan lainnya setidaknya seminggu
sekali.<br>
<b>Apel</b><br>
Makanlah apel beserta
kulitnya karena kulit apel kaya akan serat pektin yang dapat membantu
menurunkan kolesterol. Selain itu, kandungan flavonoid di dalamnya juga mampu
membantu menghambat angiotensin-converting enzyme yang berperan langsung dalam
meningkatkan tekanan darah.<br>
<b>Minyak
Zaitun</b><br>
Minyak yang berasal
dari perasan buah zaitun ini kaya akan antioksidan yang dapat melindungi
pembuluh darah sehingga akan mengurangi potensi timbulnya hipertensi.<br>
<b>Almond</b><br>
Almond mengandung
lemak nabati dan serat. Jenis kacang yang satu ini juga dapat membantu
menurunkan kolesterol jahat. Dianjurkan untuk mengonsumsi segenggam almond per
hari.<br>
<b>Kedelai</b><br>
Protein kedelai dapat
membantu menurunkan level kolesterol. Selain itu, kandungan serat sehatnya juga
mampu membantu memelihara kesehatan jantung.<br>
<b>Jeruk</b><br>
Jeruk mengandung
serat pektin yang dapat melawan kolesterol. Selain itu, buah berasa asam segar
ini juga mengandung kalium yang membantu mengendalikan tekanan darah. Menurut
sebuah studi yang dilakukan oleh tim riset A Cleveland Clinic, dua gelas kecil
jus jeruk per hari dapat membantu menyehatkan pembuluh
darah.<br><hr>
Daftar makanan di
atas memang dapat membantu Anda mengendalikan hipertensi, tetapi konsumsi rutin
obat sesuai anjuran dokter penyakit dalam harus tetap diperhatikan. Lakukan
juga konsultasi dan pengecekan angka tekanan darah Anda secara rutin kepada
dokter penyakit dalam di Konsula.</p>
</div>
</div>
</body>
<!--POOTER CSS-->
<div class="footer">
<div
class="content">
<!-- I got these buttons from
simplesharebuttons.com -->
<div
id="share-buttons"><center>
<!-- Twitter -->
<a
href="https://bufferapp.com/add?url=https://simplesharebuttons.com&text=Simple
Share Buttons" target="_blank">
<img
src="icon/twitter.png" alt="Twitter" />
</a>
<!-- Whattsapp -->
<a
href="http://www.digg.com/submit?url=https://simplesharebuttons.com"
target="_blank">
<img src="icon/Whatsapp.png"
alt="Whatsapp" />
</a>
<!-- Tumblr -->
<a href="mailto:?Subject=Simple
Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20
https://simplesharebuttons.com">
<img src="icon/tumblr.png"
alt="Tumblr" />
</a>
<!-- Play Store -->
<a
href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com"
target="_blank">
<img src="icon/story.png"
alt="Play Store" />
</a>
<!-- Amazon -->
<a href="https://plus.google.com/share?url=https://simplesharebuttons.com"
target="_blank">
<img src=icon/Amazon.png
alt="Amazon" />
</a>
<!-- Reddit -->
<a
href="http://www.linkedin.com/shareArticle?mini=true&url=https://simplesharebuttons.com"
target="_blank">
<img src="icon/Reddit.png"
alt="Reddit" />
</a>
<!-- Pinterest -->
<a
href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
<img
src="icon/Pinterest.png" alt="Pinterest" />
</a>
<!-- Print -->
<a href="javascript:;"
onclick="window.print()">
<img
src="icon/Spotify.png" alt="Print" />
</a>
<!-- Reddit -->
<a
href="http://reddit.com/submit?url=https://simplesharebuttons.com&title=Simple
Share Buttons" target="_blank">
<img src="icon/SZ.png"
alt="Reddit" />
</a>
<!-- Twitter -->
<a
href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons"
target="_blank">
<img
src="icon/FirefoxBeta.png" alt="Twitter" />
</a>
<!-- Dropbox -->
<a
href="http://vkontakte.ru/share.php?url=https://simplesharebuttons.com"
target="_blank">
<img
src="icon/Dropbox.png" alt="Dropbox" />
</a>
<!-- DrawIt3 -->
<a
href="http://www.yummly.com/urb/verify?url=https://simplesharebuttons.com&title=Simple
Share Buttons" target="_blank">
<img
src="icon/DrawIt3.png" alt="DrawIt3" />
</a></center>
</div>
</body>
</html>
STYLE.CSS
Yang ini kodeing untuk
mempercantik dan memperindah tampilan interface website rumah sakit atau
hospital tersebut, usahakan jangan di copy paste meningan di ketik atau coding
aja oky.
/*TAMPILAN MENU ATAS*/
*{
padding: 0;margin: 0;
}
h1, h2, h3, h4, h5{
font-family: 'Concert
One', cursive;
}
a{
text-decoration:
none;
color: #000;
}
/*TAMPILAN MENU ATAS*/
/* FORM */
.container {width:
860px;margin:0 auto;background: white;padding: 50px;-moz-box-shadow: 0 0 10px
#000000; -webkit-box-shadow: 0 0 10px
#000000; box-shadow: 0 0 10px #000000;}
/* TUTUP FORM BERITA*/
/*TAXT FONT BERJALAN*/
.animasi {
color: #EBE3AA;
font-family:Cambria;
font-weight:lighter;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: keyframes 10s steps(500) infinite;
}
@keyframes keyframes{
from{ width: 0px;}
}
/*TUTUP TEXT FONT
BERJALAN*/
/*FORM CSS KELUHAN*/
.contactFrm h4 {
font-size: 1em;
color: #252525;
margin-bottom: 0.5em;
font-weight: 300;
letter-spacing: 5px;
}
.contactFrm
input[type="text"], .contactFrm input[type="email"] {
width: 70%;
outline: none;
font-size: 0.9em;
padding: .7em 1em;
border: 1px solid #000;
-webkit-appearance: none;
display: block;
margin-bottom: 1.2em;
}
.contactFrm textarea {
resize: none;
width: 93.5%;
font-size: 0.9em;
outline: none;
padding: .6em 1em;
border: 1px solid #000;
min-height: 10em;
-webkit-appearance: none;
}
.contactFrm
input[type="submit"] {
outline: none;
color: #FFFFFF;
padding: 0.5em 0;
font-size: 1em;
margin: 1em 0 0 0;
-webkit-appearance: none;
background: #006faa;
transition: 0.5s all;
border: 2px solid #006faa;
-webkit-transition: 0.5s all;
transition: 0.5s all;
-moz-transition: 0.5s all;
width: 15%;
cursor: pointer;
}
.contactFrm
input[type="Reset"] {
outline: none;
color: #FFFFFF;
padding: 0.5em 0;
font-size: 1em;
margin: 1em 0 0 0;
-webkit-appearance: none;
background: #006faa;
transition: 0.5s all;
border: 2px solid #006faa;
-webkit-transition: 0.5s all;
transition: 0.5s all;
-moz-transition: 0.5s all;
width: 15%;
cursor: pointer;
}
p.statusMsg{font-size:18px;}
p.succdiv{color:
#008000;}
p.errordiv{color:#E80000;}
/*FORM CSS TUTUP
KELUHAN*/
/*FOOTER SOCIAL MEDIA*/
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
/*FOOTER TUTUP SOCIAL
MEDIA*/
/*UNTUK SLIDE POTO*/
{
height:
200vh;background:#eee;
}
{
color:
#000;font-size:
11px;margin:0;word-break:break-word;padding:0;text-align:left;vertical-align:baseline;
}
.atas {
position:relative;margin:0;width:100%;height:100px;text-align:center;
}
.hentry {
position:
relative;text-align: center;margin: 40px 0 0;cursor:default;
}
.hentry p {
margin: 0;padding:
0;font-family: Arial;line-height: 1.5em;font-size: 1.2em;color: #999;
}
.hentry a:link,
.hentry a:visited,
.hentry a:hover {
color:#888;text-decoration:none;
}
.slide {
position:relative;margin:0
auto;background:#bbb;border: 20px solid #555;border-bottom: 50px solid
#555;border-radius: 20px;box-shadow: 2px 5px 20px #aaa;
}
.slide, .slide input, .slide img
{
width:711px;height:400px;
}
.slide:after {
content:
'.';position: absolute;left: 47.5%;bottom: 0;margin-bottom: -67px;color:
#777;text-shadow: 0 0 5px #444;font-size: 15em;z-index: 1;
}
.slide input {
display:block;position:absolute;left:0;top:0;opacity:0;cursor:pointer;margin:0;padding:0;
}
.slide img {
position:absolute;left:0;top:0;box-shadow:0
0 30px #bbb;
}
.slide span
{position:absolute;left:0;bottom:400px;width:711px;z-index:10;text-align:center;background:rgba(255,255,255,.5);color:rgba(255,255,255,.5);line-height:50px;font-size:0;font-family:Arial,
Trebuchet MS;text-transform:uppercase;
}
.slide span h2, .slide span h3 {
margin:0;font-size:1em;font-weight:normal;display:
inline;
}
.slide img, .slide span {
visibility:hidden;opacity:0;
}
.slide img {
transition:all .9s
ease
}
.slide span {transition:all .5s
ease-out
}
.slide input:checked + img,
.slide input:checked + img + span {
visibility:visible;opacity:1
}
.slide input:checked + img + span
{
bottom:0px;background:rgba(0,0,0,.3);font-size:2em;
}
.slide input:checked {
display:none;
}
.slide input:nth-child(1) {
z-index:13
}
.slide input:nth-child(4) {
z-index:12
}
.slide input:nth-child(7) {
z-index:11
}
.slide input:nth-child(10) {
z-index:10
}
.slide input:nth-child(13) {
z-index:9
}
.slide input:nth-child(16) {
z-index:8
}
.slide input:nth-child(19) {
z-index:7
}
.slide input:nth-child(22) {
z-index:6
}
.slide input:nth-child(1):checked
~ input:nth-child(4),
.slide input:nth-child(4):checked
~ input:nth-child(7),
.slide input:nth-child(7):checked
~ input:nth-child(10),
.slide input:nth-child(10):checked
~ input:nth-child(13),
.slide
input:nth-child(13):checked ~ input:nth-child(16),
.slide
input:nth-child(16):checked ~ input:nth-child(19),
.slide
input:nth-child(19):checked ~ input:nth-child(22) {
z-index:15;
}
.clear {
clear:both;
}
@media only screen and
(max-width:970px){.slide, .slide img, .slide input {width:533px;height:300px;}
.slide span {width:533px;bottom:300px;}}
@media only screen and
(max-width:720px){.slide, .slide img, .slide input {width:444px;height:250px;} .slide
span {width:444px;bottom:250px;} .atas h1, .slide input:checked + img + span
{font-size:1.5em;}}
@media only screen and
(max-width:500px){.slide, .slide img, .slide input {width:356px;height:200px;}
.slide span {width:356px;bottom:200px;} .atas h1, .slide input:checked + img +
span {font-size:1.3em;}}
@media only screen and
(max-width:420px){.slide, .slide img, .slide input {width:240px;height:135px;}
.slide span {width:240px;bottom:135px;} .atas h1 {font-size:1.3em;} .slide
input + img + span {display:none;z-index:-9999;}}
/*TUTUP SLIDE POTO*/
/* MENU ATAS */
.fly{
background-color:
#1484CE;
background-image:
-webkit-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image:
-moz-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image:
-o-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image:
-ms-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image:
linear-gradient(center top , #1484CE 0%, #1274B5 100%);
border-bottom: 1px
solid rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0
2px 0 #0E5A8C;
box-shadow: 0 2px 0
#000000;
font-size: 15px;
/*size home*/
height: 30px;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.fly .content ul{
list-style-type:
none;
float: left;
}
.fly .content ul li{
display: inline;
}
.fly .content ul li a{
display:
inline-block;
text-decoration:
none;
padding: 7px 10px;
border-right: 1px
solid rgba(255, 255, 255, 0.125);
color: #f8f8f8;
font-weight: bold;
}
.fly .content ul li a:hover, .fly
.content ul li a.active{
background:
-webkit-linear-gradient(top, #2b90d2, #1382cb);
background:
-moz-linear-gradient(top, #2b90d2, #1382cb);
background:
-o-linear-gradient(top, #2b90d2, #1382cb);
background:
-ms-linear-gradient(top, #2b90d2, #1382cb);
background:
linear-gradient(top, #2b90d2, #1382cb);
}
.fly .content .ribbon{
text-align: center;
float: right;
width: 100px;
background: #ffffff;
padding: 20px 60px;
-webkit-box-shadow: 0
8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 15px 6px -6px #999; /*contoh
stemple media sosial*/
}
.fly .content .ribbon:hover{
background: orange;
}
/* CONTENT UNTUK SEMUA */
.content{
max-width: 1000px;
margin: 0 auto;
}
.flying-robot{
position:fixed;
top:50px; left:10px;padding:10px;
height: 150px;
width: 150px;
}
/* HALAMAN POOTER */
.main{
margin-top:50px;
margin-bottom: 50px
}
.main .content p{
margin-bottom: 30px;
}
/* BAGIAN FOOTER */
.footer{
padding: 0px 0;
background:
-webkit-linear-gradient(left, #ccc, #999);
background:
-moz-linear-gradient(left, #ccc, #999);
background:
-o-linear-gradient(left, #ccc, #999);
background:
-ms-linear-gradient(left, #ccc, #999);
background:
linear-gradient(left, #ccc, #999);
bottom: 0;
position: fixed;
width: 100%;
font-size: 0px;
}
.footer a{
text-decoration:
none;
font-weight: bold;
color: #000;
}
@media (max-width: 767px) {
. flying-robot{
position:relative;
text-align: center;
top:60px;
}
.fly{
text-align: center;
}
.fly .content ul li a{
border:none;
}
.content{
width: 100%;
}
.main .content h1,
.main .content p{
margin: 10px;
}
.footer{
text-align: center;
}
}
@media (max-width: 520px){
.fly{
height: 60px;
}
.fly .content .ribbon{
display: block;
width: 100%;
}
.main{
margin-top:80px;
margin-bottom: 80px
}
}
Komentar
Posting Komentar