codel_prototype/index.html at master · joacotol/codel_prototype · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home | Codel</title>
    <!-- Main CSS File -->
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
  </head>
  <body>
        <header>
            <div class="container">
                    <h1 class="linkLogo"><a href="#">Codel</a></h1>
                <nav>
                    <ul>
                        <li><a href="./index.html" class="selected">Home</a></li>
                        <li><a href="./about.html">About</a></li>
                        <li><a href="./services.html">Services</a></li>
                        <li><a href="./contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- End of Header -->
        <div id="showcase">
            <div class="container">
                <h1>Welcome</h1>
                <p id="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, quis!</p>
            </div>
        </div>
        <!-- End of Showcase -->
        <main>
            <article id="mArticle">
                <h2>Main Article</h2>
                <p>Hello there my name is Joaquin Tolentino and in the future I would like to travel around the world!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea reiciendis error id commodi dolorem nihil natus, sunt, quaerat reprehenderit excepturi minima. Sit optio, neque a earum hic, illum quos temporibus iste fugiat quidem, in nesciunt quis. Esse doloremque earum velit magnam, id neque ad eaque placeat harum! Facere non minus ullam, nulla unde blanditiis provident, reiciendis laudantium nam itaque, voluptas nesciunt! Libero iste sit eos perferendis tempora id blanditiis velit, esse optio cum saepe voluptatem dolor veniam consequuntur voluptate minima?</p>
                <h2>Secondary Article</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aut dolorum dolorem nulla reiciendis sed qui repudiandae harum hic consequuntur in, atque porro maiores assumenda odit eum illo aliquid. Voluptatum!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea reiciendis error id commodi dolorem nihil natus, sunt, quaerat reprehenderit excepturi minima. Sit optio, neque a earum hic, illum quos temporibus iste fugiat quidem, in nesciunt quis. Esse doloremque earum velit magnam, id neque ad eaque placeat harum! Facere non minus ullam, nulla unde blanditiis provident, reiciendis laudantium nam itaque, voluptas nesciunt! Libero iste sit eos perferendis tempora id blanditiis velit, esse optio cum saepe voluptatem dolor veniam consequuntur voluptate minima?</p>
            </article>
            <aside>
                <h3>Aside Info</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque illum minima voluptates, ad nihil in dolor ducimus, nulla libero, eveniet necessitatibus expedita nesciunt impedit exercitationem explicabo ratione, iste inventore placeat.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora aut illum magnam quia, distinctio eius nemo! Libero asperiores explicabo dolorum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique cum, odit autem labore repellendus minima corporis beatae omnis quod alias recusandae possimus doloremque culpa molestiae quam cupiditate error ea nam laboriosam at totam dolor doloribus! Sunt ea magni doloribus, quidem laudantium numquam. Cumque quas, harum quam quos similique ut. Perferendis minima temporibus recusandae quas, nihil odio distinctio. Maxime sit quos ipsum quae doloribus ea at beatae ullam praesentium libero. Suscipit laboriosam eaque doloribus neque, soluta fugit, nesciunt modi impedit et architecto odio accusamus itaque hic magni maiores aliquam ipsum quam. Optio repellendus eveniet vero deleniti perferendis a nulla dolore.</p>
            </aside>
        </main>
        <div class="clr"></div>
        <!-- End of Main Content -->
        <footer>
            <ul class="social">
                <li><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.instagram.com/?hl=en" target="_blank"><i class="fa fa-instagram"></i></a></li>
                <li><a href="https://www.linkedin.com/?trk=nav_logo" target="_blank"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="https://github.com/" target="_blank"><i class="fa fa-github"></i></a></li>
                <li><a href="https://plus.google.com/discover" target="_blank"><i class="fa fa-google-plus"></i></a></li>
            </ul>
        <!-- End of Social Content -->
            <p>Copyright &copy; Codel 2017</p>
        </footer>

        <script>
            document.write('<script src="http://' + (location.host || '${1:localhost}').split(':')[0] + ':${2:35729}/livereload.js?snipver=1"></' + 'script>');
        </script>
  </body>
</html>