responsive-website-Bootstrap/index.html at main · LexiconProjects/responsive-website-Bootstrap · 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
<!DOCTYPE html>

<html lang="en">

<head>
  <title>Welcome to Bootstrap</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <!--- Bootstrap Theme-->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="/css/style.css" rel="stylesheet">


</head>


<body>

  <!--Header with Logo and links-->

  <nav id="header" class="navbar navbar-expand-md bg-dark navbar-dark" height=min-content>
    <!-- Logo -->
    <a class="navbar-brand" href="index.html">
      <img src="/images/logo-GFE.jpg" alt="GFE Logo" width="200" height="50" \></a>

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#articles">Articles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!--Carousel-->

  <div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/snow-mountains.jpg" alt="snow mountains" height="500">
      </div>
      <div class="carousel-item">
        <img src="images/volcano.jpg" alt="volcano" height="500">
      </div>
      <div class="carousel-item">
        <img src="images/river.jpg" alt="river" height="500">
      </div>
    </div>


    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

  </div>
  <br>

  <main>

    <div class="row">

      <!--Sidebar dropdown menu-->
      <div class="panel-group col-sm-2 flex-shrink-1">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapse1">Menu</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse">
            <ul class="list-group">
              <li class="list-group-item"><a href="index.html">Home</a></li>
              <li class="list-group-item"><a href="#articles">Articles</a></li>
              <li class="list-group-item"><a href="#contact">Contact</a></li>
            </ul>

          </div>
        </div>
      </div>

      <br>


      <div class="col-sm-5" id="articles">
        <div id="main-article-1">
          <h1>I'm the first</h1>
          <p>Muse about worldlets Cambrian explosion quis nostrum exercitationem ullam corporis suscipit laboriosam
            science culture? Stirred by starlight cosmic ocean how far away paroxysm of global death tesseract vastness
            is bearable only through love. Adipisci velit vanquish the impossible sed quia non numquam eius modi tempora
            incidunt ut labore et dolore magnam aliquam quaerat voluptatem invent the universe encyclopaedia galactica
            dream of the mind's eye? Consectetur concept of the number one the only home we've ever known citizens of
            distant epochs bits of moving fluff totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo.</p>

          <p>Something incredible is waiting to be known not a sunrise but a galaxyrise the ash of stellar alchemy two
            ghostly white figures in coveralls and helmets are softly dancing cosmic ocean qui dolorem ipsum quia dolor
            sit amet. Another world nisi ut aliquid ex ea commodi consequatur kindling the energy hidden in matter great
            turbulent clouds Ut enim ad minima veniam as a patch of light. Descended from astronomers finite but
            unbounded Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
            consequatur invent the universe preserve and cherish that pale blue dot shores of the cosmic ocean.</p>

          <p>Tunguska event nisi ut aliquid ex ea commodi consequatur another world great turbulent clouds consectetur
            Hypatia. Euclid bits of moving fluff stirred by starlight hundreds of thousands the ash of stellar alchemy
            hydrogen atoms. A still more glorious dawn awaits dream of the mind's eye the only home we've ever known the
            carbon in our apple pies qui dolorem ipsum quia dolor sit amet courage of our questions and billions upon
            billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>
      </div>
      <br>

      <div class="col-sm-5" id="main-article-2">
        <h1>I'm the second</h1>
        <p>Death Valley pupfish Asiatic glassfish chum salmon sand lance, elasmobranch, hagfish, freshwater eel wolf-eel
          cownose ray Alaska blackfish. Sabertooth fish, yellowbanded perch; mackerel shark wahoo, "long-finned pike,
          saw shark harelip sucker," zebra pleco. Moonfish, bull trout wrasse yellow moray dorab yellowhead jawfish
          pikeperch plunderfish. Regal whiptail catfish, wahoo icefish. Chinook salmon alligatorfish flagfish grunt;
          brook trout armored gurnard molly--roanoke bass orange roughy. Spiderfish Mozambique tilapia sand tilefish
          paddlefish broadband dogfish spinefoot velvet-belly shark, orangespine unicorn fish. Fierasfer, "pleco,
          European flounder footballfish stargazer horn shark creek chub Black tetra pikeblenny summer flounder
          velvet-belly shark, sand goby driftfish." Black prickleback eucla cod Mexican golden trout South American
          darter Rabbitfish sábalo; yellowfin tuna cichlid! Yellow perch Black tetra white croaker nurseryfish European
          perch.</p>

        <p>Zingel mudminnow carpetshark crestfish wallago. Guppy airbreathing catfish emperor, Australian prowfish blue
          catfish trout-perch burma danio daggertooth pike conger, stream catfish prickly shark, carpsucker tilapia.
          Yellowtail horse mackerel halfmoon poacher blackchin Atlantic silverside albacore; damselfish; collared
          dogfish. Spikefish, yellow-edged moray luminous hake flagblenny yellowtail kingfish swordtail ribbonbearer;
          velvetfish Asiatic glassfish Rasbora featherfin knifefish yellowbanded perch. Tompot blenny wasp fish fusilier
          fish Red whalefish Asiatic glassfish climbing catfish. Smoothtongue barbel, Chinook salmon gulf menhaden elver
          southern flounder northern pearleye smoothtongue Redhorse sucker, green swordtail, tench eel-goby sawtooth
          eel. California halibut, longfin dragonfish burma danio Bengal danio golden shiner gizzard shad. Porbeagle
          shark wahoo: yellowtail barracuda chubsucker zebra shark cavefish waryfish tadpole cod sandburrower, Rasbora.
        </p>
      </div>
    </div>
    <br>
    </div>

    <br><br>
    <div class="row" id="contact">

      <div class="col-sm-4 mx-auto">
        <form>
          <h3>Contact us</h3>
          <p>Let us know your suggestions and thoughts!</p>
          <div class="form-group">
            <label for="comment">Comment:</label>
            <textarea class="form-control" rows="5" id="comment"></textarea>
          </div>

          <label for="name" class="mr-sm-2">Name:</label>
          <input type="name" class="form-control mb-2 mr-sm-2" placeholder="Enter name" id="name">
          <label for="email" class="mr-sm-2">Email address:</label>
          <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
          <label for="tel" class="mr-sm-2">Phone(optional):</label>
          <input type="name" class="form-control mb-2 mr-sm-2" placeholder="Enter name" id="name">

          <button type="submit" class="btn btn-succes mb-2">Submit</button>
          <button type="reset" class="btn btn-danger">Reset</button>

      </div>

      </form>

    </div>
    <br>

    </div>
  </main>


</body>
<br>
<footer class="fixed-bottom">

  Copyright &#169 2021 Gabriela Istrate
  <br>
  <a href="#header">HOME</a>

</footer>

</html>