diff --git a/ryuei/test-vr.css b/ryuei/test-vr.css new file mode 100644 index 0000000..149bc97 --- /dev/null +++ b/ryuei/test-vr.css @@ -0,0 +1,160 @@ +@media (min-width: 520px) { + p{ + font-size: 15px; + } + .header p img{ + width: 100%; + height: 450px; + object-fit: cover; + } + h1{ + font-size: 50px; + } + h2,h3,p.bold{ + font-size: 20px; + } +} + +@media (min-width: 960px) { + .header{ + margin: 0; + } + p{ + font-size: 20px; + color: black; + } + h1{ + font-size: 60px; + } + h2,h3,p.bold{ + font-size: 30px; + } +} + +body{ + background-color: #e5e5e5; + color:#333333; + font-family: serif; + -webkit-text-size-adjust: 100%; +} +.header p img{ + object-fit: cover; + width:75% +} +.header{ + text-align: center; +} + +.intro,.menu,.interview,.info,.pages,.vr{ + margin: 16px 15%; + +} +.intro div,.menu div,.info div,.pages div,.vr div{ + text-align: left; +} + + +iframe{ + height: 360px; + width: 640px +} +h1{ + font-size: 50px; + display: inline-block; +} + +h2{ + color:#e5e5e5; + background-color: #785757; + border: 1px solid #785757; + border-radius: 0 13px 13px 0; + display: inline-block; + padding: 1px 5px; +} + +h3{ + font-size: 40px; + background:linear-gradient(transparent 60%, #d3a68c 0%); + display: inline-block +} + +.flex-container{ + display: flex; + +} + +.flex-item img{ + width: 65%; + text-align: center; +} + +.flex-container div.flex-item{ + width: 50%; +} +.qa { + max-width: 100%; + margin-bottom: 5px; + border-bottom: 2px solid #d6dde3; +} + +.qa summary { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + padding: 1em 2em 1em 3em; + color: #333333; + cursor: pointer; +} + +.qa summary::before, +.qa p::before { + position: absolute; + left: 1em; + font-size: 1.3em; +} + +.qa summary::before { + color: #daac50; + content: "Q"; +} + +.qa summary::after { + transform: translateY(-25%) rotate(45deg); + width: 7px; + height: 7px; + margin-left: 10px; + border-bottom: 3px solid #777; + border-right: 3px solid #777; + content: ''; + transition: transform .5s; +} + +.qa[open] summary::after { + transform: rotate(225deg); +} + +.qa p { + position: relative; + transform: translateY(-10px); + opacity: 0; + margin: 0; + padding: .3em 3em 1.5em; + color: #2f2f2f; + transition: transform .5s, opacity .5s; +} + +.qa[open] p { + transform: none; + opacity: 1; +} + +.qa p::before { + color: #ff8d8d; + line-height: 1.2; + content: "A"; +} +.border{ + border: #333333 dashed; + padding:20px; +} \ No newline at end of file