zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-05-13 07:57:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

tutorial - special page 2 styling

Browse source
This commit is contained in:
Victoria Wang 2015-11-24 16:55:51 -08:00
parent d31655d73f
commit 11bb1644f4
3 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
views/tutorial/html/2.erb
View file

@ -1,17 +1,25 @@
<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png); background-size: 580px;">
<div class="comic" style="height: 608px; width:320px; background-image: url(/img/tutorial/ch1pg2.png); background-size: 320px; float: left;">
<div class="dialogue" style="left: 25px; top: 40px; width: 250px">
<p>All you need to build your first site is a computer language called HTML.</p><p>HTML is made of tags - there's usually an opening tag and a closing tag, with content in between them.</p>
</div>
<div class="dialogue" style="left: 430px; top: 0px;">
</div>
<div class="comic" style="width: 289px;
height: 588px;
background-image: url(/img/tutorial/ch1pg2_2.png);
background-size: 289px;
position: absolute;
right: -47px;
z-index: 1000;">
<div class="dialogue" style="left: 0px; top: 40px;">
And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with <strong><span id="studentName"></span>'s Website</strong>, and click save!
</div>
<div class="dialogue" style="left: 370px; top: 260px;">
<div class="dialogue" style="left: 0px; top: 360px;">
<p>You'll see the results here.</p>
<p>Make sure to check the green boxes below for important bonus info!</p>
</div>
</div>
<div class="welcome">
<div class="welcome" style="clear: both">
<h4>Welcome to HTML!</h4>
<p>HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage.
Hypertext refers to text that has links, and markup refers to the tags.</p>