brownhack/friendweb.html at master · bbpm99/brownhack · 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
<!DOCTYPE html>
<html>
<title>Real Friends</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style>
body, html {height: 100%}
body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto Slab", serif}
.menu {display: none}
.bgimg {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("https://image.freepik.com/free-photo/view-above-hand-woman-holding-phone-in-coffee-shop-vintage-filter_1627-1638.jpg");
    min-height: 90%;
}
</style>

<audio autoplay loop>
    <source src="12 Real Friends.mp3">
</audio>

<body>

<!-- Header with image -->
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-middle w3-center">
    <span class="w3-text-white w3-hide-small" style="font-size:100px"><br>Nothing to Look at?</span>
    <span class="w3-text-white w3-hide-large w3-hide-medium" style="font-size:60px"><b>thin<br>Nothing to Look at?</b></span>
    <p><a  class="w3-xxlarge w3-black" >We've been there</a></p>
  </div>
</header>

<!-- About Container -->
<div class="w3-container w3-padding-64 w3-red w3-grayscale w3-xlarge" id="about">
  <div class="w3-content">
    <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">About Real Friends </h1>
    <h1 class="w3-center w3-xxlarge" style="margin-bottom:64px">-an inspiration from Kanye West- </h1>
    <p>Sometimes we just need someone to talk to... a real friend who will always be there for you! Real Friends allows you to have that conversation. Real Friend has different modes for different situations.</p>
    <head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

</style>
</head>
<body>

<table>
  <tr>
    <th>Conversation Mode</th>
    <th>Keyword</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Friendly</td>
    <td>Your real friend will always be friendly to you, no keywords necessary (awwww) </td>
    <td>Friendly mode can be used to chat anytime. Whether you just want to feel like youre talking to someone or make it seem like you are populary, real friend has got your back!</td>
  </tr>
  <tr>
    <td>Emergency</td>
    <td>"Run"</td>
    <td>Ever stuck in a real-life conversation with someone and you need an excuse to leave but don't want to be rude? Our emergency option will send you panicked text messages to make it seem like you are urgently needed... thus, the perfect excuse to leave.</td>
  </tr>
  <tr>
    <td>Mom</td>
    <td>"Mom"</td>
    <td>Ever hanging out with real-life friends and they suddenly drop the "Wanna sleep over" and you would 100% rather lock yourself in your room alone? Well Mom mode replies with messages that seem like they're from your mom and your friends will never go against what mother dearest says. Note: The mom mode will always give you a negative answer.</td>
  </tr>
  <tr>
    <td>Love</td>
    <td>"Babe"</td>
    <td>Well no explanation necessary, just to receive texts from your non-existent lover... </td>
  </tr>

</table>

</body>

  </div>
</div>

<!-- Contact -->

<div class="w3-container w3-padding-64 w3-blue-grey w3-grayscale-min w3-xlarge">
  <div class="w3-content">
    <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">Sign Up</h1>
    <form action="/action_page.php" target="_blank">
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="Phone Number" required name="PhoneNumber"></p>
      <p><a href="submit.html">Start chatting now!</a></p>
    </form>
  </div>
</div>

</body>
</html>