Added mobile responsiveness
This commit is contained in:
James Dinh
parent
067300003f
commit
0b128e294c
16
about.html
16
about.html
@ -38,19 +38,19 @@
|
|||||||
<body>
|
<body>
|
||||||
<!--Nav-->
|
<!--Nav-->
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<nav class="navBar">
|
<nav class="nav-container">
|
||||||
<div class="nav-left">
|
<div class="nav-left">
|
||||||
<a id="nav-logo-a" href="./">
|
<a id="nav-logo-a" href="./">
|
||||||
<h1>Nancy Pannikkat</h1>
|
<h1>Nancy Pannikkat</h1>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="nav-links-container">
|
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||||
<ul id="navList">
|
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||||
<li><a class="navlink" href="./" title="gallery">Gallery</a></li>
|
<ul class="nav-menu">
|
||||||
<li><a class="navlink active" href="./about.html" title="about">About</a></li>
|
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||||
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
|
<li><a class="navlink active" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||||
</ul>
|
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
16
buy.html
16
buy.html
@ -36,19 +36,19 @@
|
|||||||
<body>
|
<body>
|
||||||
<!--Nav-->
|
<!--Nav-->
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<nav class="navBar">
|
<nav class="nav-container">
|
||||||
<div class="nav-left">
|
<div class="nav-left">
|
||||||
<a id="nav-logo-a" href="./">
|
<a id="nav-logo-a" href="./">
|
||||||
<h1>Nancy Pannikkat</h1>
|
<h1>Nancy Pannikkat</h1>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="nav-links-container">
|
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||||
<ul id="navList">
|
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||||
<li><a class="navlink" href="./" title="gallery">Gallery</a></li>
|
<ul class="nav-menu">
|
||||||
<li><a class="navlink" href="./about.html" title="about">About</a></li>
|
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||||
<li><a class="navlink boxed active" href="./buy.html" title="buy">Buy</a></li>
|
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||||
</ul>
|
<li><a class="navlink boxed active" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
131
css/general.css
131
css/general.css
@ -23,14 +23,13 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
background-color: rgba(229, 229, 229, 0.856);
|
background-color: rgba(229, 229, 229, 0.91);
|
||||||
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
|
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
min-width: 600px;
|
|
||||||
margin: 5px auto;
|
margin: 5px auto;
|
||||||
padding: 17px;
|
padding: 17px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -49,15 +48,7 @@ nav * {
|
|||||||
.nav-left {
|
.nav-left {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
float: inline-start;
|
||||||
|
|
||||||
#nav-logo {
|
|
||||||
margin: 5px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-logo:hover {
|
|
||||||
transform: scale(1.01);
|
|
||||||
transition: 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-logo-a {
|
#nav-logo-a {
|
||||||
@ -66,17 +57,16 @@ nav * {
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
/* nav ul {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li {
|
nav ul li {
|
||||||
display: inline-flex;
|
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
margin: 10px 7px;
|
margin: 10px 7px;
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.navlink {
|
.navlink {
|
||||||
color:rgb(160, 160, 160);
|
color:rgb(160, 160, 160);
|
||||||
@ -117,8 +107,111 @@ a:hover {
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-links-container {
|
/* Mobile Nav */
|
||||||
display: inline-flex;
|
.nav-container .nav-menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
clear: none;
|
||||||
|
float: right;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .nav-menu li {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 10px 7px;
|
||||||
|
padding: 3px 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* menu icon */
|
||||||
|
|
||||||
|
.nav-container .menu-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-icon .navicon {
|
||||||
|
background: rgb(123, 123, 123);
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
position: relative;
|
||||||
|
transition: background .2s ease-out;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-icon .navicon:before,
|
||||||
|
.nav-container .menu-icon .navicon:after {
|
||||||
|
background: rgb(123, 123, 123);
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
transition: all .2s ease-out;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-icon .navicon:before {
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-icon .navicon:after {
|
||||||
|
top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* menu btn */
|
||||||
|
|
||||||
|
.nav-container .menu-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-btn:checked ~ .nav-menu {
|
||||||
|
max-height: 300px;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-btn:checked ~ .menu-icon .navicon:before {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-btn:checked ~ .menu-icon .navicon:after {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
|
||||||
|
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.nav-container .nav-menu {
|
||||||
|
clear: both;
|
||||||
|
max-height: 0;
|
||||||
|
transition: max-height .2s ease-out;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.nav-container .nav-menu li {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.nav-container .menu-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
padding: 16px 20px;
|
||||||
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxed {
|
.boxed {
|
||||||
@ -132,7 +225,7 @@ main {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-top: 30px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@ -305,11 +398,11 @@ option {
|
|||||||
color: #2c2c2c;
|
color: #2c2c2c;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
height: 60px;
|
height: 50px;
|
||||||
border: none;
|
border: none;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|||||||
16
index.html
16
index.html
@ -39,19 +39,19 @@
|
|||||||
<body>
|
<body>
|
||||||
<!--Nav-->
|
<!--Nav-->
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<nav class="navBar">
|
<nav class="nav-container">
|
||||||
<div class="nav-left">
|
<div class="nav-left">
|
||||||
<a id="nav-logo-a" href="./">
|
<a id="nav-logo-a" href="./">
|
||||||
<h1>Nancy Pannikkat</h1>
|
<h1>Nancy Pannikkat</h1>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="nav-links-container">
|
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||||
<ul id="navList">
|
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||||
<li><a class="navlink active" href="./" title="gallery">Gallery</a></li>
|
<ul class="nav-menu">
|
||||||
<li><a class="navlink" href="./about.html" title="about">About</a></li>
|
<li><a class="navlink active" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||||
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
|
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||||
</ul>
|
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -16,6 +16,13 @@ document.addEventListener( 'DOMContentLoaded', function() {
|
|||||||
isNavigation: true,
|
isNavigation: true,
|
||||||
pauseOnFocus: true,
|
pauseOnFocus: true,
|
||||||
speed: 2000,
|
speed: 2000,
|
||||||
|
interval: 7000,
|
||||||
} );
|
} );
|
||||||
splide.mount();
|
splide.mount();
|
||||||
|
window.onload = function() {
|
||||||
|
uncheck('menu-btn');
|
||||||
|
};
|
||||||
|
function uncheck(id) {
|
||||||
|
document.getElementById(id).checked = false;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user