Skip to content

Instantly share code, notes, and snippets.

View cziem's full-sized avatar
:octocat:
Coding

Favour George C cziem

:octocat:
Coding
28 followers · 32 following
View GitHub Profile
@cziem
cziem / body_partial.html
Created November 12, 2018 08:59
add this line to the index.html file
…
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>
@cziem
cziem / content.html
Created November 12, 2018 09:04
Add the contents of the file
<header>
<div class="hero">
<div class="overlay">
<h2>Learn new sticky tricks</h2>
</div>
</div>
</header>
<nav>
<ul>
<li class="logo">
@cziem
cziem / normalize.css
Created November 12, 2018 09:09
reset the client stylesheet
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #f3f3f3;
}
@cziem
cziem / hero.css
Created November 12, 2018 10:08
style the hero section
.hero {
background: url('../assets/images/ext.jpeg');
background-size: cover;
background-position: center center;
height: 20rem;
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
@cziem
cziem / navbar.css
Created November 12, 2018 10:11
Get the navbar in shape
nav {
display: flex;
background: #0e496b;
width: 100%;
position: relative;
}
ul {
display: flex;
list-style: none;
@cziem
cziem / section.css
Created November 12, 2018 10:13
style the section and paragraphs
section {
padding: .5rem 2rem;
margin: 1rem auto;
color: #272727;
}
section h3 {
padding: 2rem 0 0.5rem;
}
@cziem
cziem / footer.css
Created November 12, 2018 10:15
give some life to the footer
@cziem
cziem / fixed-nav.css
Created November 12, 2018 10:17
the magical fixation
/* FIXED NAV */
.fixed_nav li.logo {
max-width: 500px;
display: inline-flex;
transform: translateX(0)
}
body.fixed_nav nav {
position: fixed;
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
@cziem
cziem / stickyNav.js
Created November 12, 2018 10:22
write a function to control fixation
const stickyNav = () => {
if (window.scrollY >= navTop) {
document.body.classList.add('fixed_nav')
} else {
document.body.classList.remove('fixed_nav')
}
}
@cziem
cziem / main.js
Created November 12, 2018 10:24
a full version of the main.js file
const nav = document.querySelector('nav')
let navTop = nav.offsetTop
const stickyNav = () => {
if (window.scrollY >= navTop) {
document.body.classList.add('fixed_nav')
} else {
document.body.classList.remove('fixed_nav')
}
}