Index: arms/css/index.css =================================================================== diff -u --- arms/css/index.css (revision 0) +++ arms/css/index.css (revision a4d4660caf50694a0fa11aa72f0ce4695bd0d3ac) @@ -0,0 +1,365 @@ +@font-face { + font-family: "Nanum Gothic"; + font-style: normal; + font-weight: 400; + src: url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.eot"); /* IE9 Compat Modes */ + src: local("NanumGothic"), + url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.eot?#iefix") + format("embedded-opentype"), + /* IE6-IE8 */ url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.woff2") + format("woff2"), + /* Super Modern Browsers */ + url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.woff") format("woff"), + /* Modern Browsers */ + url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.ttf") + format("truetype"), + /* Safari, Android, iOS */ + url("../../reference/light-blue/css/font/NanumGothic/nanum-gothic-v11-latin_korean-regular.svg#NanumGothic") + format("svg"); /* Legacy iOS */ +} +* { + box-sizing: border-box; + user-select: none; +} + +a { + color: #fff; + text-decoration: none; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + color: white; + background: black; + font-family: "Nanum Gothic" !important; + text-transform: uppercase; +} + +h2 { + font-size: clamp(1rem, 5vw, 5rem); + font-weight: 400; + text-align: center; + letter-spacing: 0.5em; + margin-right: -0.5em; + color: #cccccc; + width: 90vw; + max-width: 1200px; +} + +header { + position: fixed; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 5%; + width: 100%; + z-index: 3; + height: 7em; + font-family: "Nanum Gothic" !important; + font-size: clamp(0.66rem, 2vw, 1rem); + letter-spacing: 0.5em; +} + +section { + height: 100%; + width: 100%; + top: 0; + position: fixed; + visibility: hidden; +} +section .outer, +section .inner { + width: 100%; + height: 100%; + overflow-y: hidden; +} +section .bg { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + height: 100%; + width: 100%; + top: 0; + background-size: cover; + background-position: center; +} +section .bg h2 { + z-index: 2; +} +section .bg .clip-text { + overflow: hidden; +} + +.first .bg { + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwJSIgY3k9IjAiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMTAyLCAxMDUsIDEwNCwgMC45MCkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiYSg5MywgMTEyLCAxMTksIDAuODkpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDE2MCwgMTc0LCAxNTAsIDAuOTApIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4="), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background-color: rgba(102, 105, 104, 0.9); + background: radial-gradient( + farthest-side ellipse at 10% 0, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background: -webkit-radial-gradient( + 10% 0, + farthest-side ellipse, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background: -moz-radial-gradient( + 10% 0, + farthest-side ellipse, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background-attachment: fixed; +} + +.second .bg { + background-image: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 100% + ), + url('https://images.unsplash.com/photo-1617128734662-66da6c1d3505?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzc3NTM3MA&ixlib=rb-1.2.1&q=75&w=1920'); +} + +.third .bg { + background-image: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 100% + ), + url(https://images.unsplash.com/photo-1617438817509-70e91ad264a5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDk4Mg&ixlib=rb-1.2.1&q=75&w=1920); +} + +.fourth .bg { + background-image: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 100% + ), + url(https://images.unsplash.com/photo-1617412327653-c29093585207?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDgzMQ&ixlib=rb-1.2.1&q=75&w=1920); +} + +.fifth .bg { + background-image: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 100% + ), + url('https://images.unsplash.com/photo-1617141636403-f511e2d5dc17?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODAzMjc4Mw&ixlib=rb-1.2.1&q=75w=1920'); + background-position: 50% 45%; +} + +h2 * { + will-change: transform; +} + +.section-scroll-dots-navigation { + display: flex; + flex-direction: column; + position: fixed; + top: 50%; + right: 30px; + background-color: rgba(51, 51, 51, 0.5); + border-radius: 35px; + padding: 0.6rem; + z-index: 10; + transform: translate3d(0, -50%, 0); +} + +.list-unstyled { + padding-left: 0; + list-style: none; +} + +.section-scroll-dots-navigation > ul { + margin: 0.5rem 0; +} + +.list.list-unstyled { + padding-left: 0; + padding-right: 0; +} + +.btn { + border: none; + padding: 5px; + border-radius: 50%; + background-color: rgba(51, 51, 51, 0.5); +} + +.list li.active > .btn { + background-color: rgba(229, 96, 59, 0.5); +} + +/*-------------------------------------------------------------- +# 버튼 에니메이션 +--------------------------------------------------------------*/ +.more { + display: inline-block; + border: 1px solid rgba(255, 255, 255, 0.3); + letter-spacing: 0; + z-index: 1; + position: relative; + margin-top: 10px; + color: #fff; + font-size: 13px; +} + +.animated-button1 { + display: inline-block; + -webkit-transform: translate(0%, 0%); + transform: translate(0%, 0%); + overflow: hidden; + color: #fff; + font-size: 12px; + text-decoration: none; +} + +.animated-button1::before { + content: ''; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: #8593ad; + opacity: 0; + -webkit-transition: 0.2s opacity ease-in-out; + transition: 0.2s opacity ease-in-out; +} + +.animated-button1 span { + position: absolute; +} + +@keyframes animateTop { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} + +.animated-button1 span:nth-child(1) { + top: 0px; + left: 0px; + width: 100%; + height: 1px; + background: -webkit-gradient( + linear, + right top, + left top, + from(rgba(43, 8, 8, 0)), + to(#fff) + ); + background: linear-gradient(to left, rgba(43, 8, 8, 0), #fff); + -webkit-animation: 2s animateTop linear infinite; + animation: 2s animateTop linear infinite; +} + +@keyframes animateRight { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + } + + 100% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } +} + +.animated-button1 span:nth-child(2) { + top: 0px; + right: 0px; + height: 100%; + width: 1px; + background: -webkit-gradient( + linear, + left bottom, + left top, + from(rgba(43, 8, 8, 0)), + to(#fff) + ); + background: linear-gradient(to top, rgba(43, 8, 8, 0), #fff); + -webkit-animation: 2s animateRight linear -1s infinite; + animation: 2s animateRight linear -1s infinite; +} + +@keyframes animateBottom { + 0% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + + 100% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} + +.animated-button1 span:nth-child(3) { + bottom: 0px; + left: 0px; + width: 100%; + height: 1px; + background: -webkit-gradient( + linear, + left top, + right top, + from(rgba(43, 8, 8, 0)), + to(#fff) + ); + background: linear-gradient(to right, rgba(43, 8, 8, 0), #fff); + -webkit-animation: 2s animateBottom linear infinite; + animation: 2s animateBottom linear infinite; +} + +@keyframes animateLeft { + 0% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + + 100% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + } +} + +.animated-button1 span:nth-child(4) { + top: 0px; + left: 0px; + height: 100%; + width: 1px; + background: -webkit-gradient( + linear, + left top, + left bottom, + from(rgba(43, 8, 8, 0)), + to(#fff) + ); + background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #fff); + -webkit-animation: 2s animateLeft linear -1s infinite; + animation: 2s animateLeft linear -1s infinite; +} + +.darkBack { + background: rgba(51, 51, 51, 0.4) !important; + border: 1px solid rgba(51, 51, 51, 0.425) !important; +} \ No newline at end of file FishEye: Tag a4d4660caf50694a0fa11aa72f0ce4695bd0d3ac refers to a dead (removed) revision in file `arms/css/index2.css'. FishEye: No comparison available. Pass `N' to diff? Index: arms/development.html =================================================================== diff -u -r39f7b5987bc49ee634c27f26ed537432b8180107 -ra4d4660caf50694a0fa11aa72f0ce4695bd0d3ac --- arms/development.html (.../development.html) (revision 39f7b5987bc49ee634c27f26ed537432b8180107) +++ arms/development.html (.../development.html) (revision a4d4660caf50694a0fa11aa72f0ce4695bd0d3ac) @@ -1,5 +1,5 @@ - + A-RMS By 313DEVGRP @@ -91,2546 +91,108 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - -