Watercolour

<!DOCTYPE html>
<html>
<head>
<!--
==============================================

Coded by Monica T.
http://monicagalaxy.info/
Theme: Watercolour
Updated: April 28, 2017
Image source: http://defreve.deviantart.com/art/Mixed-Texture-254801088
==============================================
 -->

<meta charset="UFT-8">

<title>watercolour | an about you page</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">


<style type="text/css">

body {
	text-align: center;
	font-size: 13px;
	font-family: 'Lato', sans-serif;
	color: #373737;
	margin-top: 90px;
	line-height: 19px;

}

.whole {
    border: 10px solid transparent;
    border-image: url("http://i64.tinypic.com/2ue1wea.jpg") 1 round;
    padding: 40px;
    width: 500px;
    margin: 0 auto;
}

.content {
    text-align: center;
    max-width: 425px;
    padding: 15px;
    margin: 0 auto;
    text-align: left;
}

#footer {
    font-family: 'Open Sans', sans-serif;
    max-width: 425px;
    color: #777;
    padding: 2px;
    margin: 0 auto;
    font-size: 11.5px;
    text-align: center;
}

.box1 {
    background-color: #fdfdfd;
    padding: 10px;
}

.part {
	width: 31%;
	margin: 1px 1%;
	float: left;
}

li {
    list-style-type: square;
}

h1 {
    font-family: 'Lato 700', sans-serif;
    color: #000;
    text-transform: none;
    font-size: 65px;
    text-align: center;
    margin: 26px;
}


h2 {
    font-family: 'Source Sans Pro 300', sans-serif;
    color: #000;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}

h3 {
    font-family: 'Lato', sans-serif;
	line-height: 1px;
    color: #373737;
    text-transform: none;
    font-size: 25px;
    text-align: center;

}

a:link, a:visited {
    font-family: 'Source Sans Pro 300', sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
	color: #373737;
	text-decoration: none;
}
a:hover {
    color: #373737;
	border-bottom: 2px solid #373737;
}

</style>

 <body onload="changebg();">
   <script type="text/javascript">
    var bgcount = 4;
    function changebg() {
    var num = Math.ceil( Math.random() * bgcount );
    //alert(num);   we can use this commented line to see what numbers are being generated
    backgound_images = ['http://i67.tinypic.com/dy3kzr.jpg','http://i63.tinypic.com/3rafs.jpg', 'http://i63.tinypic.com/ibhqb6.jpg', 'http://i65.tinypic.com/2m804np.jpg'];
    num=num-1; // we shift back by 1 number because arrays index starts at 0
    document.body.background = backgound_images[num];
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundPosition = "center";
    }
    </script>

</head>

<body>

<div class="whole">
<div class="content">
<h1>your name</h1>
<h2>write about your program, 2019</h2>
<div class="box1">
<li>a student seeking ...</li>
<li>studies at ...</li>
<li>interests lie in ...</li>
</div>

<h3>past, present, future</h3>
<div class="part">
1. research question<br>
2. experience<br>
3. involvement<br>
4. ideas & thoughts<br>
5. anything pertinent
</div>

<div class="part">
1. research question<br>
2. experience<br>
3. involvement<br>
4. ideas & thoughts<br>
5. anything pertinent
</p>
</div>

<div class="part">
1. research question<br>
2. experience<br>
3. involvement<br>
4. ideas & thoughts<br>
5. anything pertinent
</p><br>
</div>
</div>

<div id="footer">
<a href="#">cv</a> | <a href="#">e-mail</a> | <a href="http://monicagalaxy.info" target="blank">css</a>
</div>

</div>
</div>
</body>
</html>