Home » Template » About me with CSS page

About me with CSS page

June 11, 2016

Kali ini gue akan berbagi about me page with CSS,gunanya halaman ini untuk mengetahui profil kamu,dengan desain yang flat dan dengan page number,ketika di klik akan muncul halaman selanjut nya,semua nya murni menggunakan CSS jadi tidak terlalu berat

cara menggunakan nya simple,letakkan kode di bawah ini di dalam template kamu



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Admin zynation</title>
<b:skin><![CDATA[

#ojkdpo {
width: 609px;
height: 400px;
margin: auto;
padding: 6px;
background: rgba(255, 255, 255, 0.11);
margin-top: 60px;
}
#ojkdpo p {
width: 404px;
height: 300px;
margin: auto;
margin-top: 2px;
position: absolute;
margin-left: 192px;
padding: 6px;
font-size: 14px;
}
#ojkdva {
width: 160px;
height: 202px;
padding: 6px;
margin-top: 6px;
margin-left: 6px;
}
#ojkdva img {
width: 160px;
height: 202px;
padding: 6px;
background: rgba(255, 255, 255, 0.11);
margin-top: 0px;
margin-left: 0px;
}
#ojkdke {
width: 577px;
height: 154px;
padding: 6px;
margin-top: 230px;
margin-left: 12px;
position: absolute;
padding: 6px;
}
#ojkdnu {
width: 610px;
height: 154px;
padding: 6px;
margin-left: 357px;
margin-top: 16px;
position: absolute;
padding: 6px;
text-align: center;
text-transform: uppercase;
font-size: 26px;
}
@import url(http://fonts.googleapis.com/css?family=Lato);

html, body {
    overflow: hidden;
    font-family: 'Lato';
font-size: 16px;
line-height: 1.5em;
color: #fff;
font-weight: 300;
background: #FF3737;
font-family: 'Varela Round', sans-serif;
cursor: all-scroll;
}

nav {
  position: fixed;
  z-index: 10;
  display: block;
  width: 77px;
  padding: 0px;
  margin: 0;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}

nav a {
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(34, 45, 56, 0.1);
  padding: 22px;
  margin: 10px 0 10px 10px;
  display: inline-block;
  text-transform: uppercase;
}

.page {
    position: fixed;
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 1;
}

.page:target {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.page:target ~ .page {
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.page h1 {
    position: absolute;
    width: 100%;
    padding: 0 90px;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-size: 90px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    top: 50%;
    left: 50%;
}
.page h2 {
  position: absolute;
  width: 100%;
  padding: 0 90px;
  margin: 0;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 56px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  top: 10%;
  left: 90%;
}
.page h3 {
  position: absolute;
  width: 100%;
  padding: 0 90px;
  margin: 0;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 28px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  top: 6%;
  left: 50%;
}
label {
    position: fixed;
    width: 100%;
    padding: 0 90px;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: rgba(45, 56, 67, 0.5);
    top: 50%;
    left: 50%;
}

#satu {
  background-color: #DF2A2A;
}

#dua {
    background-color: #00c0ef;
}

#tiga {
    background-color: #ffa812;
}

#empat {
    background-color: #0073b7;
}

#lima {
    background-color: #00b29e;
}

#ojkdga {
width: 260px;
height: 314px;
padding: 6px;
margin-top: 6px;
margin-left: 216px;
}
#ojkdga img {
  width: 260px;
  height: 314px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.11);
  margin-top: 0px;
  margin-left: 0px;
}
#ojkdga2 {
  width: 260px;
  height: 314px;
  padding: 6px;
  margin-top: -325px;
  margin-left: 519px;
  position: absolute;
}
#ojkdga2 img {
  width: 260px;
  height: 314px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.11);
  margin-top: 0px;
  margin-left: 0px;
}
#ojkdga3 {
  width: 260px;
  height: 314px;
  padding: 6px;
  margin-top: -325px;
  margin-left: 820px;
  position: absolute;
}
#ojkdga3 img {
  width: 260px;
  height: 314px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.11);
  margin-top: 0px;
  margin-left: 0px;
}
#ojkdga4 {
  width: 260px;
  height: 314px;
  padding: 6px;
  margin-top: 9px;
  margin-left: 215px;
  position: absolute;
}
#ojkdga4 img {
  width: 410px;
  height: 300px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.11);
  margin-top: 0px;
  margin-left: 0px;
}
#ojkdga5 {
  width: 260px;
  height: 314px;
  padding: 6px;
  margin-top: 9px;
  margin-left: 671px;
  position: absolute;
}
#ojkdga5 img {
  width: 410px;
  height: 300px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.11);
  margin-top: 0px;
  margin-left: 0px;
}
#ojkdse {
  width: 910px;
  height: 507px;
  padding: 6px;
  margin-top: 20px;
  margin-left: 212px;
  padding: 6px;
}
]]></b:skin>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
</head>
<body>
<nav>
  <a href='#satu'>1</a>
  <a href='#dua'>2</a>
  <a href='#tiga'>3</a>
  <a href='#empat'>4</a>
  <a href='#lima'>5</a>
</nav>
<label>Click this number</label>
<div class='page' id='satu'>
<!-- setting about disini -->
<div id='ojkdpo'>
<p>
  <i class='fa fa-user'/> Name:Dozie alvisyah<br/>
<i class='fa fa-home'/> Date of birth:banda aceh 13 juli 1996<br/>
<i class='fa fa-user'/> Nick name:Ojik kidiw<br/>
<i class='fa fa-heart'/> Hobbies:Blogging,coding,design,reading,drawwing<br/>
<i class='fa fa-briefcase'/> Education:lecture<br/>
<i class='fa fa-music'/> Favorite music:vierratale,sleeping with sirens<br/>
<i class='fa fa-coffee'/> Favorite drink:teh,cocacola<br/>
<i class='fa fa-magic'/> Zodiac:cancer<br/>
<i class='fa fa-star-o'/> Favorite sport:bulu tangkis<br/>

  </p>
<div id='ojkdke'>
Design: <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <br/>
Coding: <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <br/>
Jones: <i class='fa fa-circle'/> <i class='fa fa-circle'/> <i class='fa fa-circle'/> <br/>
Vegetarian: <i class='fa fa-circle'/> <br/>
</div>
<div id='ojkdva'>
<img src='http://2.bp.blogspot.com/-5L04d-tlqdc/VSyhYKJd9aI/AAAAAAAAAOA/NeOpQEo4uUU/s1600/IMG01829-20150413-1610.jpg'/>
</div>
</div>
<div id='ojkdnu'>
  <i class='fa fa-gift'/> Give me a donut<br/>
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
<input name='cmd' type='hidden' value='_s-xclick'/>
<input name='hosted_button_id' type='hidden' value='EFKNYFDQJAZXC'/>
<input alt='PayPal - The safer, easier way to pay online!' border='0' name='submit' src='https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif' type='image'/>
<img alt='' border='0' height='1' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1'/>
</form>
</div>
</div>
<!-- rubah url gambar kamu disini -->
<div class='page' id='dua'>
<div id='ojkdga'>
<img src='http://3.bp.blogspot.com/-C1fgL7ZS7zA/VSynBTZtaNI/AAAAAAAAAOY/zDjqoPZBSWY/s1600/IMG01831-20150413-1611.jpg'/>
</div>
<div id='ojkdga2'>
<img src='http://3.bp.blogspot.com/-gDNwPxBLLiQ/VSynAD-s8ZI/AAAAAAAAAOQ/e2FjW2Fhc0c/s1600/IMG01834-20150413-1612.jpg'/>
</div>
<div id='ojkdga3'>
<img src='http://2.bp.blogspot.com/-oPB5_dW5DUU/VSyoWwuxVwI/AAAAAAAAAO8/aRMVvSYgzdY/s1600/IMG01848-20150413-1616.jpg'/>
</div>
<div id='ojkdga4'>
<img src='http://4.bp.blogspot.com/-ILEMKd5HJe0/VSynBEsHtGI/AAAAAAAAAOc/2EszzAL6wxk/s1600/IMG01837-20150413-1613.jpg'/>
</div>
<div id='ojkdga5'>
<img src='http://1.bp.blogspot.com/-Omj6jB68amQ/VSynHi4QpqI/AAAAAAAAAOw/KPP1UK9x19s/s1600/IMG01840-20150413-1614.jpg'/>
</div>
  <h2>Gallery</h2>
</div>
<!-- isi tentang kamu disini -->
<div class='page' id='tiga'>
  <h3>Sedikit tentang saya</h3><br/><br/>
<div id='ojkdse'>
Misal nya kalian tanya sama teman aku di kampus siapa sih ojik kidiw? aku yakin gak ada yang tau palingan cuma 10% aja yang tau,siapa itu ojik kidiw dan makhluk apa itu? teman teman biasa ku tidak tau terlalu mendalam siapa aku sebenar nya,bagaimana sifat asli ku,teman teman biasa ku cuma tau tentang aku sekedar nya aja,mereka memanggilku di kampus atau sehari hari &quot;zie&quot;,&quot;jie&quot;,&quot;dozie&quot; dan kalau di tanya siapa itu ojik kidiw atau ojie? mereka gak semua nya tau<br/><br/>
Lain lagi dengan sahabat,gini,aku orang nya sulit untuk mencari teman males banget kalo cuma ngomong cuma sekedar basa basi doang,aku pun anti banget sama orang yang suka basa basi apa lagi banyak nanya,bukan nya aku pemilih,tapi aku ingin mencari sahabat yang pantas untuk di jadikan sahabat bukan sahabat yang penghianat dan egois<br/><br/>sahabat aku tau banget siapa aku sebenar nya,kalau mood aku lagi labil mereka tau aku lagi labil,kalau aku lagi patah hati mereka tau kalau aku lagi patah hati dan ingin di hibur,mereka tau banget kalau aku itu orang nya gimana,dan pasti nya mereka juga tau siapa itu ojik kidiw<br/><br/>
banyak yang bilang aku sombong,cuek,pendiam,kalem yang bilang aku begitu tentu bukan sahabat aku melainkan cuma teman,mereka gak tau aku orang nya gimana,aku cuek cuma yang orang yang gak aku kenal atau baru kenal,ada juga yang bilang aku pendiam sebenar nya aku bukan pendiam sih aku cuma malas ngomong aja kalau emang omongan itu gak penting,basi ya aku gak ngomong,lain lagi kalau becanda<br/><br/>
aku banyak ngomong selagi mood aku lagi pas aja,dan ada lagi yang bilang kalem,kalau kalem sih gak juga sih,kalem itu di kategori kan hampir mirip sama &quot;cuek&quot; ya? seperti yang aku bilang tadi aku kalem ada saat nya,ya kalau mood aku lagi fun aku bisa aja cerewet banget,kalau mood lagi stabil atau biasa aja,ya aku kalem juga sih gak banyak ngomong<br/><br/>
</div>
</div>
<div class='page' id='empat'>
  <h1>Konten halaman empat</h1>
</div>
<div class='page' id='lima'>
  <h1>Konten halaman lima</h1>
</div>


<b:section id='zynation'/>
</body>
</html>


sekian postingan kali ini,gunakan dengan bijak

Artikel RACT Design Lainnya :

0 comments:

Post a Comment

Scroll to top