HTML-CSS-Pair-Programming-Lab-1/Mywebsite.html at main · JamarTaylor/HTML-CSS-Pair-Programming-Lab-1 · 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
81
82
83
84
85
86
87

<!DOCTYPE html>
<html>

<head>
        <title>Jamar Website</title>
        <link rel="stylesheet" href="Mywebsite.css">


<style>
        *{
            box-sizing: border-box;
        }
        .TextWrap{
            float: left;
            margin: 10px;
        }
        header{
            text-align: left;
            padding: 2px;
            background-color: black;
        }
        footer{
            text-align: center;
            padding: 2px;
            background-color: black;
            color: white;
        }
</style>
</head>

<body>
	<header>
            <h1 class="heading1">MyWebsite</h1>
    </header>

    <div class="main">
        <section>

            <h2 class="Heading2">This is a lorem Ipsum Heading</h2>

        <img src="http://placeimg.com/150/150/tech" alt="My favorite image" class="image" width="150" height="150">

        <p class="paragraph">Sed non mauris vitae erat consequat auctor eu in elit. class aptent taciti<br>
                            soiosqu ad sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                            <br> Mauris in erat justo. </p>


        <p><a style="text-decoration: none" href="read more" class="readmore">Read More</a></p>
        </section>

    <aside class="sidenav1">
        <h3>Sidebar Links</h3>
        <hr>

        <p><a style="text-decoration:none" href="Link 1" class="link1">Link 1</a></p>
        <p><a style="text-decoration:none" href="Link 2" class="link2">Link 2</a></p>
        <p><a style="text-decoration:none" href="Link 3" class="link3">Link 3</a></p>
        <p><a style="text-decoration:none" href="Link 4" class="link4">Link 4</a></p>

    </aside>
        </div>

    <aside class="sidenav2">
        <h3>Other Widgets</h3>
        <hr>

        <p>This is Photoshop’s version  of Lorem<br>
           Ipsum. Proin gravida nibh vel velit auctor<br>
           aliquet. Aenean sollicitudin, lorem quis<br>
           bibendum auctor, nisi elit consequat ipsum,<br>
           nec sagittis sem nibh id elit<br><br>
           Duis sed odio sit amet nibh vulputate cursus<br>
           a sit amet mauris.</p>

    </aside>
    <footer>
        <p>copyright <a style="text-decoration:none" href="Your site" class="Yoursite">Your site</a>. All right reserved.

        </p>
    </footer>

</body>
    </html>