Skip to content

Commit

Permalink
feat: update html and css files (Sat, Sep 14, 2024 11:25:02 PM)
Browse files Browse the repository at this point in the history
  • Loading branch information
@talestris
talestris committed Sep 14, 2024
1 parent 082ce2e commit c29cb56
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 71 deletions.
61 changes: 22 additions & 39 deletions cssMemeSlider/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,30 @@

<body>
<div class="container">
<div class="controls">
<input type="radio" name="control" id="image1">
<input type="radio" name="control" id="image2">
<input type="radio" name="control" id="image3">
<input type="radio" name="control" id="image4">
<input type="radio" name="control" id="image5" checked>
</div>
<div class="slides">
<label for="image1" id="slide1" class="slide">
<img src="./assets/images/pets-timmy.png" alt="">
</label>
<label for="image2" id="slide2" class="slide">
<img src="./assets/images/pets-charly.png" alt="">
</label>
<label for="image3" id="slide3" class="slide">
<img src="./assets/images/pets-freddie.png" alt="">
</label>
<label for="image4" id="slide4" class="slide">
<img src="./assets/images/pets-scarlet.png" alt="">
</label>
<label for="image5" id="slide5" class="slide">
<img src="./assets/images/pets-sophia.png" alt="">
</label>
<img src="./assets/images/pets-charly.png" id="slide1" alt="">
<img src="./assets/images/pets-freddie.png" id="slide2" alt="">
<img src="./assets/images/pets-scarlet.png" id="slide3" alt="">
<img src="./assets/images/pets-sophia.png" id="slide4" alt="">
<img src="./assets/images/pets-timmy.png" id="slide5" alt="">
</div>
<div class="controls">
<div class="control1">
<a href="#slide1"></a>
</div>
<div class="control2">
<a href="#slide2"></a>
</div>
<div class="control3">
<a href="#slide3"></a>
</div>
<div class="control4">
<a href="#slide4"></a>
</div>
<div class="control5">
<a href="#slide5"></a>
</div>
</div>
<ul class="list">
<li class="list-item1">
<p>text1</p>
</li>
<li class="list-item2">
<p>text2</p>
</li>
<li class="list-item3">
<p>text3</p>
</li>
<li class="list-item4">
<p>text4</p>
</li>
<li class="list-item5">
<p>text5</p>
</li>
</ul>
</div>
</body>

Expand Down
61 changes: 29 additions & 32 deletions cssMemeSlider/styles/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,53 @@
html, body {
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
}

.slide {
.slides {
margin: 0 auto;
width: 80%;
height: 80%;
transition: transform 0.3s linear;
cursor: pointer;
width: 50%;
height: 50%;
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}

.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.slides img {
scroll-snap-align: start;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
object-fit: cover;
}

.controls {
display: flex;
order: 2;
transform: translateX(30%);
width: 20%;
justify-content: space-between;
margin-top: 10%;
margin-left: 70%;
}

.slides {
order: 1;
}

.slide {
width: 100%;
height: 100%;
object-fit: cover;
height: 10%;
transition: 0.3s;
}

.list {
list-style-type: none;
.control1, .control2, .control3, .control4, .control5 {
width: 1em;
height: 1em;
background-color: gold;
display: flex;
order: 2;
width: 30%;
justify-content: space-between;
}

.controls a:hover {
opacity: 0.7;
}

0 comments on commit c29cb56

Please sign in to comment.