diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md deleted file mode 100644 index 97dd393..0000000 --- a/README.md +++ /dev/null @@ -1,46 +0,0 @@ -usage: git [--version] [--help] [-C ] [-c =] - [--exec-path[=]] [--html-path] [--man-path] [--info-path] - [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare] - [--git-dir=] [--work-tree=] [--namespace=] - [--super-prefix=] [--config-env==] - [] - -These are common Git commands used in various situations: - -start a working area (see also: git help tutorial) - clone Clone a repository into a new directory - init Create an empty Git repository or reinitialize an existing one - -work on the current change (see also: git help everyday) - add Add file contents to the index - mv Move or rename a file, a directory, or a symlink - restore Restore working tree files - rm Remove files from the working tree and from the index - sparse-checkout Initialize and modify the sparse-checkout - -examine the history and state (see also: git help revisions) - bisect Use binary search to find the commit that introduced a bug - diff Show changes between commits, commit and working tree, etc - grep Print lines matching a pattern - log Show commit logs - show Show various types of objects - status Show the working tree status - -grow, mark and tweak your common history - branch List, create, or delete branches - commit Record changes to the repository - merge Join two or more development histories together - rebase Reapply commits on top of another base tip - reset Reset current HEAD to the specified state - switch Switch branches - tag Create, list, delete or verify a tag object signed with GPG - -collaborate (see also: git help workflows) - fetch Download objects and refs from another repository - pull Fetch from and integrate with another repository or a local branch - push Update remote refs along with associated objects - -'git help -a' and 'git help -g' list available subcommands and some -concept guides. See 'git help ' or 'git help ' -to read about a specific subcommand or concept. -See 'git help git' for an overview of the system. diff --git a/cssMemSlider/images/mem1.jpg b/cssMemSlider/images/mem1.jpg new file mode 100644 index 0000000..0ebb7ee Binary files /dev/null and b/cssMemSlider/images/mem1.jpg differ diff --git a/cssMemSlider/images/mem2.jpg b/cssMemSlider/images/mem2.jpg new file mode 100644 index 0000000..9be73d3 Binary files /dev/null and b/cssMemSlider/images/mem2.jpg differ diff --git a/cssMemSlider/images/mem3.jpg b/cssMemSlider/images/mem3.jpg new file mode 100644 index 0000000..5db574a Binary files /dev/null and b/cssMemSlider/images/mem3.jpg differ diff --git a/cssMemSlider/images/mem4.jpg b/cssMemSlider/images/mem4.jpg new file mode 100644 index 0000000..14655bc Binary files /dev/null and b/cssMemSlider/images/mem4.jpg differ diff --git a/cssMemSlider/images/mem5.jpg b/cssMemSlider/images/mem5.jpg new file mode 100644 index 0000000..bedacc8 Binary files /dev/null and b/cssMemSlider/images/mem5.jpg differ diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html new file mode 100644 index 0000000..b3f884f --- /dev/null +++ b/cssMemSlider/index.html @@ -0,0 +1,64 @@ + + + + + + + + + cssMemSlider + + + +
+
+ + + + + + +
+
mem1
+
mem2
+
mem3
+
mem4
+
mem5
+
+ +
+
+
+

То, что вы увидели называется "Мем".

+

Нельзя просто так взять и ...

+

Ты недооцениваешь мою мощь!

+

Ну давай, расскажи мне....

+

Жизнь - боль

+
+
+ +
+ + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css new file mode 100644 index 0000000..be3b77a --- /dev/null +++ b/cssMemSlider/style.css @@ -0,0 +1,193 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #202325; +} + +.container { + padding: 50px 30px; +} + +.wrapper { + width: 70%; + height: 70vh; + margin: 0 auto; + overflow: hidden; +} + +.controls { + display: flex; +} + +.label { + height: 38px; + width: 38px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 5px; + cursor: pointer; +} + +.label:last-of-type { + margin-right: 0; +} + +.bar { + height: 16px; + width: 16px; + background-color: #72adff; + border: 1px #72adff solid; + border-radius: 50%; + transition: all 0.4s; +} + +#slide1:checked ~ .wrapper-2 .controls label:nth-of-type(1) .bar, +#slide2:checked ~ .wrapper-2 .controls label:nth-of-type(2) .bar, +#slide3:checked ~ .wrapper-2 .controls label:nth-of-type(3) .bar, +#slide4:checked ~ .wrapper-2 .controls label:nth-of-type(4) .bar, +#slide5:checked ~ .wrapper-2 .controls label:nth-of-type(5) .bar { + background-color: transparent; +} + +.label:hover .bar { + background-color: #fff; + border: 1px #fff solid; +} +.label:active .bar { + opacity: 0.6; +} + +.slider { + width: 500%; + height: 85%; + display: flex; + transition: 0.5s all; + margin-bottom: 20px; +} + +.slides { + width: 20%; + height: 100%; +} + +input[name='point'] { + display: none; +} + +.slides img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 15px; +} + +#slide1:checked ~ .slider, +#slide1:checked ~ .wrapper-2 .slider-descr { + transform: translateX(0); +} + +#slide2:checked ~ .slider, +#slide2:checked ~ .wrapper-2 .slider-descr { + transform: translateX(-20%); +} + +#slide3:checked ~ .slider, +#slide3:checked ~ .wrapper-2 .slider-descr { + transform: translateX(-40%); +} + +#slide4:checked ~ .slider, +#slide4:checked ~ .wrapper-2 .slider-descr { + transform: translateX(-60%); +} + +#slide5:checked ~ .slider, +#slide5:checked ~ .wrapper-2 .slider-descr { + transform: translateX(-80%); +} + +.wrapper-2 { + display: flex; + justify-content: space-between; + align-items: center; +} + +.slider-descr-wrapper { + width: 70%; + overflow: hidden; +} + +.slider-descr-wrapper .slider-descr { + width: 500%; + display: flex; + transition: all 0.4s; +} + +.descr { + width: 20%; + color: #fff; + font-size: 20px; +} + +@media only screen and (max-width: 1025px) { + .container { + padding: 30px 30px; + } + + .wrapper { + width: 80%; + height: 80vh; + } +} + +@media only screen and (max-width: 820px) and (max-height: 400px) { + .slider { + height: 80%; + margin-bottom: 7px; + } + .label { + height: 36px; + width: 36px; + } +} + +@media only screen and (max-width: 706px) { + .wrapper { + width: 100%; + height: 85vh; + } + + .slider { + height: 70%; + margin-bottom: 0px; + } + + .wrapper-2 { + flex-direction: column-reverse; + } + + .slider-descr-wrapper { + align-self: flex-start; + } + + .controls { + align-self: center; + margin-top: 10px; + margin-bottom: 10px; + } + + .descr { + font-size: 18px; + } +} + +@media only screen and (max-width: 565px) { + .slider { + height: 50%; + } +}