thefellowship.github.io/index.html at main · CalBunker/thefellowship.github.io · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en-US">
<head>
    <!--
blue: #0099ff
green: #009933

image in nav bar:  <img src="images/bow2.png" alt="bow icon" height="30" width="20">
-->
    <meta charset="UTF-8">
    <meta name="description" content="Review Website">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Calvin Bunker">
    <title> The Fellowship </title>
    <style>
        ul {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        .left {
            float: left;
        }
        li {
            float: right;
        }
        li a {
            font-family: "Trebuchet MS", Sans-Serif;
            display: block;
            color: white;
            padding: 14px 16px;
            text-align: center;
            text-decoration: none;
        }
        a p {
            display: block;
            color: white;
        }
        a p:hover {
            background-color: #666633;
        }
        li a:hover:not(.active) {
            background-color: #111;
        }
        .active {
            background-color: #666633;
        }
        li {
            display: inline-block;
        }
        .div2 {
            margin-right: 20%;
            margin-left: 20%;
        }
        .div3 {
            margin-right: 10%;
            margin-left: 10%;
            margin-bottom: 50px;
            width: 60%;
        }
        .div4 {
            margin-top: 250px;
        }
        .div5 {
            margin-top: 80px;
        }
        h1 {
            text-align: center;
            font-family: "Trebuchet MS", Sans-Serif;
            color:#666633;
        }
        p {
            font-family: "Trebuchet MS", Sans-Serif;
            text-indent: 50px;
            font-size: 19px;
            line-height: 1.6;
            text-decoration: none; !important
        }
        a {
            text-decoration: none; !important
        }
        p.solid {
            border-style: solid;
            padding: 5px;
        }
    </style>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <ul>
        <li class="left"> <a href="index.html"><em> <b> The Fellowship </b> </em> </a> </li>
        <li> <a href="sourceCode.html"> Source Code </a> </li>
        <li> <a href="bookList.html"> Book Reviews </a> </li>
        <li> <a href="movieList.html"> Movie Reviews </a> </li>
        <li> <a href="gameList.html"> Game Reviews </a> </li>
        <li> <a href="index.html" class="active"> Home </a> </li>
    </ul>

    <div class="div5">
        <h1 style="font-size:60px"> Welcome! </h1>
    </div>

    <p class="div2"> This is <i> The Fellowship, </i> where we (or well, me) break down and review YOUR favorite TV shows, movies, video games, and books! Our talented team of writers (which is just me) strive to find every important detail in these pieces of modern art. Follow the navigation pane above or the links below to find our most popular and newest articles!  </p>

    <br>
    <br>
    <hr width="90%">
    <br>

    <a href="articles/hades.html" > <img src="images/hades2.jpg" alt="Hades, Video Game" style="width:236px; height:315px; float:left; margin-left: 10%"> <br> <br> <p  style="color:black; text-align:center; left;" class="div3 solid"> <i> Hades, </i> an indie game by the renowned studio behind <i> Bastion </i> and <i> Transistor </i> has done it again with this smash hit - read the full opinion piece. </p> </a>

    <div class="div4"> <a href="articles/theShining.html" > <img src="images/theShiningBook.jpg" alt="The Shining, Book" style="width:204px; height:315px; float:left; margin-left: 10%"> <br> <br> <p  style="color:black; text-align:center; left;" class="div3 solid"> The Shining is a, heh, <i> shining </i> example of phenomenally written horror, a rarity in this day and age. Read our review! </p> </a> </div>

    <div class="div4"> <a href="articles/slaughterhouse.html" > <img src="images/slaughterHouseFive.jpg" alt="Slaughterhouse-Five, Book" style="width:204px; height:315px; float:left; margin-left: 10%"> <br> <br> <p  style="color:black; text-align:center;" class="div3 solid"> <i> Slaughterhouse-Five </i> is a beautifully written and utterly bizarre tale of the author's experiences after WWII, told through one massive metaphor - learn more in the full review. </p> </a> </div>

    <div class="div4"> <a href="articles/djangoUnchained.html" > <img src="images/djangoUnchained.jpg" alt="Django Unchained, Movie" style="width:204px; height:315px; float:left; margin-left: 10%"> <br> <br> <p  style="color:black; text-align:center; left;" class="div3 solid"> Django Unchained is a controversial 2012 film, set in 1858, and focusing on the still present slave trade in the southern U.S. - Join us in breaking it down. </p> </a> </div>

    <hr style="margin-top: 200px; width:90%">
    <br>
</body>
</html>