html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Gami's Blog</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|PT+Sans|Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
<h1>Welcome to <strong>Gami</strong>'s Blog</h1>
<h6>This blog is for sharing what I learnt in this app, and also, so you can learn!</h6>
</div>
<nav>
<ul class="tab">
<li><a href="#" class="link active" onclick="openTab(event,'page1')">Home</a></li>
<li><a href="#" class="link" onclick="openTab(event,'page2')">About</a></li>
<li><a href="#" class="link" onclick="openTab(event,'page3')">Post</a></li>
</ul>
</nav>
<div id="page1" class="content">
<div class= "mainbox">
<table>
<tr id="top">
<td>
<h2 id="titleText">Hello world!</h2>
<p>Hello! My name is <strong>Gami</strong> (I won't reveal my real name) and this is my blog! Well, i I won't buy a domain name, this is just for <strong>Sololearn</strong> for learning purposes, not only for me, for you too. I took <strong>Python, HTML, CSS and Javascript</strong> as my courses, but feel free to ask me <strong>questions</strong> about other languages! (pls, no JAVA, please :)) ). I will make a <strong>new code for each post</strong>, and you can leave your comments in that specific code. This will be the <strong>hugest project ever in Sololearn</strong> and I hope you will like it! I hope I will post a post each 3 days! UPDATE!! Added a new page, called Archive, which you can access every post.</p>
</td>
</tr>
<tr id="right">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
display: inline;
z-index: 1;
background: #cfe7fa;
background: -moz-radial-gradient(center, ellipse cover, #cfe7fa 0%, #6393c1 100%);
background: -webkit-radial-gradient(center, ellipse cover, #cfe7fa 0%,#6393c1 100%);
background: radial-gradient(ellipse at center, #cfe7fa 0%,#6393c1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 );
}
#top {
text-align: center;
vertical-align: top;
font-family: 'PT Sans', sans-serif;
font-size: 16px;
}
#titleText {
font-size: 30px;
width: 200px;
position:relative;
left:75px;
min-height: 50px;
border: 5px yellow solid;
background: #ff9900;
}
#titleText:hover {
border: 5px black solid;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function openTab(evt, page)
{
var i, pages, links;
pages = document.getElementsByClassName("content");
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
links = document.getElementsByClassName("link");
for (i = 0; i < links.length; i++) {
links[i].className = links[i].className.replace(" active", "");
}
document.getElementById(page).style.display = "block";
evt.currentTarget.className += " active";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run