Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement