Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsiveness and Navigational Bar #20

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Responsiveness and Navigational Bar #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const navslide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');

burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');

//burger animation
burger.classList.toggle('toggle');
});
}

navslide();
26 changes: 17 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,22 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-bar">
<div class="logo">Snapshot</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<nav>
<div class="nav-bar">
<div class="logo">Snapshot</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>

<!-- Hero section -->

Expand Down Expand Up @@ -103,5 +110,6 @@ <h4>Send a message</h4>
</div>
<h6>Copyright &copy; 2021 Zuri Training.</h6>
</div>
<script src="app.js"></script>
</body>
</html>
152 changes: 145 additions & 7 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,110 @@ div.nav-bar {
background: #304353;
}

div.logo {
.logo {
font-size: 1.5rem;
color: #bcc3c7;
font-size: 20px;
letter-spacing: 5px;
}

ul.nav-links {
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
margin: 0;
padding: 0;
}

ul li {
.nav-links li{
margin: 0 2vw;
list-style: none;
font-size: 1.1rem;
}

ul li a {
.nav-links a{
text-decoration: none;
color: #88949B;
padding: 0.5vw;
}

ul li a:hover {
li a:hov er {
color: #304353;
background: #fff;
background: rgb(223, 220, 220);
padding: 0.5rem;
}
.burger{
display: none;
}

.burger div{
width: 15px;
height: 1.5px;
background-color: #f0f0f0;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width: 1000px) {
.nav-links{
width: 60%;
}
}

@media screen and (max-width: 760px) {
body{
overflow-x: hidden;
}
div.nav-bar {
/* display: flex;
justify-content: space-between;
padding: 1rem;
width: 100vw; */
}
div.logo {
font-size: 1.3rem;
}
.nav-links {
flex-direction: column;
position: absolute;
height: 60vh;
right: 0;
top: 8vh;
background-color: #304353;
display: flex;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
/* opacity: 0; */
}
.burger{
display: block;
cursor: pointer;
}

/* ul li {
margin: 0;
font-size: 1rem;
}
ul li a {
display: block;
} */
}

.nav-active{
transform: translateX(0%);
}
.toggle .line1{
transform: rotate(-55deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(55deg) translate(-5px,-6px);
}

div.hero-section {
background: #304353;
Expand Down Expand Up @@ -86,6 +162,19 @@ div.hero-content-btn a {
border-radius: 3px;
letter-spacing: 2px;
}
@media screen and (max-width: 760px) {
div.hero-section {
padding: 5rem 2rem;
}
div.hero-content-heading h3 {
text-align: center;
font-size: 1.6rem;
text-transform: none;
}
div.hero-content-heading p {
font-size: 0.6rem;
}
}

div.hero-background {
background: #f0f0f0;
Expand Down Expand Up @@ -129,6 +218,27 @@ div.hero-background-pos {
border-radius: 50%;
box-shadow: 2px 2px 15px 0 rgb(135 135 135 / 40%);
}
@media screen and (max-width: 760px) {
div.hero-background{
padding: 3rem;
}
div.background {
padding: 10px 30px;
width: 300px;
height: 250px;
}
div.background h4 {
padding: 1rem;
font-size: 1rem;
}
div.background p {
padding-left: 1rem;
font-size: 0.8rem;
}
div.hero-background-pos {
display: none;
}
}

div.snapshot-team {
background: #f0f0f0;
Expand Down Expand Up @@ -189,7 +299,35 @@ div.box3 h5 {
color: #E44C65;
font-size: 1rem;
}

@media screen and (max-width: 760px) {
div.snapshot-team {
padding: 2rem;
background: #f0f0f0;
text-align: center;
}
div.snapshot-team h2 {
font-size: 1.2rem;
}
div.snapshot-team p {
font-size: 0.8rem;
}
div.snapshot-box {
padding: 2rem 0rem;
}
div.snapshot-box-content {
display: flex;
flex-direction: column;
}
div.box1 {
width: 300px;
height: 230px;

}
div.box3 {
width: 300px;
height: 230px;
}
}
div.circle {
display: flex;
margin: 0 auto;
Expand Down