HTML-and-CSS-for-beginners/index.html at 8a2839ffe29d91e7d0304918cc5e189c283c5a9a · cthomas88/HTML-and-CSS-for-beginners · GitHub

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
<!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> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, soluta suscipit ab minima, maiores necessitatibus molestiae incidunt quod a praesentium laudantium quas, voluptatibus debitis enim. Iure fugit repellendus est ipsam?</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>