diff --git a/index.html b/index.html index 378cbbf..c7be2a3 100644 --- a/index.html +++ b/index.html @@ -1,107 +1,46 @@ - - My Page - + + Needy Girl Overdose + + - - - +
+
+
+
+
+
+
+
+
+

こにちは、KAngel

+
+
+
+ Kangel +
+
+ +
+
+
+ - + diff --git a/pape.png b/pape.png deleted file mode 100644 index 80d36da..0000000 Binary files a/pape.png and /dev/null differ diff --git a/portrait.jpeg b/portrait.jpeg new file mode 100644 index 0000000..e261a34 Binary files /dev/null and b/portrait.jpeg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..4eb4fbb --- /dev/null +++ b/style.css @@ -0,0 +1,156 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + /*font-family: 'Roboto', sans-serif;*/ + src: url('../startpage/fonts/azukifontB.ttf') format('truetype') + font-family: 'azukifontB', Roboto; + background-color: #f7d4e8; +} + +#startpage { + display: none; +} + +header { + text-align: center; + margin-top: 50px; +} + +header h1 { + font-size: 48px; + color: #ff5e5e; +} + +main { + display: flex; + justify-content: center; + align-items: center; + margin-top: 50px; +} + +#left-column { + margin-right: 100px; +} + +#left-column img { + max-width: 100%; + object-fit: cover; + width: 28em; + height: auto; + border: 5px solid #ff5e5e; +} + +#right-column nav ul li { + list-style-type: none; + margin-bottom: 20px; +} + +#right-column nav ul li a { + font-size: 24px; + color: #ff5e5e; + text-decoration: none; +} + +#right-column nav ul li a:hover { + color: #e5004d; +} + +/* startpage.css */ + +/* Loading animation */ +.loader { + width: 100%; + height: 100%; + position: fixed; + z-index: 9999; + background: #f8eaf1; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.loader .inner { + position: relative; +} + +.loader .inner div { + position: absolute; + width: 60px; + height: 60px; + border-radius: 50%; + background: #e15b64; + animation: loader-anim 5s ease-in-out infinite; +} + +.loader .inner div:nth-child(2) { + animation-delay: 0.8s; +} + +.loader .inner div:nth-child(3) { + animation-delay: 1.6s; +} + +@keyframes loader-anim { + 0% { + transform: scale(0); + opacity: 1; + } + + 100% { + transform: scale(1); + opacity: 0; + } +} + +/* Main content */ +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + overflow: hidden; +} + +.links { + position: fixed; + top: 50%; + right: 50px; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: flex-end; + font-family: 'Open Sans', sans-serif; + color: #333; +} + +.links a { + display: block; + margin: 10px 0; + font-size: 1.5rem; + text-align: right; + text-decoration: none; + color: inherit; +} + +.links a:hover { + color: #e15b64; +} + +.image { + position: fixed; + top: 50%; + left: 50px; + transform: translateY(-50%); + max-width: 100%; + max-height: 100%; + height: auto; + width: auto; + margin-right: 100px; +} +