diff --git a/README.md b/README.md index 3c25724..fe1e647 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# cssBayan \ No newline at end of file +# cssBayan +https://technot1k.github.io/cssBayan/cssBayan/index.html diff --git a/cssBayan/img/1.png b/cssBayan/img/1.png new file mode 100644 index 0000000..b38c626 Binary files /dev/null and b/cssBayan/img/1.png differ diff --git a/cssBayan/img/2.png b/cssBayan/img/2.png new file mode 100644 index 0000000..9bd1c8b Binary files /dev/null and b/cssBayan/img/2.png differ diff --git a/cssBayan/img/3.png b/cssBayan/img/3.png new file mode 100644 index 0000000..39f1dc8 Binary files /dev/null and b/cssBayan/img/3.png differ diff --git a/cssBayan/img/4.png b/cssBayan/img/4.png new file mode 100644 index 0000000..df509f6 Binary files /dev/null and b/cssBayan/img/4.png differ diff --git a/cssBayan/img/download.png b/cssBayan/img/download.png new file mode 100644 index 0000000..69cfdd1 Binary files /dev/null and b/cssBayan/img/download.png differ diff --git a/cssBayan/index.html b/cssBayan/index.html new file mode 100644 index 0000000..6531035 --- /dev/null +++ b/cssBayan/index.html @@ -0,0 +1,80 @@ + + + + + + + Document + + + +
+
+
+

CSS Bayan

+
+
+
+ + +
+ mem1 +
+
+
+
+
+
+ + +
+ mem1 +
+
+
+
+
+
+ + +
+ mem1 +
+
+
+
+
+
+ + +
+ mem1 +
+
+
+
+
+
+ + +
+ mem1 +
+
+
+
+
+
+
+ + diff --git a/cssBayan/style.css b/cssBayan/style.css new file mode 100644 index 0000000..79657f7 --- /dev/null +++ b/cssBayan/style.css @@ -0,0 +1,72 @@ +* { + font-family: Arial, Helvetica, sans-serif; +} + + html { + width:100vw; + } + + body { + background-color: cornsilk; +} + +.container { + width: 100%; + min-height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.accordion { + font-size: large; + font-weight: bolder; + width: 40%; + margin: 0 auto; +} + +.title { + display: flex; + align-items: center; + justify-content: space-between; + padding:1em 1em; + cursor: pointer; +} +.title::after { + content: '>'; + transition: transform 0.5s ease-in-out; +} + +.input-item { + display: none; +} + +.input-item:checked ~ .content { + display: block; + text-align: center; + +} +.content { + display: none; +} + + +.input-item:hover ~ .content { + display: block; + text-align: center; + transition: all 1s; +} + +.input-item:checked ~ .title::after { + transform: rotate(90deg); +} + +.input-item:hover ~ .title::after { + transform: rotate(90deg); +} + +.title:hover::after { + content: '>'; + transition: transform 0.5s ease-in-out; + visibility: visible; +}