Tutorial page 1 part 2 mockup, error mockup

This commit is contained in:
Victoria Wang 2015-10-14 11:25:56 -07:00
parent b98d982e5b
commit 1e46191684
5 changed files with 23 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -13,6 +13,8 @@
background-color: #1D1F21;
color: white;
font: 16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
margin-bottom: 0;
border: 0;
}
h3 {
margin-top: 10px;
@ -25,6 +27,12 @@
.btn {
float: right;
}
.error {
background: #93771b;
color: #fff;
padding: 5px 10px;
font-size: 14px;
}
}
.lesson {
h1, .subtitle {

View file

@ -1,4 +1,4 @@
<div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png);">
<div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png); background-size: 839px;">
<div class="dialogue" style="left: 270px; top:374px;">
Oh, a new student!
</div>
@ -17,6 +17,17 @@
</div>
</div>
<div class="comic" style="height: 300px; background-image: url(/img/tutorial/ch1pg1_2.png);background-size: 839px;">
<div class="dialogue" style="left: 200px; top:30px;">
Welcome, [NAME]! You're about to embark on a very exciting challenge: creating your first website!
</div>
<div class="dialogue" style="left: 640px; top:20px;">
You've already made the first important step of starting this lesson, so here's a badge for your profile.
</div>
</div>
<a href="./2">Next >></a>
<script>
$('#checkButton').on('click', function(button) {
checkHomework($('#nameInput').val())

View file

@ -9,8 +9,6 @@
<p>You'll see the results here.</p>
<p>Make sure to check the green boxes below for important bonus info!</p>
</div>
<div class="dialogue">
</div>
</div>
<div class="welcome">

View file

@ -27,6 +27,9 @@
</body>
</html>
</textarea>
<div class="error">
<i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
</div>
<h3>Site Preview</h3>
<iframe class="preview" style="background: white"></iframe>