Kvnbbg · September 6, 2024 14:06 · Sep 6, 2024
diff --git a/css-scroll-snap.markdown b/css-scroll-snap.markdown
@@ -0,0 +1,7 @@
+CSS Scroll Snap
+---------------
+
+
+A [Pen](https://codepen.io/denic/pen/ExNZmwd) by [Marko](https://codepen.io/denic) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/ExNZmwd).
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<div class="wrapper">
+  <div class="section">
+    Content 1
+  </div>
+
+  <div class="section bg-blue">
+    Content 2
+  </div>
+
+  <div class="section bg-green">
+    Content 3
+  </div>
+
+  <div class="section">
+    Content 4
+  </div>
+
+  <div class="section bg-blue">
+    Content 5
+  </div>
+</div>
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://codepen.io/denic/pen/YzyPzKG.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper {
+  height: 100vh;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+}
+
+.section {
+  scroll-snap-align: center;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #de5448;
+  color: #fff;
+  font-size: 3em;
+}
+
+.bg-blue {
+  background: #4267b2;
+}
+
+.bg-green {
+  background: #4CAF50;
+}
diff --git a/styles b/styles
@@ -0,0 +1,2 @@
+<link href="https://codepen.io/denic/pen/YzyPzKG.css" rel="stylesheet" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://codepen.io/denic/pen/YzyPzKG.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link href="https://codepen.io/denic/pen/YzyPzKG.css" rel="stylesheet" />
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />