-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
83 lines (75 loc) · 3.65 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title> HTML and CSS practise for beginners </title>
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet">
</head>
<body>
<div id = "wrapper">
<div class = "main_header">
<h1>HTML and CSS practise for beginners</h1>
</div>
<div class = "nav_bar">
<nav>
<ul>
<li><a href ="#">HOME</a></li>
<li><a href ="#">ABOUT</a></li>
<li><a href ="#">PROJECTS</a></li>
<li><a href ="#">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="section_1">
<h2 class="second_header">How to use this page</h2>
<p>This page is completely open source, and the code and files are available for ALL to download.
I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style
in any which way they desire, with the hopes this can be a place for those who are beginning
with coding to come and have a go at some real live code.</br>
This page and its files can be found on GitHub, an AMAZING resource for programmers and coders
to come together and collaborate on projects together, receive tips and advice and swap code.
If you would like to view the original repository for this page then click
<a href="https://github.com/cthomas88" target="_blank">HERE</a>
</p>
</div>
<div class="section_2">
<h2 class="third_header">Rules</h2>
<p>When playing with this code and styling it, try to keep with the current theme, however I do
understand that this will change over time. Use fonts that have been used elsewhere on the page
and use inkeeping colors and themes. When it comes to using HTML elements and tags, use those
which are new to you, or you are trying to practise with, and the same goes with CSS.</br> This
may seem overly simple and pointless, but to those starting out can be valuable. You can view
previous changes and see how people did what they did by viewing older commits. Have fun and be daring
with your code! Learn something new every day!
</p>
</div>
<div>
<h2 class="section_3">What will you learn today?</h2>
<p class="star_wars">Why don't you try turning this </br>
text box into a star wars type text</br>
scroll, where it fades in the </br>
distance, using purely css? Don't think its possible? </br>
I have done it before and its easier than you think!</br>
Obviously if you feel the need to, create more text </br>
here to elongate the paragraph. This will affect the time</br>
it takes for the text to travel up the page and into the </br>
fade our area.
</p>
</div>
<div class="photo_gallery">
<h2>PHOTO GALLERY</h2>
<p>Let’s make a photo gallery that we can scroll through!</p>
</div>
<div>
</div>
<div class="footer">
<span>This footer will always be positioned at the bottom of the page.</span>
<span class="social_icons">
<a href="facebook.com"><img src="images/facebook.png" alt="Facebook icon" height="42" width="42"></a>
<a href="instagram.com"><img src="images/insta.jpg" alt="Instagram icon" height="42" width="42"></a>
<a href="twitter.com"><img src="images/twitter.jpg" alt="Twitter icon" height="42" width="42"></a>
</span>
</div>
</div>
</body>
</html>