FinalProject/index.html at master · benjamin-shuster/FinalProject · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!-- DEVELOPER: Benjamin Shuster, IS117-002, Spring 2023 -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="How to do better on exams by drinking alcoholic beverages ">
    <meta name="keywords" content="Alcohol, Studying, Exam, Testing, Beer, Wine">
    <meta name="author" content="Benjamin Shuster">
<!--    https://www.w3schools.com/tags/tag_meta.asp   -->
    <title>Home</title>
<!--  bootstraps css code  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="Styles/home.css">
    <link rel="stylesheet" href="Styles/global.css">
    <link rel="shortcut icon" href="Images/logo.png" type="image/x-icon">

</head>
<body>
<script src="Scripts/navigation.js"></script>
<!--this injects the navbar using js so I can modify it in one file-->

<div class="alert alert-danger d-flex justify-content-between mt-3" role="alert">
    <div>I may have gone too far with the animations so <a href="./reducedAnimations">here is a link to the reduced animations site.</a>! </div><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<main>

<h1 class=" inspiration text-center my-5 ">Home </h1>

<div class="container d-flex justify-content-center">
<div id="carouselAutoplaying" class="carousel slide " data-bs-ride="carousel">
<!--    https://getbootstrap.com/docs/5.3/components/carousel/-->
<!--    https://stackoverflow.com/questions/45379727/make-images-the-same-size-in-bootstrap-grid-->
    <div class="carousel-inner ">
        <div class="carousel-item active   ">
            <img loading=lazy src="Images/beer.png"  class=" img-responsive d-block w-100" alt="beer">
            <div class="carousel-caption d-none d-md-block bg-body-secondary text-dark" >
                <h5>Have a Sip</h5>
                <p>Beer among many other alcoholic beverages are known to improve academic performance.</p>
            </div>
<!---->
        </div>
        <div class="carousel-item">
            <img loading=lazy src="Images/study.png"  class=" img-responsive d-block w-100" alt="studying">
            <div class="carousel-caption d-none d-md-block bg-body-secondary text-dark">
                <h5>Review some Notes</h5>
                <p>Dont forget to study the night before the exam.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img loading=lazy src="Images/hand-san.jpeg"  class=" img-responsive d-block w-100" alt="hand sanitiser">
            <div class="carousel-caption d-none d-md-block bg-body-secondary text-dark">
                <h5>Under 21?</h5>
                <p>Try drinking some hand sanitiser for the same effects!</p>
            </div>
        </div>
        <div class="carousel-item ">
            <img loading=lazy src="Images/grade.png" class="img-responsive d-block w-100" alt="grade">
            <div class="carousel-caption d-none d-md-block bg-body-secondary text-dark">
                <h5>Profit!</h5>
                <p>Watch as your GPA goes to the moon!!!!</p>
            </div>

        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselAutoplaying" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselAutoplaying" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

</div>
</div>
<h2 class="mt-5 text-center" >About Us</h2>
<div class="mt-5 container d-flex justify-content-center" >
    <p class="lh-lg w-75">Welcome to our website, where we offer a tongue-in-cheek take on a common pre-exam ritual: drinking alcohol.
        We know that some students like to unwind with a few drinks before hitting the books, and we're here to provide some humorous advice and resources to help you do just that.
        From tips on smuggling alcohol into the library to suggestions for non-alcoholic alternatives, we've got you covered.
        So take a break from your studies, grab a drink (if you're of legal age, of course), and explore our site. We promise you'll find some laughs along the way.</p>
</div>

<div class="container">
    <div class="row">
        <div class="col">
    <div class="card m-2" >
        <div class="card-body text-center">
            <h5 class="card-title ">Study Buddy's</h5>
            <h6 class="card-subtitle mb-2 text-muted">Dont want to study alone</h6>
            <a target="_blank" href="https://www.njit.edu/pub/" class="card-link">Go to the pub</a>
        </div>
    </div>
    <div class="card m-2">
        <div class="card-body text-center">
            <h5 class="card-title ">Alcoholic Resources</h5>
            <h6 class="card-subtitle mb-2 text-muted">For when you have too many exams</h6>
            <a target="_blank" href="https://www.aa.org/" class="card-link">Alcoholics anonymous</a>
        </div>
    </div>
        </div>
        <div class="col">
    <div class="card m-2">
        <div class="card-body text-center">
            <h5 class="card-title">Not enough Alcohol? </h5>
            <h6 class="card-text">Best places to buy</h6>
            <a target="_blank" href="https://www.riteaid.com/" class="card-link">Rite Aid</a>
<!--            I dont know where ppl buy alcohol lol -->
        </div>
    </div>
    <div class="card m-2">
        <div class="card-body text-center">
            <h5 class="card-title ">Academic Help?</h5>
            <h6 class="card-subtitle mb-2 text-muted">Why is my GPA so low</h6>
            <a target="_blank" href="https://www.njit.edu/academic/academic-support-advising" class="card-link">Advising</a>
        </div>
    </div>
        </div>
    </div>
</div>
</main>
<img class="drunkBee" src="Images/drunk_bee.png" alt="drunk bee">
<img class="drunkBee2" src="Images/drunk_bee.png" alt="drunk bee">

<script src="Scripts/footer.js"></script>
<!--this injects the footer using js so I can modify it in one file-->
<!--bootstraps javascript code-->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="Scripts/global.js"></script>
<script defer type="module">
    import { rainbowCursor  } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";

    new rainbowCursor({
        length: 25,
        size: 5,
    });
</script>
</body>
</html>