Skip to content

Instantly share code, notes, and snippets.

@padupuy

padupuy/index.html

Last active October 25, 2017 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save padupuy/302d0034cb89f6b2b315bcc76bc41b33 to your computer and use it in GitHub Desktop.
Save padupuy/302d0034cb89f6b2b315bcc76bc41b33 to your computer and use it in GitHub Desktop.
Download ZIP
horizontal scrolling
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>PAX</title>
<meta name="description" content="PAX gist" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/style.css?" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<div class="fullscreen">
<main class="slider-container">
<section class="slide">
</section>
<section class="slide">
</section>
<section class="slide">
</section>
</main>
</div>
</body>
</html>
Raw
style.css
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body,
main {
height: 100%;
margin: 0;
padding: 0;
}
.fullscreen {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.slide {
min-width: 100vw;
width: 100vw;
min-height: 100%;
height: 100%;
max-height: 100%;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment