<!DOCTYPE html><html lang="th"><head><title>burin1</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="keywords" content="burin2" />
<meta name="description" content="burin3" />
<link type="text/css" rel="stylesheet" href="fcpsc471_03.css" />
<style>
.burin4 { text-align:center;margin:auto;width:600px;background-color:#ddffdd; }
.burin6 { border:5px outset white;border-radius:20px;box-shadow:5px 5px 5px gray;height:60px; }
.burin7 { float:left;width:90%;background-color:Aquamarine;border-radius:10px;padding:1px;margin:50px; }
.burin8 { position:absolute;left:50px;top:20px;background-color:white; }
.burin9 { height:50px;width:50px; }
.burin10 { position:absolute;left:50px;top:50px;background-color:pink;z-index:1; }
.burin11 { position:absolute;left:80px;top:80px;background-color:violet;z-index:2; }
.burin12 { text-align:center;margin:auto;width:600px; }
.burin13 { width:280px;float:left; }
@media only screen and (min-width:376px) and (max-width:768px){ /* ipad = 768 */
body{background-color:#ddffdd !important;}.burin9 { height:60px;width:60px; }
.burin10 { z-index:2; } .burin11 { z-index:1; }
.burin7 { visibility:hidden;display:none; }
.burin12,.burin13 { width:80%;background-color:white; }
.burin14 { background-color:teal; }
}
@media only screen and (max-width:375px){ /* iphone6 = 375 */
body{background-color:#ffffdd !important;}.burin9 { height:80px;width:80px; }
.burin10 { z-index:1; } .burin11 { z-index:2;background-color:#dddddd; }
.burin5 { visibility:hidden;display:none; }
.burin7 { visibility:hidden;display:none; }
.burin12,.burin13 { width:100%; }
.burin14 { visibility:hidden;display:none; }
}
</style>
</head><body style="font-family:wrtishkid2;">
<div class="burin4"><span class="burin5">Hello world</span>
<img src="http://www.thaiall.com/me/picme.jpg" class="burin6" />
</div>
<div class="burin7">
<p>nation</p><p>university</p>
<p style="float:right;">nation</p><p style="float:right;">university</p>
<div style="position:absolute;left:300px;">nation university</div>
</div>
<div class="burin8">NATION UNIVERSITY</div>
<div class="burin9 burin10">cpsc</div>
<div class="burin9 burin11">bcom</div>
<div class="burin12">
<div class="burin13">
hello world
<p style="text-align:left;float:none;" ><script>for(i=1;i<20;i++) document.write("hello world ");</script></p>
</div>
<div class="burin13">
hello world
<p style="text-align:left;float:none;" ><script>for(i=1;i<20;i++) document.write("hello world ");</script></p>
</div>
</div>
<div class="burin14">
<script>
document.write("width:"+document.body.clientWidth);
</script>
</div>
</body></html>
<!--
file : fcpsc471_03.css
body { background-color:#ffff00 !important; }
p { float:left; margin:5px;}
.burin5 { font-size:72px;color:blue;font-family:arial; }
.burin14 { float:left;text-align:center;width:100%;background-color:white;position:absolute;bottom:10px;}
@font-face{font-family:'WRTishkid2';src:url('fcpsc471_03.ttf');font-display:swap;}
/* rsp_wr_tish_kid2.ttf + https://github.com/thaiall/programming-page/blob/master/css/fcpsc471_03.htm */
-->