DREAMING/index.html at main · mp1026/DREAMING · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PQ4H8E1KTC"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-PQ4H8E1KTC');
</script>
  <title>DREAM—NG</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <!-- <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style> -->
</head>
<body>
  <section>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <!-- <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul> -->
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">A Subjective Experience</a></li>
            <li class="nav-item"><a class="nav-link" href="#">How We Dream</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Lucid Dreaming</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Applications</a></li>
          </ul>
        <!-- <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul> -->
    </div>
</nav>
<div class="jumbotron text-right">
  <h1>Dreams</h1>
  <p>subconscious phenomenon</p>
  <a class="btn btn-primary" href="#" role="button">Learn more</a>
</div>
</section>

<section class="firstSection">
  <div class="row">
    <div class="col-sm-4">
      <h3>A Subjective Experience</h3><br>
      <h5>What is a dream?</h5>
      <p>The visual nature of dreams is generally highly phantasmagoric; that is, different locations and objects continuously blend into each other. The visuals (including locations, people, and objects) are generally reflective of a person's memories and experiences, but conversation can take on highly exaggerated and bizarre forms. Some dreams may even tell elaborate stories wherein the dreamer enters entirely new, complex worlds and awakes with ideas, thoughts and feelings never experienced prior to the dream.</p>
    <br>
    <h5>A Dream Within a Dream</h5>
    <h6>Edgar Allan Poe</h6>
    <p>Take this kiss upon the brow!<br>
      And, in parting from you now,<br>
      Thus much let me avow —<br>
      You are not wrong, who deem<br>
      That my days have been a dream;<br>
      Yet if hope has flown away<br>
      In a night, or in a day,<br>
      In a vision, or in none,<br>
      Is it therefore the less gone?<br>
      All that we see or seem<br>
      Is but a dream within a dream.<br>
      <br>
      I stand amid the roar<br>
      Of a surf-tormented shore,<br>
      And I hold within my hand<br>
      Grains of the golden sand —<br>
      How few! yet how they creep<br>
      Through my fingers to the deep,<br>
      While I weep — while I weep!<br>
      O God! Can I not grasp<br>
      Them with a tighter clasp?<br>
      O God! can I not save<br>
      One from the pitiless wave?<br>
      Is all that we see or seem<br>
      But a dream within a dream?</p>
    </div>
    <div class="col-sm-8">
      <img class="sectionOneImage" src="images/sigmund-ZAfXeaS_A-4-unsplash.jpg">
    </div>
  </div>
</section>

<section>
  <div class="row">
      <div class="col-sm-12">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">

            <div class="carousel-item active">
              <img src="https://images.unsplash.com/photo-1503776768674-0e612f631345?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1529869980459-ccdf511edf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="d-block w-100" alt="...">
            </div>

            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1607616996527-a641c438bc69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="d-block w-100" alt="...">
            </div>

          </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </button>
        </div>
    </div>
  </div>
</section>

<section>
  <div class="row row2">
    <div class="column left col-sm-12 col-md-4">
      <h3>How We Dream</h3><br>
      <h5>REM Sleep</h5>
      <p>We dream the most during so-called REM(rapid eye movement) sleep, when our eyes move quickly underneath our eyelids. According to a new theory, we dream the most during REM sleep because the concentration of a special neurotransmitter in the cerebral cortex, acetylcholine, is even higher during REM sleep than otherwise. But we don’t dream only during REM sleep.</p>
      <br>
      <h5>Other methods of dreaming</h5>
      <p>Recent studies have shown that even patients under normal anesthesia often dream, although they tend to forget the dreams quite quickly after waking up. Psychedelic drugs and other hallucinogenic drugs can cause hallucinations when awake, which resemble dreams.</p>
      <br>
      <h5>Why do we dream?</h5>
      <p>It's not clear exactly how or why dreams form. One brain region responsible for higher-level thinking, called the sensory cortex, might stimulate the brain stem, which, in turn, would trigger rapid eye movements; other ideas suggest the REMs themselves trigger thinking in the sensory cortex.
      </p>
    </div>
    <div class="column right col-sm-12 col-md-8">
      <img class="sectionTwoImage" src="images/elisaveta-bunduche-TOL5F-3qqB4-unsplash.jpg" style="float:right">
    </div>
  </div>
</section>

<section>
  <div class="row row3">
    <div class="column left col-sm-12 col-md-4">
      <h3>Lucid Dreaming</h3><br>
      <h5>What is a lucid dream?</h5>
      <p>A lucid dream occurs when a person is asleep but aware that they are dreaming. In this state, a person can take control of their dream’s narrative to some degree, essentially guiding and directing the course of their dream.
      </p><br>
      <h5>Scientific phenomenon</h5>
      <p>Research suggests that the brain undergoes a physiological change during lucid dreaming. In fMRI studies, the prefrontal cortex and a cortical network including the frontal, parietal, and temporal zones have been shown to activate when the brain begins lucid dreaming. This appears related to the "waking consciousness” that characterizes lucidity.</p>
    </div>
    <div class="column right col-sm-12 col-md-8">
      <img class="sectionThreeImage" src="images/irene-giunta-ZRorVNIf63s-unsplash.jpg">
    </div>
  </div>
</section>

<footer>
<section>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <!-- <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul> -->
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">A Subjective Experience</a></li>
            <li class="nav-item"><a class="nav-link" href="#">How We Dream</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Lucid Dreaming</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Applications</a></li>
          </ul>
        <!-- <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul> -->
    </div>
</nav>
</section>
</footer>


</body>
</html>


<!-- <div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div> -->