Kvnbbg · September 6, 2024 14:06
diff --git a/css-scroll-snap.markdown b/css-scroll-snap.markdown
diff --git a/index.html b/index.html
 <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
 <script src="https://codepen.io/denic/pen/YzyPzKG.js"></script>
diff --git a/style.css b/style.css
 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
 <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" />
	<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" />