Looks like fullpage.js automatically changed my h1 and other fonts font-weight to bolder when I implemented it. I've tried adding !important rule on font-weight to override it but no results so far. I'm using Lato font and everything worked perfectly fine before I added fullpage.js.
Another matter is making dot on the welcome site the only element visible (now there are footer and navigation also). Footer and navigation (static on all sites) shouldn't appear on the welcome page, only on the rest of the sites. Help appreciated!
Hyperlink: Workspace. You can check fonts when u scroll down a page.
CODE:
HTML:
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/fullPage.js-master/jquery.fullPage.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: true,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#fff'],
paddingTop: '',
paddingBottom: '',
fixedElements: '#main-nav, #main-footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section">
<div class="wrapper">
<a href="hello.html"><img id="dot" class="wrapper__dot" src="images/random_pulsing_dot.svg" alt="Click to enter site"></a>
</div>
</div>
<div class="section">
<nav id="main-nav" class="side-bar__nav">
<ul>
<li><a href="hello.html" class="nav__link current">hello</a><img class="small_dot pink" src="images/link_dot_small_pink.svg"></li>
<li><a href="zespol.html" class="nav__link">zespół</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="onas.html" class="nav__link">o nas</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="misja.html" class="nav__link">misja</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="oferta.html" class="nav__link">oferta</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="wspolpraca.html" class="nav__link">współpraca</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="brief.html" class="nav__link">wypełnij brief</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="kontakt.html" class="nav__link">kontakt</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
</ul>
</nav>
<div class="main-container">
<h1 class="main-header">Hipster Ipsum Amet.</h1>
</div>
<footer id="main-footer">
<h2 class="footer__text">dolor.</h2>
</footer>
</div>
</div>
</body>
</html>
CSS:
html {
width:100%;
height:100%;
}
body {
height: 100%;
width: 100%;
margin:0 auto;
padding: 0;
font-size: 1em;
}
* {
box-sizing: border-box;
-webkit-font-feature-settings: "liga" 0;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: no-common-ligatures;
}
/*
* index.html page
*/
.wrapper {
position: absolute;
max-width: 45%;
max-height:45%;
top:50%;
left:50%;
}
#dot {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
/* Dot animation */
@keyframes pulse {
from {
width: 70px;
height: 70px;
}
to {
width: 90px;
height: 90px;
}
}
#dot {
animation: pulse 1200ms ease-in-out infinite alternate;
}
/*
* Hello.html Page
*/
.main-container {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
/*
* before/after img inline
* Navigation
*/
.nav__link a{
visibility: hidden;
}
.small_dot {
vertical-align:middle;
padding-left: 10px;
}
.side-bar__nav{
position: absolute;
padding: 10px;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.side-bar__nav ul li{
list-style: none;
text-align: right;
margin-right: 50px;
padding-top: 15px;
}
.side-bar__nav ul li img {
margin-bottom: 5px;
}
.small_dot:hover {
}
.side-bar__nav a {
text-decoration: none;
color: rgba(0,0,0,0);
font-family: 'Lato', sans-serif;
font-size: 1.1em;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.side-bar__nav:hover a {
color: rgba(0, 0, 0, 1);
}
.main-header {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer__text {
text-align: center;
}
.languages {
}
/*
* Typography
*/
h1 {
font-weight: 100;
font-size: 5.5em;
font-family: 'Lato', sans-serif;
}
h2 {
font-family: 'Noto Serif', serif;
font-weight: 700;
font-size: 3.5em;
}
img {
max-width: 100%;
}
@media (max-width: 600px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
.side-bar__nav {
display: none;
}
}
@media (max-width: 1228px) {
.side-bar__nav {
display: none;
}
}
