Skip to content

Commit

Permalink
Navigation
Browse files Browse the repository at this point in the history 
Responsive viewport
  • Loading branch information
@leobardooscar
leobardooscar committed Jun 20, 2024
1 parent 49fe4ae commit 3ac497c
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 19 deletions.
40 changes: 29 additions & 11 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ html

body {
border: 0px solid red;
width: 100% !important;
width: 100% !important;
/* */
max-width: auto !important;
/* */
min-width: 1280px !important; /* 1280 */
min-width: auto !important; /* 1280 */

/* [TOP] [RIGHT] [BOTTOM] [LEFT] */
margin: 0px;
Expand All @@ -23,7 +23,8 @@ header
width: auto;
}

nav
/* Main Navbar */
nav#main-navbar
{
border-top: 5px solid #1C4583;
border-bottom: 2px solid gray;
Expand All @@ -34,50 +35,67 @@ nav
background-color: #1C4583 !important
}

nav a.nav-link
nav#main-navbar a.nav-link
{
color: #fff !important;
}

/* Clouds & Other Meteors */
div#title_collection
{
border: 0px solid red;
display: inline;
}

/* Secondary Navbar */
nav#secondary-navbar
{

border: 0px solid red;
/* [TOP] [RIGHT] [BOTTOM] [LEFT] */
margin: 0;
padding: 5px 0 0 0 !important;
width: auto;
background-color: #76C1E3 !important
}


/* Select any cloud to Go to image collection */
div#title_collection small
{
display: block;
float: left;
margin: 0;
padding: 15px 10px 0px 20px;
color: #fff
/* [TOP] [RIGHT] [BOTTOM] [LEFT] */
padding: 5px 0 0px 40px;
color: #000
}

/* Clouds & Oter Meteors */
div#title_collection h2
{
margin-bottom: 0;
border: 0px solid red;
/* [TOP] [RIGHT] [BOTTOM] [LEFT] */
padding: 0 0 0 40px;
padding: 0 ;
margin: 0 0 0 38px;
color: #fff;
float: left
}

div#title_collection h2 a
{
color: #fff;
text-decoration: none;
}

/* Clouds spotted in Guadalajara Jalisco */
h1#subtitle
{
margin-bottom: 0;
/* [TOP] [RIGHT] [BOTTOM] [LEFT] */
text-align: center;
padding: 50px 0 60px 0;
padding: 10px 0 60px 0;
background-color: #76C1E3;
color: #000;

}


Expand Down
66 changes: 58 additions & 8 deletions index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@
<body>

<header>
<nav class="navbar navbar-expand-lg " >
<nav class="navbar navbar-expand-lg" id="main-navbar" >
<div class="container-fluid">
<div id="title_collection"> <h2> <a href="https://leobardooscar.github.io/clouds" title="Go to full coillection"> Clouds & Other Meteors...</a> </h2> <small>Select any cloud to Go to image collection. </small></div>
<div id="title_collection"> <h2> <a href="https://leobardooscar.github.io/clouds" title="Go to full coillection"> Clouds & Other Meteors...</a> </h2> </div>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> <!-- Hamburguer --> </span>
Expand Down Expand Up @@ -114,14 +114,28 @@
<li><a class="dropdown-item" href="https://leobardooscar.github.io/clouds/browse.html#stratus">Stratus</a></li>
</ul>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
OTHER Clouds
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://leobardooscar.github.io/clouds/browse.html#cumulus">Cumulus</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://leobardooscar.github.io/clouds/browse.html#stratocumulus">Stratocumulus</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://leobardooscar.github.io/clouds/browse.html#stratus">Stratus</a></li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="https://leobardooscar.github.io/clouds/">/&nbsp; Full Collection</a>
<a class="nav-link" href="https://leobardooscar.github.io/clouds/">&nbsp; Full Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://iam.cucei.udg.mx/radar/iam/"> /&nbsp; Doppler Radar </a>
</li>
<!-- <li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="#"> /&nbsp; About</a>
</li>
-->
Expand All @@ -130,8 +144,44 @@
</div>
</div>
</nav>

<h1 id="subtitle">Clouds spotted in Guadalajara Jalisco, Mexico (20.6752° N, 103.3473° W). </h1>

<!-- //////////////////////////////////////////////////////////////////////// SECOND NAVIGATION BAR /////////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////////// SECOND NAVIGATION BAR /////////////////////////////////////////////////////////////////////// -->

<nav class="navbar navbar-expand-lg" id="secondary-navbar" >
<div class="container-fluid">
<div id="title_collection"> <small> Select any cloud to Go to image collection. </small></div>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> -->
<!-- <span class="navbar-toggler-icon"> Hamburguer </span> -->
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<!-- Align left < ME MS-auto > align right -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="https://leobardooscar.github.io/clouds/">/&nbsp; Full Collection</a>
</li>

<li class="nav-item">
<a class="nav-link" href="http://iam.cucei.udg.mx/radar/iam/"> /&nbsp; Clouds info </a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://iam.cucei.udg.mx/radar/iam/"> /&nbsp; About </a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#"> /&nbsp; About</a>
</li>
-->
</ul>

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

<!-- //////////////////////////////////////////////////////////////////////// SECOND NAVIGATION BAR /////////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////////// SECOND NAVIGATION BAR /////////////////////////////////////////////////////////////////////// -->

<h1 id="subtitle">Clouds spotted in Guadalajara Jalisco, Mexico </h1> <!-- <p>(20.6752° N, 103.3473° W). </p> -->
</header>

<div class="wrapper">
Expand Down Expand Up @@ -382,7 +432,7 @@ <h6 class="text-uppercase fw-bold mb-4">
<p> In meteorology, a phenomenon observed in the atmosphere or on the surface of the Earth is known as a <i>meteor</i>. It may be a form of precipitation, a suspension or a deposit of liquid or solid particles. </p>
<p>
The present collection consists of <i>meteors</i> observed from 2010 to 2024.
Sighting point: Guadalajara Metropolitan Area (Northwest zone). Western Mexico region (20.6752° N, 103.3473° W).
Sighting point: Guadalajara Metropolitan Area (Northwest zone). Western Mexico region (20.6752° N, 103.3473° W). 1,500 MAMSL.
</p>
</div>
<!-- Grid column -->
Expand Down Expand Up @@ -454,7 +504,7 @@ <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<!-- Section: Links -->

<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
<div class="text-center p-4 footer-licence" style="background-color: rgba(0, 0, 0, 0.05);">

&copy; 2024, Leobardo Óscar Alcántara Ocaña. &nbsp;
<span>
Expand Down

0 comments on commit 3ac497c

Please sign in to comment.