MEMBUAT WEBSITE INTERFACE RUMAH SAKIT PART 2
Untuk
kali ini membuat website part 2 setelah yang membuat menu dalam membuat html
dan php, css ini sub menu dokternya pada website rumah sakit jangan salah pokus
untuk melihat dokter-dokter spesialisnya ya di bawah kodingan (script) nya
usahakan dii ketik ulang jangan di copy paste ok, semoga bermafaat.
SCRIPT :
Tulis
kodingan dibawah ini dengan nama formatnnya terserah atau bentuk dokter.php
Dokter.php
<!Doctype
html>
<head>
<link
rel="shourtcut icon" href="images/icon.png">
<script
type="text/javascript"
src="js/jquery.js"></script>
<script
type="text/javascript"
src="js/script.js"></script>
<title>Konsultan
Dokter Spesialis</title>
<!--SCRIPT
CSS-->
<link
rel="stylesheet" type="text/css"
href="css/style.css">
<style>
@import url('reset.css');
/*attribute*/
body
{
background: #D7E7F3;
font-family: sans-serif;
font-size: 12px;
color: #181818;
line-height: 18px;
}
/*--------------end
of Position----------------*/
/*---------------------Layout----------------*/
#wrapper
{
width: 960px;
margin: 20px auto;
}
/*Style
buat portfolio*/
#portfolio
{
margin: 20px 10px;
width: 960px;
}
.port
{
width:200px;
padding: 9px;
margin: 10px;
background: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
float: left;
}
.port:hover
{
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.port
img{
border: 1px solid #131313;
margin-bottom: 10px;
}
#navi
ul li{
display: inline-block;
margin-left: 10px;
background: #444;
color: #f2f2f2;
padding: 5px 10px;
text-shadow: 1px 1px 0 #181818;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*------------------------Element-------------*/
hr
{
border: solid #f6f6f6 1px;
margin: 5px 0 20px;
-moz-box-shadow: 0px 1px 0px #ababab;
-webkit-box-shadow: 0px 1px 0px #ababab;
box-shadow: 0px 1px 0px #ababab;
clear: both;
}
/*--------Typo-----------*/
h1
{
text-align: center;
font-family: serif;
font-size: 20px;
margin-bottom: 15px;
}
h2
{
font-size: 12px;
margin-bottom: 5px;
}
span
{
color: #ff0000;
}
span:hover
{
color: #018181;
}
.contactFrm
input[type="Kembali"] {
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;
}
.button-container
{
text-align: left;
}
.button
{
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #D81900;
margin: 3rem 0;
padding: 0.75rem 3rem;
cursor: pointer;
-webkit-transition: background-color 0.28s
ease, color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease,
color 0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button
span {
color: #fff;
position: relative;
z-index: 1;
}
.button::before
{
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%)
scale(0);
transform: translate(-50%, -50%)
scale(0);
}
</style>
</head>
<!--TUTUP
CSS-->
<body
background="powder">
</div>
<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>
<!--SUB
SUB MENU CSS-->
<div class="fly">
<div
class="content">
<ul><font
face="Times New Romans">
<li><a
href="index1.php">Beranda</a></li>
<li><a
href="dokter.php">Dokter</a></li>
<li><a
href="jadwal_dokter.php">Jadwal Dokter</a></li>
<li><a
href="rumah_sakit.php">Rumah Sakit</a></li>
<li><a
href="kontak.php">Kontak</a></li>
<li><a
class="active" href="login.php">Logout</li>
</ul></a>
<!--TUTUP
MENU CSS-->
<!--NAMA
LIST DOKTER SPESIALIS-->
</div>
</div>
<br>
<div
class="container">
<font face="Cambria"
color="blue"
size="6"><center><p><b>DOKTER
SPESIALIS</center></b></p></font>
</div>
<center>
<div id="portfolio">
<div class="port
graphic">
<img width="155"
height="118" src="dokter/6.jpg"/>
<h3><font
face="Cambria" size="2">Indah Dewi
Pertiwi</font><font face="Cambria" color="blue"
size="2"><br><b>[ Dokter Mata
]</font></b></h3>---------------------------------------------<br>
<span><a
href="jadwal_dokter.php"><font face="Cambria"
size="2">JADWAL</font></a></span>
</div>
<div class="port web">
<img width="115"
height="118" src="dokter/10.jpg"/>
<h3><font face="Cambria"
size="2">Faisal Putra</font><font
face="Cambria" color="blue"
size="2"><br><b>[ Dokter Hewan
]</font></b></h3>---------------------------------------------<br>
<span><a
href="jadwal_dokter.php"><font face="Cambria"
size="2">JADWAL</font></a></span>
</div>
<div class="port
graphic">
<img width="80"
src="dokter/5.jpg"/>
<h3><font
face="Cambria" size="2">Riri Putri
Lestari</font><font face="Cambria" color="blue"
size="2"><br><b>[ Dokter Gigi
]</font></b></h3>---------------------------------------------<br>
<span><a
href="jadwal_dokter.php"><font face="Cambria"
size="2">JADWAL</font></a></span>
</div>
<div class="port web">
<img width="155"
height="118" src="dokter/12.jpg"/>
<h3><font
face="Cambria" size="2">Hendri
Agustin</font><font face="Cambria" color="blue"
size="2"><br><b>[ Dokter Umum ]</font></b></h3>---------------------------------------------<br>
<span><a
href="jadwal_dokter.php"><font face="Cambria" size="2">JADWAL</font></a></span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a
href="dokter.php" type="button"
class="button"><font face="Cambria"
color="white"> Back</a>
<a
href="dokter2.php" type="button" class="button"><font
face="Cambria" color="white">
Next</a><br><br><br>
<div class="container">
</center>
<!--TUTUP
NAMA LIST DOKTER SPESIALIS-->
<!--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>
SCRIPT CSS
Untuk
script css nya formatnya style.css
Style.css
/*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
}
}
TAMPILAN SCREENSHOOT DALAM WEBSITE
Komentar
Posting Komentar