ABOUT ME PAGE 01

<!--


               ------------------------------
                  @BARBIE THEMES | TUMBLR
               ------------------------------

ABOUT ME PAGE 01
CODES 2020: @BARBIE-THEMES TUMBLR
+Do not steal the code or take parts of the codes and put them in your own theme.
+do not remove the credit please
creating themes since 2014


-->


<head>

<link rel="shortcut icon" href="{Favicon}"/>
<title>About me</title> <!--Change this to whatever you want to appear in the window bar!-->

<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<style type="text/CSS">


:selection {
background:##a1a1a1;
color:#fff;

}


#container {
position: center;
width: 1500px;
height: 750px;
top: 5; bottom: 5; left: 5; right: 5;
background-color:#eee; /* change: bg color */
background-repeat:repeat;


}

b {
font-weight:bold;
color:#888; /* change: Bold color */

}

i { font-weight:arial;
color:#bad8eb; /* change: Italic color */

}


#topbar {
display: inline-block;
width: 350px;
height: 250px;
position: fixed;
margin-top: 100px;
margin-left: 300px;

}

#image {
width: 100px;
height:100px;
padding-bottom: 10px;
overflow:hidden;
border-radius:100px;
border:5px; color:#fff;
margin-left:327px;
margin-top:-20px;

}

#image .icon {
width: 100px;
height: 100px;
overflow:hidden;
border-radius:100px;


}

#image:hover {
-webkit-transition: opacity 1s linear; opacity: 0.8;
-webkit-transition: 0.8s ease-in;
-moz-transition: 1s ease-in; transition: 1s ease-in;

}

#links a {
border-radius: 0px;
width: 83px;
border-bottom:1px solid #bad8eb;
color: #888;
text-transform: lowercase;
text-decoration: none;
font-family:'Inconsolata', Consolas, Courier New, monospace;
font-size: 11px;
letter-spacing: 0px;
margin-left:220px;
list-style-type:none;


}

#links a:hover {
width: 83px;
text-transform: lowercase;
border-bottom-color:#eee; /* change: link border hover */
color:#ccc;
text-align: center;
text-decoration: none;
font-family:'Inconsolata', Consolas, Courier New, monospace;
font-size: 10px;
letter-spacing: 0px;


}

#content {
position: fixed;
float: center;
margin-top: -500px;
margin-left: 500px;
width: 350px;
height: 300px;
overflow-y: scroll;
border: 1px dotted #000;
text-align: center;
font-family:'Inconsolata', Consolas, Courier New, monospace;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
color: #ccc; /* change: Descriptions color */
padding-bottom: 10px;
background-color:#fff; /* change: Background color */

}


#content a {
color: #F7D5BD;
text-decoration: none;

}

#content a:hover {
color: #9D8692;
text-decoration: none;
-webkit-transition: opacity 1s linear; opacity: 0.8;
-webkit-transition: 0.8s ease-in;
-moz-transition: 1s ease-in; transition: 1s ease-in;

}

#content h1 {
text-align: center;
text-transform: uppercase;
color: #bad8eb; /* change: title color */
font-size: 20px;
letter-spacing: 5px;
line-height: 120%;
border-bottom: 1px dotted #000; /* change: borders color */

}

 #content h1 a {
text-align: center;
text-transform: uppercase;
color: #bad8eb; /* change: title color */
font-size: 20px;
letter-spacing: 5px;
line-height: 120%;
border-bottom: 1px dotted #000; /* change: borders color */

}

/* do not remove please */

#credit {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 10px;
font-family:calibri;

}

#credit a {
background-color: #bad8eb;
padding: 2px;
box-shadow: 1px #000000;
text-decoration: none;
color: #000;
padding:3px;

}

#credit a:hover {
background-color: #eee;
padding: 2px;
box-shadow: 1px #000000;
text-decoration: none;
color: #bad8eb;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;

}

</style>

<body>

<div id="title">

<div id="container">

<div id="topbar">
<!---photo--->
<div id="image">
<img src="https://imagizer.imageshack.com/img922/6433/Sq2fpJ.png" class="icon" /> <!-- READ:


HEADER IMAGE, YOUR URL HERE 100x100px; 200x200px; etc {ICON}:


-->
<div id="title"></div>

<!-- insert: links -->
</div>
<div id="links">
<a href="/">01.Back to blog</a>
<a href="/ask">02.Message</a>
<a href="/">03.Navigation one </a>
<a href="/">04.Navigation two</a>
</div>
</div></div></div>

<div id="content">


<h1>about me</h1><!-- insert: name -->
ALEXANDRA • 25 • Female • Enginner <!-- insert: description-->

<!-- insert: description-->
<h1>BOOKS FAV</h1>
MOVIES, SERIES, ANIME/MANGA, SOCCER PHOTOGRAHPY, PHOTOSHOP HTML ETC. <i>Lorem</i>

<h1>DC/MARVEL</h1><!-- insert: name -->
<i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, <b>pulvinar id, commodo feugiat, vehicula</b> et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit <u>venenatis.</u> <!-- insert: description-->

<h1>SERIES/MOVIES FAV</h1><!-- insert: name -->
<i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, <b>pulvinar id, commodo feugiat, vehicula</b> et, mauris. <!-- insert: description-->

<h1>ANIMES FAV</h1><!-- insert: name -->
<b>Bold</b> <em>Italic</em> <u>Underline</u> <strike>Strike</strike> <a href="URL HERE>">URL</a>

</div>
<!-- do not remove please  -->
<div id="credit"><a href="http://barbie-themes.tumblr.com/">CREDIT</a></div>

</head>
</body>