Skip to content

Nav Activity #8

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

Merged
merged 1 commit into from
Jul 7, 2018
Merged

Nav Activity #8

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
263 changes: 263 additions & 0 deletions study_group/sgXX_070718/answer/answer2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
/***********
GENERAL
************/
* {
box-sizing: border-box;
margin: 0;
outline: none;
}

html {
overflow-x: hidden;
}

/***********
Container
************/
.o-container {
transition: all 1000ms ease-out;
padding: 0 15px;
}

@media screen and (min-width: 768px) {
.o-container {
max-width: 750px;
position: relative;
margin: 0 auto;
}
}

@media screen and (min-width: 1024px) {
.o-container {
max-width: 970px;
}
}

@media screen and (min-width: 1440px) {
.o-container {
max-width: 1170px;
}
}

/***********
SOCIAL
***********/
.o-social {
list-style: none;
display: flex;
justify-content: space-between;
padding-left: 0;
}

.o-social li {
padding: 3px;
}

.o-social a {
text-decoration: none;
transition: all 200ms ease-in;
}

.o-social li:hover a {
color: #7beec7;
}

/***********
NAV
************/
nav {
width: 100%;
height: auto;
position: relative;
}

/***********
NAV - FRONT
************/

.c-nav__front {
display: flex;
justify-content: space-between;
}

.c-nav__logo {
position: relative;
top: 41px;
left: 0;
}

.c-nav__open {
position: relative;
right: 0;
top: 45px;
}

.c-nav__open span {
width: 25px;
height: 2px;
background-color: #545454;
margin-top: 3px;
display: block;
transition: all 200ms ease;
}

/***********
NAV - MAIN
************/
.c-nav__main {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
right: -100%;
transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
overflow: hidden;
}

.c-nav__main--open {
right:0;
transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.c-nav__main_bg {
width: 100%;
height: 100%;
line-height: 0;
}

.c-nav__main_bg img {
width: 100%;
height: 100%;
object-fit: cover;
}

.c-nav__main_container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

.c-nav__close {
position: relative;
top: 52px;
left: 28px;
}

.c-nav__close span {
width: 30px;
height: 2px;
background-color: #ffffff;
display: block;
}

.c-nav__close span:first-child {
transform: rotate(45deg);
}

.c-nav__close span:nth-child(2) {
transform: rotate(-45deg);
margin-top: -2px;
}

.c-nav__close:hover {
cursor: pointer;
}

.c-nav__close:hover span {
background-color: #7beec7;
}

.c-nav__menu_container {
margin-top: 85px;
}

.c-nav__menu_links {
text-transform: uppercase;
list-style: none;
padding-left: 0;
margin-left: 70px;
}

.c-nav__menu_links li {
display: block;
padding: 5px 0;
}

.c-nav__menu_links a {
font-family: 'Lekton', sans-serif;
font-size: 30px;
font-weight: 900;
color: #ffffff;
text-decoration: none;
letter-spacing: 3px;
transition: all 400ms ease;
}

.c-nav__menu_links li:hover a {
color: #7beec7;
}

.c-nav__connects {
display: none;
position: absolute;
bottom: 30px;
left: 70px;
transition: all 500ms ease;
}

.c-nav__social .o-social {
width: 160px;
}

.c-nav__social .o-social a {
color: #ffffff;
}

.c-nav__contact {
width: 200px;
color: #ffffff;
font-family: 'Lekton', sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 2.5pt;
line-height: 1.55em;
padding-top: 35px;
}

.c-nav__contact span {
display: inline;
padding-right: 30px;
}

@media screen and (min-width: 768px) {
.c-nav__front {
margin: 0 auto;
}

.c-nav__open:hover {
cursor: pointer;
}

.c-nav__open:hover span {
margin-top: 5px;
}

.c-nav__main {
width: 100%;
}

.c-nav__connects {
display: block;
}
}

@media screen and (min-width:769px) {
.c-nav__main {
width: 35%;
}

.c-nav__connects {
left: 50px;
}
}
102 changes: 102 additions & 0 deletions study_group/sgXX_070718/answer/answer2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Oak - Nav</title>
<link href="https://fonts.googleapis.com/css?family=Lekton:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="./css_lib/iconmoon.css">
<link rel="stylesheet" href="./answer2.css">
</head>

<body>
<!-- nav section start -->
<nav>
<div class="c-nav__front o-container">
<div class="c-nav__logo">
<img src="./img/logo.png" alt="Oak-Logo">
</div>

<div class="c-nav__open js-open_nav">
<span></span>
<span></span>
<span></span>
</div>
</div> <!-- /c-nav__front -->

<div class="c-nav__main js-main_nav">
<div class="c-nav__main_bg">
<img src="./img/nav_bg.jpg" alt="Nav Background">
</div>

<div class="c-nav__main_container">
<div class="c-nav__close js-close_nav">
<span></span>
<span></span>
</div>

<div class="c-nav__menu_container">
<ul class="c-nav__menu_links">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#blog">Blog</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul> <!-- /c-nav__menu_links -->
</div> <!-- /c-nav__menu_container -->

<div class="c-nav__connects">
<div class="c-nav__social">
<ul class="o-social">
<li>
<a href="#">
<i class="iconmoon-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="iconmoon-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="iconmoon-dribbble3"></i>
</a>
</li>
<li>
<a href="#">
<i class="iconmoon-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i class="iconmoon-linkedin2"></i>
</a>
</li>
</ul>
</div> <!-- /c-nav__social-->

<div class="c-nav__contact">
<span>T:</span>003 124 115
<span>E:</span>info@mail.com
</div>
</div> <!-- /c-nav__connects -->
</div> <!-- /c-nav__main_container -->
</div> <!-- /c-nav__main -->
</nav>
<!-- nav section end-->

<script src="./nav.js"></script>
</body>
</html>
Binary file added study_group/sgXX_070718/answer/css_lib/fonts/icomoon (1).ttf
View file
Open in desktop
Binary file not shown.
Binary file added study_group/sgXX_070718/answer/css_lib/fonts/icomoon.eot
View file
Open in desktop
Binary file not shown.
Loading