My Website

copy and paste this into your HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Website</title>
   <style>
* {
	box-sizing: border-box;
}

html {
  display: flex;
  justify-content: center;
  image-rendering: pixelated;
}

body {
  position: relative;
  font-family: ms pgothic;
  font-size: 15px
}

a {
  color: #7D8776;
}

a:hover {
  text-decoration: none;
}

strong  {
  color: #646B61;
}

li {
  margin-left: 14px;
  line-height: 1.25em;
  list-style-type: '⋆';
}

h3 {
  text-align: left;
  margin: 0;
  color: #809176;
  font-size: 13px;
}

hr {
  margin-bottom: 20px;
  border-color: white;
  height: 1px;
}

button {
  font-family: ms pgothic;
	box-shadow: inset 0 0 0 1px #fff9;
  padding: 4px;
}

td {
  vertical-align: top;
  padding: 4px;
}

button {
  border: 1px solid lightgrey;
  background: #f0f0f0;
  background: linear-gradient(0deg, #f0f0f0, #fff);
  border-radius: 2px;
  width: 70px;
  color: #596155;
}

button:hover {
  background:lightgrey;
}

.wrapper {
  width: 800px;
  border: 1px solid lightgrey;
  margin-top: 2%;
  margin-bottom: 2%;
}

.grid {
  display: grid;
  grid-template-columns: 40% 60%;
}

.personal, .blog {
  height: auto;
}

.header {
  padding: 10px 10px 10px 20px;
  height: 200px;
  border-bottom: 1px solid lightgrey;
  background-image: url("https://fuchi.neocities.org/graphics/home/lightplaid.jpg");
  background-size: 100px;
}

.personal {
  padding: 10px;
  overflow-y: auto;
}

.map {
  float: right;
}

.blog {
  padding: 10px;
  font-size: 10px;
  text-align: center;
}

.infobar {
  border-bottom: 1px solid lightgrey;
  text-align: right;
  padding: 3px;
  background: #f0f0f0;
  background: linear-gradient(0deg, #f0f0f0, #fff);
  box-shadow: inset 0 0 0 1px #fff9;
  color: #7B8A75;
  font-size: 10px;
}

#pfp {
  border: 1px solid lightgrey;
  margin-bottom: 7px;
  display: block;
  border-radius: 100px;
}

#status {
  width: 200px;
  display: inline-block;
  padding-left: 4px;
}

.foot {
  text-align: center;
  padding: 0 20px 20px 20px;
}

.interests {
  border: 1px solid lightgrey;
  font-size: 10px;
  background-image: url("https://fuchi.neocities.org/graphics/microblog/dot.jpg");
  background-size: 100px;
  width: 280px;
  margin-left:10px;
  box-shadow: inset 0 0 0 1px #fff9;
}
     
.profile {
  box-shadow: inset 0 0 0 1px #fff9;
  background-image: url("https://fuchi.neocities.org/graphics/microblog/dot.jpg");
  background-size: 100px;
  border: 1px solid lightgrey;
}

.blurb {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 13px;
  border: 1px solid lightgrey;
  color: #695952;
}

.period {
  width: 100%;
  padding: 10px;
  background-color: #D8E1E6;
  font-size:13px;
  color: #596155;
  box-shadow: inset 0 0 0 1px #fff9;
  text-align: center;
}

.period a {
   color: #596155;
}

#search {
  font-family: ms pgothic;
  font-size: 13px;
}

.info {
  margin-bottom: 60px;
}

.info li {
  font-size: 14px;
}

audio {
  width:100%;
  height:30px;
  display: block;
}

.entries {
  border: 1px dashed lightgrey;
  height: 800px;
  padding-top: 10px;
  margin-bottom: 30px;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}
     /*micro blog css here*/
#blog-icon {
  width: 60px;
  color: #97AD89;
}

#blog-icon img {
  width: 100%;
}

.container, #blog-icon, #poop {
  vertical-align: top;
  display: inline-block;
}

.container {
  border: 1px solid lightgrey;
  margin-bottom: 30px;
  background-color: #DCE8DD;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px #fff9;
  width: 360px;
}

.container, #blog-icon {
  text-align: left;
}

#text {
  line-height: 1.25em;
  padding: 8px;
  background-color: white;
  margin: 5px;
}
     
.friends {
  text-align: left;
  color: grey;
  font-size: 13px;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.friends img {
  width: 100px;
  display: inline-block;
  height: 100px;
  border: 1px solid lightgrey;
  margin-right:6px;
}
</style>
  </head>
  <body>
<div class="wrapper">
  <div class="period">
     Search: <input type="text" id="search"> 
    <div style="float:right;margin-top:2px;">
      <a href="">Home</a> | <a href="">Help</a> | <a href="">Contact</a></div>
  </div>
  <div class="header">
 <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg" width="150" id="pfp">
    <div id="status">
    <strong>@user status: "offline"</strong>
    </div>
    <div class="map">
<a href=""><button> Friend </button></a>
      <a href=""><button> Block </button></a>
      <a href=""><button> Share </button></a>
<a href="https://fuchie.atabook.org/"><button> Message </button></a>
    </div>
  </div>
<div class="grid">
<div class="personal">
 <div class="profile">
        <div class="infobar">
users profile \+｡:.:｡+ﾟ
  </div>
<img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg" width="110" style="border:1px solid lightgrey;float:right;">
   <div class="info">
 <strong>@user:</strong> <br> " write a comment here or status here? you can change the @ too. "
</div>
<img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg" style="width:120px;float:left;margin-right:4px;"> 
<strong>General info </strong>
<li> <strong>Name:</strong> your name</li>
<li> <strong>Age:</strong> your age</li>
<li> <strong>Location:</strong> location? </li>
<li> <strong>Status:</strong> occupation </li> 
<li> <strong>Zodiac:</strong> your sign </li>
<li> <strong>MBTI:</strong> your MBTI </li>
<br>
 <strong>Description </strong>
   <li> you can put your description here or relplace it with something else</li> 
   <li> or get rid of this section lol
</div>  
  <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg" width="200" style="margin:40px;">
  <div class="interests">  
     <div class="infobar">
*･｡.☆ interests
  </div>
<table>
  <tr>
<td> <strong>Music:</strong> </td>
<td> list music here</td>
  </tr>
<tr>
  <td><strong>Films:</strong></td>
  <td>list films here</td>
   <tr>
<td> <strong>Anime/TV:</strong> </td>
<td> list anime or TV shows here </td>
   </tr>
  <tr>
<td> <strong>Manga:</strong> </td>
<td> list manga here  </td>
   </tr>
     <tr>
  <td> <strong>Video Games:</strong> </td>
  <td> list video games here </td>
   </tr>
  <tr>
<td> <strong>Other:</strong></td>
<td> list whatever here </td>
   </tr>
<tr>
  <td> <strong>Hobbies:</strong> </td>
  <td> list hobbies here </td>
</tr>
     </table>  
  </div>
  <p>  <audio controls>
<source src="put your audio link here">
</audio> 
<span style="font-size:13px;color:grey;">˖ ݁♬⋆.˚𝄞. song title here <span>
</div>
<div class="blog">
  <div class="blurb">
write a little message here if you want
  </div>
 <h3> [your name]'s lasest blog posts </h3>
  <hr>
  
  <div class="entries">
             <div class="container">
<div class="infobar">
  mm/dd/yy
  </div>
<div id="text">
an entry
    </div>
  </div>
    <div id="blog-icon">
  <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg">
    <br> @user </br>
  </div>
           <div class="container">
<div class="infobar">
  mm/dd/yy
  </div>
<div id="text">
hi
    </div>
  </div>
    <div id="blog-icon">
  <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg">
   <br> @user </br>
  </div>
</div>
      
     <h3> [user]'s friends </h3>
  <hr>
      <div class="friends">
    <span>   
      <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg">  @user 
        </span> 
        <span>   <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg"> @user 
        </span> 
        <span>   <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg">
 @user </span>
       <span>   <img src="https://fuchi.neocities.org/graphics/microblog/haruhi.jpg">
 @user </span>
  </div>
</div>
  </div>
</div>
  <div class="foot">
    <br> [your name]space.com © 
          
    <br> page layout designed by <a href="https://fuchi.neocities.org/">fuchi</a>
</div>
  </body>
</html>

Search:

Home | Help | Contact

users profile \+｡:.:｡+ﾟ

@user:
" write a comment here or status here? you can change the @ too. "

General info

Name: your name

Age: your age

Location: location?

Status: occupation

Zodiac: your sign

MBTI: your MBTI

Description

you can put your description here or relplace it with something else

or get rid of this section lol

*･｡.☆ interests

Music:	list music here
Films:	list films here
Anime/TV:	list anime or TV shows here
Manga:	list manga here
Video Games:	list video games here
Other:	list whatever here
Hobbies:	list hobbies here

˖ ݁♬⋆.˚𝄞. song title here

write a little message here if you want

[your name]'s lasest blog posts

mm/dd/yy

an entry

@user

mm/dd/yy

@user

[user]'s friends

@user