diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..9a59611
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,83 @@
+/***
+ The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+ GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+ Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+ - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+ all: unset;
+ display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+ cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+ list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+ max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+ border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the text input doesn't working */
+input, textarea {
+ -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+ white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+ -webkit-appearance: revert;
+ appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+ color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+ display:revert; revert to element instead of attribute */
+:where([hidden]) {
+ display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly.
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+ -moz-user-modify: read-write;
+ -webkit-user-modify: read-write;
+ overflow-wrap: break-word;
+ -webkit-line-break: after-white-space;
+ -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+ -webkit-user-drag: element;
+}
\ No newline at end of file
diff --git a/css/social.css b/css/social.css
new file mode 100644
index 0000000..42263c1
--- /dev/null
+++ b/css/social.css
@@ -0,0 +1,144 @@
+.home {
+ position: fixed !important;
+}
+
+.social {
+ font-family: "Roboto", sans-serif;
+ font: 18px;
+ color: white;
+ padding: 2rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.profile-card {
+ box-shadow: 0 18px 200px -60px black;
+ border-radius: 50px;
+ width: 650px;
+ position: relative;
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ border: 2px solid rgba(255, 255, 255, 0.2509803922);
+ padding: 3rem 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+}
+@media screen and (max-width: 768px) {
+ .profile-card {
+ width: auto;
+ }
+}
+.profile-card__img img {
+ margin: auto;
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ display: block;
+ box-shadow: 0 10px 60px -10px rgba(13, 28, 39, 0.5);
+}
+
+@media (max-width: 766px) {
+ .profile-card__img img {
+ width: 150px;
+ height: 150px;
+ }
+
+ .profile-card__desc h1 {
+ font-size: 1.5rem !important;
+ margin-top: -25px !important;
+ }
+
+
+}
+
+.profile-card__desc {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+}
+.profile-card__desc h1 {
+ font-size: 2.5rem;
+ font-weight: bold;
+}
+.profile-card__desc h1 + div {
+ font-size: 20px !important;
+}
+.profile-card__info {
+ display: flex;
+ justify-content: center;
+ gap: 50px;
+}
+@media screen and (max-width: 576px) {
+ .profile-card__info {
+ gap: 30px;
+ }
+}
+.profile-card__info > div {
+ text-transform: uppercase;
+ font-weight: bold;
+ letter-spacing: 1px;
+ text-align: center;
+}
+.profile-card__info > div > *:first-child {
+ font-weight: bold;
+}
+.profile-card__info > div > *:last-child {
+ font-size: 16px !important;
+ opacity: 0.7;
+}
+.profile-card__social {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.profile-card__social a {
+ display: inline-flex;
+ width: 55px;
+ height: 55px;
+ margin: 15px;
+ border-radius: 40%;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ position: relative;
+ flex-shrink: 0;
+ transition: all 0.2s;
+}
+@media screen and (max-width: 768px) {
+ .profile-card__social a {
+ width: 50px;
+ height: 50px;
+ margin: 10px;
+ }
+}
+@media screen and (min-width: 768px) {
+ .profile-card__social a:hover {
+ transform: scale(1.2) translateY(-5px);
+ }
+}
+.profile-card__social a.site {
+ background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+ box-shadow: 0 4px 30px rgba(43, 98, 168, 0.4);
+}
+.profile-card__social a.blog {
+ background: linear-gradient(45deg, #1769ff, #213fca);
+ box-shadow: 0 4px 30px rgba(27, 86, 231, 0.4);
+}
+.profile-card__social a.github {
+ background: linear-gradient(45deg, #333333, #626b73);
+ box-shadow: 0 4px 30px rgba(63, 65, 67, 0.4);
+}
+.profile-card__social a.twitter {
+ background: linear-gradient(45deg, #1da1f2, #0e71c8);
+ box-shadow: 0 4px 30px rgba(19, 127, 212, 0.4);
+}
+.profile-card__social a.status {
+ background: linear-gradient(45deg, #3b5998, #0078d7);
+ box-shadow: 0 4px 30px rgba(43, 98, 168, 0.4);
+}
\ No newline at end of file
diff --git a/social.html b/social.html
index 7806abc..cc44fae 100644
--- a/social.html
+++ b/social.html
@@ -8,33 +8,83 @@
Social • d3vyce.fr
-
-
-
-
-
+
+
- 
+