Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)

APLIKASI RICH
INTERNET HTML5 &
CSS3
DEVELOPER MOZILLA

KELOMPOK 3:
- ARYO TIKO PRATOMO (30111191)
- ADE HERY SHOPYAN (30111140)
- WILYAN RESNA SAPUTRA (3011115

HALAMAN 1 - CODE
<!DOCTYPE html>
<html>
<head>
<title>Portofolio HTML5</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/style.css"/>
<script src="scripts/jquery.js"></script>
<script src="scripts/index.js"></script>
<noscript>
<style>
#nav:hover {
color: blue;
width: 150px;
height: 250px
}
</style>
<link rel="stylesheet" type="text/css" media="screen"
href="styles/css3.css"/>
</noscript>
</head>

HALAMAN 1 - CODE (CONT…)
<body>
<noscript>
<style>
div[id^="pasCss"] {
display:none;
}
</style>
<div id="pasCss3" style="z-index:1000;text-align:center;backgroundcolor:white;position:fixed;top:0;left:0;width:100%;height:100%;">
<h1>Vous n'avez ni CSS3, ni JavaScript d'activé donc vous ne pouvez pas
visionner ce site dans le confort.</h1>
</div>
</noscript>
<div id="filtre">
</div>
<div id="image">
<div id="articlePortofolio"> ... </div>
<div id="articleNCetML"> ... </div>
<div id="articleHelloWorld"> ... </div>
</div>
<div id="nav">
<p>Nav<span id="igation">igation</span><br/><span class="gt">></span></p>
</div>
</body>
</html>

HALAMAN 1 - CODE
“KONTEN”
<div id="articlePortofolio">
<img src="images/css3.png"/>
<div class="nav gauche"><a><</a></div>
<div class="nav droite"><a href="#articleNCetML">></a></div>
<div class="titre">
<a>A full CSS3 portofolio, without JavaScript..</a>
<div class="article">
<p>Here is this portofolio (sorry for my bad english i'm french and i'm
16 years old so i've some difficultes^^)</p>

<p>Yes, they're scripts but is <b>just for non-CSS3 browsers and for
some CSS3 bugs (in IE and Opera)</b></p>
<p>You can <b>try it with JavaScript disabled, it will works</b> in a
CSS3 browser!</p>

</div>
</div>
</div>

HALAMAN 1 - CODE
“NAVIGASI”
<div id="nav">
<p>Nav<span id="igation">igation</span><br/><span
class="gt">></span></p>
</div>

HALAMAN 2 - CODE
<div id="articleNCetML">
<img src="images/apple.jpg"/>
<div class="nav gauche"><a href="#articlePortofolio"><</a></div>
<div class="nav droite"><a href="#articleHelloWorld">></a></div>
<div class="titre">
<a>Notification Center et Mountain Lion!</a>
<br/>
<br/>
Si vous êtes dans mon cas : pas d'argent ... <code>NSUserNotification.h</code>)!
On peut retrouver son header ... <code>NSUserNotification.h</code>
Mais attention, dans la DP1 il ...
<pre>
NSUserNotificationCenter *notifCenter ...
</pre>
Biensur il faut supprimer la notification ...
<pre>
- (void)userNotificationCenter: ...
</pre>
</div>
</div>
</div>

HALAMAN 3 - CODE
<div id="articleHelloWorld">
<img src="images/helloworld.jpg"/>
<div class="nav gauche"><a href="#articleNCetML"><</a></div>
<div class="nav droite"><a>></a></div>
<div class="titre">
<a href="#apple">Hello World!</a>
<p>Je viens de finir ... </p>
<p>C'est un blog full-ajax ... </p>
<p>Bonne visite!!</p>
<p>Signé Boundjadj (pour faire "classe")</p>
</div>
</div>
</div>

CSS 3
body:hover #filtre {
height:0
}
.titre:hover>a {
color: blue
}
.titre:hover>.article {
opacity:1;
height:500px
}
.titre:hover>a:after{
opacity:0
}
#image>div:not(.annexe), .nonTarget {
-moz-transform:translatex(100%);
-ms-transform:translatex(100%);
-o-transform:translatex(100%);
-webkit-transform:translatex(100%);
transform:translatex(100%)
}

CSS 3 (CONT…)
#image>div:first-child:not(.nonTarget), #image>div:target {
-moz-transform:translatex(0);
-ms-transform:translatex(0);
-o-transform:translatex(0);
-webkit-transform:translatex(0);
transform:translatex(0)
}
#nav:hover>p>span:not(#igation) {
opacity:0;
}
#nav:hover>p>#igation {
opacity: 1
}
*{
-moz-transition:all .5s, color .25s;
-o-transition:all .5s;
-webkit-transition:all .5s, color .25s;
-ms-transition:all .5s, color .25s, opacity .75s;
transition:all .5s, color .25s
}

CODE UNIQUE
#image>div:target {
-moz-transform:translatex(0);
-ms-transform:translatex(0);
-o-transform:translatex(0);
-webkit-transform:translatex(0);
transform:translatex(0)
}
Penjelasan : jadi, pengaturan css ini hanya akan berlaku untuk div target
yang hanya ada didalam id yang bernama image

CODE UNIQUE (CONT…)
<a href="#articleNCetML">

Penjelasan : ini digunakan untuk membuat link ke suatu div tertentu yang
masih dalam satu script

#filtre {
z-index:3;
background-image:url(../images/hachures.png)
}
*{
z-index:2;
}
Penjelasan : z-index digunakan untuk menumpuk elemen, semakin besar nomor
index dari z-index maka posisinya semakin berada di depan

@font-face {
font-family:District;
src:url(../fonts/District.otf)
}
@font-face {
font-family:Mido;
src:url(../fonts/Mido.otf)
}
Penjelasan : digunakan untuk mengambil jenis font dari lokasi eksternal

Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (17)

Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)