HTML-CSS-Pair-Programming-Lab-1/pair_lab.html at main · DBenson05/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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>
        <header class="bg-dark">
            <h1 class="text-warning pl-5 pb-2">MyWebsite</h1>
        </header>
        <div class="row">
            <span class="container col-8">
                <div class="row">
                    <img class="col-4 ml-3" style="width: 20%; height: 20%; float: center;" src="bridge.jpg">
                    <span class="col ml-3" style="float: right;">
                        <h2>This is a Lorem Ipsum Heading</h2>
                        <p>Lorem ipsum dolor sit amet, ei pro epicuri principes incorrupte, an eos homero deleniti similique, ullum oratio et sed. Mel ei paulo conclusionemque, eum dicta pertinax convenire in. Ex ius tota oportere interpretaris, vix in dicunt bonorum apeirian, eam te wisi delectus delicata. Est at enim blandit percipit.</p>
                        <a class="text-warning" href="">Read More</a>
                    </span>
                </div>
            </span>
            <span class="container bg-light col-4">
                <div class="mb-5">
                    <h3>Sidebar Links</h3>
                    <hr>
                    <a class="text-warning" href="">Link 1</a><br>
                    <a class="text-warning" href="">Link 2</a><br>
                    <a class="text-warning" href="">Link 3</a><br>
                    <a class="text-warning" href="">Link 4</a><br>
                </div>

                <div>
                    <h3>Other Widgets</h3>
                    <hr>
                    <p>This is Photoshop's version of Lorem Ipsum. Lorem ipsum dolor sit amet, ei pro epicuri principes incorrupte, an eos homero deleniti similique, ullum oratio et sed. Mel ei paulo conclusionemque, eum dicta pertinax convenire in. Ex ius tota oportere interpretaris, vix in dicunt bonorum apeirian, eam te wisi delectus delicata. Est at enim blandit percipit.</p>
                    <p>Mea prima posse etiam ut. Nam quis evertitur ne. Tantas adolescens vel ea. Te eum primis quaeque eligendi, nec veri periculis vulputate ea. Per nihil graeci ex, molestiae sadipscing mel at. Veri zril iriure at vis, duo eu putent ceteros dissentiet, est dolorum docendi euripidis ea.</p>
                </div>
            </span>
        </div>

        <footer class="bg-dark" style="text-align: center;">
            <p class="text-white">Copyright <a class="text-warning" href="">YourSite.</a> All rights reserved.</p>
        </footer>
    </body>
</html>