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>
|
||||
<!--Nav-->
|
||||
<div class="nav-wrapper">
|
||||
<nav class="navBar">
|
||||
<nav class="nav-container">
|
||||
<div class="nav-left">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<h1>Nancy Pannikkat</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div id="nav-links-container">
|
||||
<ul id="navList">
|
||||
<li><a class="navlink" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink active" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||
<ul class="nav-menu">
|
||||
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink active" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
16
buy.html
16
buy.html
@ -36,19 +36,19 @@
|
||||
<body>
|
||||
<!--Nav-->
|
||||
<div class="nav-wrapper">
|
||||
<nav class="navBar">
|
||||
<nav class="nav-container">
|
||||
<div class="nav-left">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<h1>Nancy Pannikkat</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div id="nav-links-container">
|
||||
<ul id="navList">
|
||||
<li><a class="navlink" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed active" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||
<ul class="nav-menu">
|
||||
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed active" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<main>
|
||||
|
||||
131
css/general.css
131
css/general.css
@ -23,14 +23,13 @@ body {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
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%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav {
|
||||
max-width: 1000px;
|
||||
min-width: 600px;
|
||||
margin: 5px auto;
|
||||
padding: 17px;
|
||||
display: flex;
|
||||
@ -49,15 +48,7 @@ nav * {
|
||||
.nav-left {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav-logo {
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
#nav-logo:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.5s;
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
#nav-logo-a {
|
||||
@ -66,17 +57,16 @@ nav * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
/* nav ul {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-flex;
|
||||
line-height: 30px;
|
||||
margin: 10px 7px;
|
||||
padding: 3px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
} */
|
||||
|
||||
.navlink {
|
||||
color:rgb(160, 160, 160);
|
||||
@ -117,8 +107,111 @@ a:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#nav-links-container {
|
||||
display: inline-flex;
|
||||
/* Mobile Nav */
|
||||
.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 {
|
||||
@ -132,7 +225,7 @@ main {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
padding-top: 30px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -305,11 +398,11 @@ option {
|
||||
color: #2c2c2c;
|
||||
font-size: 26px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
height: 60px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
16
index.html
16
index.html
@ -39,19 +39,19 @@
|
||||
<body>
|
||||
<!--Nav-->
|
||||
<div class="nav-wrapper">
|
||||
<nav class="navBar">
|
||||
<nav class="nav-container">
|
||||
<div class="nav-left">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<h1>Nancy Pannikkat</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div id="nav-links-container">
|
||||
<ul id="navList">
|
||||
<li><a class="navlink active" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||
<ul class="nav-menu">
|
||||
<li><a class="navlink active" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
|
||||
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -16,6 +16,13 @@ document.addEventListener( 'DOMContentLoaded', function() {
|
||||
isNavigation: true,
|
||||
pauseOnFocus: true,
|
||||
speed: 2000,
|
||||
interval: 7000,
|
||||
} );
|
||||
splide.mount();
|
||||
window.onload = function() {
|
||||
uncheck('menu-btn');
|
||||
};
|
||||
function uncheck(id) {
|
||||
document.getElementById(id).checked = false;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user