Skip to content

CSS Meme Slider #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
drbliman wants to merge 13 commits into
base: main
Choose a base branch
from
Open

CSS Meme Slider #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
59d7bd4
feat: tets3 (Tue, Sep 12, 2023 10:59:44 AM)
drbliman Sep 12, 2023
cf160b5
feat: added head html (Tue, Sep 12, 2023 11:17:17 AM)
drbliman Sep 12, 2023
c350e10
feat: added font and css (Tue, Sep 12, 2023 11:57:09 AM)
drbliman Sep 12, 2023
6009443
feat: added script, img1-img4 (Tue, Sep 12, 2023 01:39:54 PM)
drbliman Sep 12, 2023
f7813d2
feat: added test (Tue, Sep 12, 2023 06:50:40 PM)
drbliman Sep 12, 2023
f1fd5ec
feat: delited js (Wed, Sep 13, 2023 10:42:41 AM)
drbliman Sep 13, 2023
6a38f4f
feat: added slider img (Wed, Sep 13, 2023 11:56:07 AM)
drbliman Sep 13, 2023
589ec0c
feat: added text slider (Wed, Sep 13, 2023 01:05:36 PM)
drbliman Sep 13, 2023
40c2497
feat: changed title (Wed, Sep 13, 2023 01:26:08 PM)
drbliman Sep 13, 2023
09f10eb
feat: added animation input (Wed, Sep 13, 2023 01:43:59 PM)
drbliman Sep 13, 2023
dfddf08
feat: added area around buttons (Thu, Sep 14, 2023 10:26:39 AM)
drbliman Sep 14, 2023
bae51bb
fix: fix folder (Thu, Sep 14, 2023 10:29:09 AM)
drbliman Sep 14, 2023
15a0290
feat: added favicon (Thu, Sep 14, 2023 10:44:52 AM)
drbliman Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added cssMemeSlider/img/favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cssMemeSlider/img/imd1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cssMemeSlider/img/imd2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cssMemeSlider/img/imd3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cssMemeSlider/img/imd4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions cssMemeSlider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Meme Slider</title>
<link type="Image/x-icon" href="../cssMemeSlider/img/favicon-32x32.png" rel="icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href="./style/style_body.css" rel="stylesheet">
</head>
<body>
<h1>CSS Meme Slider</h1>
<div class="container">
<div class="slider_body">
<input type="radio" name="radio" id="radio1" checked>
<input type="radio" name="radio" id="radio2">
<input type="radio" name="radio" id="radio3">
<input type="radio" name="radio" id="radio4">
<div class="s1">
<div class="img">
<img src="../cssMemeSlider/img/imd1.jpg" alt="imd1" id="img1">
</div>
<div class="img">
<img src="../cssMemeSlider/img/imd2.jpg" alt="imd2" id="img2">
</div>
<div class="img">
<img src="../cssMemeSlider/img/imd3.jpg" alt="imd3" id="img3">
</div>
<div class="img">
<img src="../cssMemeSlider/img/imd4.jpg" alt="imd4" id="img4">
</div>
</div>
<div class="container1">
<div class="title_h1">
<div class="title_h2">
<div class="title">When it is prohibited to use js and px in that task</div>
<div class="title">When you see a photo of the screen and not a screenshot</div>
<div class="title">This is me running to look at my grades for the Cross-Check</div>
<div class="title">When you're trying to pronounce "tough", "through", "thought", "though" correctly</div>
</div>
</div>
<div class="button">
<label for="radio1" class="my_button_b1">
<span></span>
</label>
<label for="radio2" class="my_button_b2">
<span></span>
</label>
<label for="radio3" class="my_button_b3">
<span></span>
</label>
<label for="radio4" class="my_button_b4">
<span></span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
168 changes: 168 additions & 0 deletions cssMemeSlider/style/style_body.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
body {
margin: 0 auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #25282A;
font-family: 'Montserrat', sans-serif;
color: #FFFFFF;
}
.container {
display: flex;
flex-direction: column;
width: 80%;
max-width: 46rem;
}
.slider_body {
margin: 0 auto;
display: flex;
width: 100%;
flex-direction: column;
overflow: hidden;
}
.s1 {
display: flex;
width: 400%;
transition: all 0.6s ease;
}
.img {
width: 25%;
height: 100%;
}
.img img {
object-fit: contain;
width: 100%;
height: 100%;
}
.container_content {
width: 100%;
margin-top: 4%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.button {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 10rem;
height: 1rem;
}
.button div {
width: 1.5rem;
height: 1.5rem;
}
input[name="radio"] {
display: none;
}
.my_button_b1,
.my_button_b2,
.my_button_b3,
.my_button_b4 {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
}
.my_button_b1:hover,
.my_button_b2:hover,
.my_button_b3:hover,
.my_button_b4:hover {
cursor: pointer;
}
.my_button_b1 span,
.my_button_b2 span,
.my_button_b3 span,
.my_button_b4 span {
display: flex;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #71ABFE;
transition: all 0.6s ease;
}
.my_button_b1:hover span,
.my_button_b2:hover span,
.my_button_b3:hover span,
.my_button_b4:hover span {
box-shadow: 0.2em 0.2em .4em red, -0.5em 0 .4em olive;
}
.title_h1 {
width: 52rem;
overflow: hidden;
}
.title_h2 {
width: 400%;
display: flex;
flex-direction: row;
overflow: hidden;
transition: all 0.6s ease;
}
.title {
width: 50rem;
}
.container1 {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
margin-top: 2rem;
}
@media (max-width: 800px) {
.container1 {
flex-direction: column-reverse;
align-items: center;
}
.title_h1 {
width: 100%;
margin-top: 2rem;
margin-left: 0;
}
.title {
width: 100%;
}
}


#radio1:checked ~ .s1 {
margin-left: 0;
}
#radio2:checked ~ .s1 {
margin-left: -100%;
}
#radio3:checked ~ .s1 {
margin-left: -200%;
}
#radio4:checked ~ .s1 {
margin-left: -300%;
}

#radio1:checked ~ .container1 .button .my_button_b1 span {
background-color: #2bffff;
}
#radio2:checked ~ .container1 .button .my_button_b2 span {
background-color: #2bffff;
}
#radio3:checked ~ .container1 .button .my_button_b3 span {
background-color: #2bffff;
}
#radio4:checked ~ .container1 .button .my_button_b4 span {
background-color: #2bffff;
}

#radio1:checked ~ .container1 .title_h1 .title_h2 {
margin-left: 0;
}
#radio2:checked ~ .container1 .title_h1 .title_h2 {
margin-left: -100%;
}
#radio3:checked ~ .container1 .title_h1 .title_h2 {
margin-left: -200%;
}
#radio4:checked ~ .container1 .title_h1 .title_h2 {
margin-left: -300%;
}
Empty file removed index.html
View file
Open in desktop
Empty file.