Skip to content

Instantly share code, notes, and snippets.

@HeNy007

HeNy007/index.html

Created February 8, 2022 00:11
Show Gist options
  • Save HeNy007/a15fa098b0f1b5fb7bcd62eb1e607be5 to your computer and use it in GitHub Desktop.
Save HeNy007/a15fa098b0f1b5fb7bcd62eb1e607be5 to your computer and use it in GitHub Desktop.
Download ZIP
Stories
Raw
index.html
<div class="container">
<div class="yourstory">
<img src="https://i.hizliresim.com/H5uEWE.jpg" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1612226466724-0ec9b5179a75?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1611599279852-a25936291e0d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1611415712342-babb47c53307?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1611656993299-9f9d73232b9c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1611420150678-705bd0dd8077?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
<div class="story">
<img src="https://images.unsplash.com/photo-1611472196818-3d3f02d56c2f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="" draggable="false">
</div>
</div>
Raw
style.scss
body {
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
column-gap: 1rem;
min-height: 100vh;
max-width: 95%;
overflow-x: auto;
}
.yourstory {
display: flex;
justify-content: center;
align-items: center;
border: 3px dashed #ff276f;
padding: 4px;
cursor: pointer;
border-radius: 50%;
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
&:active {
transform: scale(.96);
}
}
.story {
min-height: 200px;
min-width: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #ff276f;
padding: 4px;
cursor: pointer;
border-radius: 50%;
img {
border-radius: 50%;
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
&:active {
transform: scale(.96);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment