Very basic - Steem World Block Chain Start Page - Template / how-to create
7-10-2019
Below is all of the code for my Steem World Start Page
You can see on yesterday's post what the page looks like. It is designed with my two accounts in mind and how I go about things. Every link will open in a new window. I had a couple of request for the code/a template.
Code breakdown top to bottom
Page background color is set in the body { section line background-color: lightblue;You can change it to any named or hex color you want. The named colors are not that many but www3schools has a very easy to use color picker to get the hex number. That link is direct to the color picker.
The Header- "My Steem World" -
Not everyone is going to like the drop down shadow selection and color choice to change it find the line
.header { this is in the <style> section toward the bottom below all the code set up for the menu bar. As in the body above you can change the header background color if you want. To do away with the shadow drop down delete this line text-shadow: 4px 3px yellow; This is the code that plays with the header text creating a shadow effect. Changing the numbers change the shadow effect. You can change the shadow color also here using a named or a hex color number works.
If you do not like the double dark blue lines it is this section you would change also, border-bottom: 10px double #4d88ff; delete or change the size and color.
To change the size of the header text font-size: 25px; change the number here. I set the primary font color down in the HTML <body> section. Scroll down past all the menu <div> sections and find this line <h1><font color="red">Any Name you want to use</font></h1> If you use a hex number for a color you might need to do away with the quotation marks.
The rest
Any images you want to use just put them in the same place as your html text file. I used two images.
<p>< img src="twin blue lines. png" alt="Twin blue lines"style="width:75%;height:75%;margin-left:-5px;"></p> That is the two lines to separate my feed links.
The style="width:75%;height:75%;margin-left:-5px that part sets the size, width, height, and the margin offset specific to the image. I did not want it to stretch all the way from right to left so it will only stretch 75% of the way.
Text has a tendency to want to start right at the edge of the margin so I used <<h2 style="color:#ff3333;margin-left:11px;"> to set an indent to all the text. The margin-left:11px tells all the text indented, and for the image I wanted it indented less so I had to remove some of the artificial indent with a minus 5 margin.
Every one should be pretty familiar with changing links, If you need to add more links just copy and paste a section above where you want to add, or delete a link you do not want. Do like me just play around and you should be fine.
The nice fat blue bar at the bottom is not an image it is a <hr>. You are safe using just <hr> anywhere else in your page, I did learn and named the bottom horizontal rule <hr class="bottom"> so if you want a fat blue <hr> on your personal page just use that.
Here is what all the pink text will get you:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: lightblue;
width: 100%;
overflow-x: hidden;
}
/* that all works below */
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
Position: fixed;
top: 0;
padding: 0px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.dropdown {
float: left;
overflow: hidden;
padding: 0px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: blue;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #b3ccff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #80aaff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.topnav-right {
float: right;
padding: 0px 80px;
}
.main {
padding: 16px;
margin-top: 30px;
}
.header {
background-color: "lightblue";
padding: 10px;
text-align: center;
border-bottom: 10px double #4d88ff;
font-size: 25px;
text-shadow: 4px 3px yellow;
}
.column {
float: left;
padding: 10px;
}
.left {
width: 25%;
}
.right {
width: 25%;
}
.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
hr.bottom {
border: 6px solid #4d88ff;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">Account1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://steemit.com/@Account1" target="_blank">Steemit</a>
<a href="https://www.palnet.io/@Account1" target="_blank">PAL-Net</a>
<a href="https://www.steemleo.com/@Account1" target="_blank">Steem-Leo</a>
<a href="https://www.neoxian.city/@Account1" target="_blank">Neoxian-City</a>
<a href="https://www.sportstalksocial.com/@Account1/feed" target="_blank">Sports-Talk</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Account2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://steemit.com/@Account2" target="_blank">Steemit</a>
<a href="https://www.palnet.io/@Account2" target="_blank">PAL-Net</a>
<a href="https://www.steemleo.com/@Account2" target="_blank">Steem-Leo</a>
<a href="https://www.neoxian.city/@Account2" target="_blank">Neoxian-City</a>
<a href="https://www.sportstalksocial.com/@Account2" target="_blank">Sports-Talk</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">steemworld
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://steemworld.org/@Account1" target="_blank">Account1</a>
<a href="https://steemworld.org/@Account2" target="_blank">Account2</a>
</div>
</div>
<div class="topnav-right">
<div class="dropdown">
<button class="dropbtn">Account1_Wallets
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://steemitwallet.com/@Account1/transfers" target="_blank">Steemit</a>
<a href="https://www.palnet.io/@Account1/transfers" target="_blank">Pal_Net</a>
<a href="https://www.steemleo.com/@Account1/transfers" target="_blank">Steem_Leo</a>
<a href="https://www.neoxian.city/@Account1/transfers" target="_blank">Neoxian_City</a>
<a href="https://www.sportstalksocial.com/@Account1/transfers" target="_blank">Sports_Talk</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Account2_Wallets
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://steemitwallet.com/@Account2/transfers" target="_blank">Steemit</a>
<a href="https://www.palnet.io/@Account2/transfers" target="_blank">Pal_Net</a>
<a href="https://www.steemleo.com/@Account2/transfers" target="_blank">Steem_Leo</a>
<a href="https://www.neoxian.city/@Account2/transfers" target="_blank">Neoxian_City</a>
<a href="https://www.sportstalksocial.com/@Account2/transfers" target="_blank">Sports_Talk</a>
</div>
</div>
</div>
</div>
<div class="main">
<div class="header">
<h1><font color="red">Any Name you want to use</font></h1>
</div>
<div class="row">
<div class="column left">
<h2 style="color:#ff3333;margin-left:11px;">Feeds</h2>
<p><a href="https://steemit.com/@Account1/feed" target="_blank">Account1Steemit</a></p>
<p>
<a href="https://www.palnet.io/@Account1/feed" target="_blank">Account1-PAL-Net</a></p>
<p>
<a href="https://www.steemleo.com/@Account1/feed" target="_blank">Account1-Steem-Leo</a></p>
<p>
<a href="https://www.neoxian.city/@Account1/feed" target="_blank">Account1-Neoxian-City</a></p>
<p>
<a href="https://www.sportstalksocial.com/@Account1/feed" target="_blank">Account1-Sports-Talk</a></p>
<p>< img src="twin blue lines.png" alt="Twin blue lines"style="width:75%;height:75%;margin-left:-5px;" ></p>
<p>
<a href="https://steemit.com/@Account2/feed" target="_blank">Account2-Steemit</a></p>
<p>
<a href="https://www.palnet.io/@Account2/feed" target="_blank">Account2-PAL-Net</a></p>
<p>
<a href="https://www.steemleo.com/@Account2/feed" target="_blank">Account2-Steem-Leo</a></p>
<p>
<a href="https://www.neoxian.city/@Account2/feed" target="_blank">Account2-Neoxian-City</a></p>
<p>
<a href="https://www.sportstalksocial.com/@Account2/feed" target="_blank">Account2-Sports-Talk</a></p>
</div>
<div class="column middle">
<h2><center>My Token Collection</center></h2>
<p><center>< img src="ANY PICTURE YOU WANT" alt="My Coins"style="width:75%;height:75%;" ></center></p>
</div>
<div class="column right">
<h2>Bookmarks</h2>
<p><a href="https://steem-engine.com/" target="_blank">Steem Engine</a></p>
<p><a href="https://www.w3schools.com/html/default.asp" target="_blanlk">W3schools Html</a></p>
</div>
</div>
<hr class="bottom">
</body>
</html>
If you want to give it a try at making your own personal "Steem Block Chain" Start page select all the pink text above between the two horizontal rules. Copy and paste it into notepad in windows. VERY IMPORTANT when saving it click that Save as type button and pick all files. then when you name the file VERY IMPORTANT add a .html at the end of the name that's "period h t m l", VERY IMPORTANT do not click the save button yet, first change the encoding button to UTF-8, okay now you can click save.
I use windows seven, no clue about any other operating system. To open your new page in Chrome or what ever browser you are using the easiest way is to find your file through the file explorer right click and chose the open with, pick the browser you want use. To save hassle of having to do this each and every time remember to book mark it.
It's a lot to copy and paste here is how I did it. Click in the pink at the very top left, hold the shift key down and start highlighting some text in blue, keep your finger on the shift key and re-position your mouse over to the scroll bar, and drag that scroll bar down. When you get to the end and everything is highlighted, you can let go of the shift button, right click somewhere in the pink section, Not on any highlighted text, and select copy, you now have it all.
Have fun. I am no where near an expert on any of this any professional coders web designers want to tell me what I did wrong is fine. I tried to keep it as simple and basic as I could.
I hope this all works, I did copy save and try it myself and it worked, so hopefully it works for you also if you choose to try. I'd like to thank @happyme, they were the ones that let me know I needed three tick marks to get the code to paste right. I knew about the one tick mark, but not the three.
You will see some extra space in the image parts you will need to remove them from the above code when you put your images in. remember no space between < and img and no space befor the ending >.
I have zero experience with HTML 5, so this is a great start for playing and experimenting with. THANKS for the code.
You are welcome. I had fun trying to figure it all out.
And you did a fantastic job.