diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..7eae35c --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,107 @@ +* { + margin: 0; + padding: 0; +} + +html, +body { + height: 100%; + width: 100%; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + color: white; +} + +body { + background-color: #252627; +} + +.main { + box-sizing: border-box; + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 4rem; + padding-bottom: 2rem; +} + +.profile-container { + max-width: 580px; + width: 100%; + height: 100%; + margin-left: auto; + margin-right: auto; +} + +.info { + display: flex; + flex-direction: column; + align-items: center; +} + +.profile-picture-container { + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 1rem; + border-radius: 50%; + width: 96px; + height: 96px; +} + +.profile-picture { + object-fit: cover; + width: 100%; + height: auto; +} + +.profile-title { + font-weight: 100; +} + +.profile-description h2 { + font-weight: lighter; +} + +.links { + color: #a9a9b3; + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5rem; + margin-top: 2rem; + list-style: none; +} + +.link { + background-color: #292a2d; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + color: black; + min-height: 64px; + border-radius: 1px; + padding-right: 44px; + padding-left: 44px; + color: inherit; + text-decoration: none; + border: 3px solid white; + box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.9); + transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; + +} + +.link:hover, +.link:focus { + color: white; + background-color: transparent; + transform: translateY(6px); + box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9); +} \ No newline at end of file diff --git a/assets/images/profile-image-ghibli.png b/assets/images/profile-image-ghibli.png new file mode 100644 index 0000000..ff9a6b5 Binary files /dev/null and b/assets/images/profile-image-ghibli.png differ diff --git a/index.html b/index.html index a1ed7cf..0ca7103 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,35 @@ + - Home + + + Nicholas Ward + - web server is running. +
+
+
+
+ +
+
+

Nicholas Ward

+
+
+

Software Developer, et cetera

+
+
+
+ Web Log + Git Repository +
+
+
+ - + + \ No newline at end of file