Added links to contact

MerryRosalie · Aug 25, 2022 · b1e7712 · b1e7712
1 parent c4d3e0e
commit b1e7712
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -169,7 +169,7 @@ <h4>Google UX/UI Design</h4>
                     </div>
                 </div>
                 <div>
-                    <h3>Art Related Stuff</h3>
+                    <h4>Art Related Stuff</h4>
                     <p>psh psh follow @shinybuncis on Instagram</p>
                     <h4>Vtuber</h4>
                     <p>I drew my own oc as a vtuber so I can get more simps and bitches (turns out to be unsuccessful sadge)</p>
@@ -191,18 +191,24 @@ <h4>Youtaite</h4>
         <section id="Contact">
             <h2>Contact</h2>
             <div class="socials">
-                <div class="socials-instagram">
-                    <i class="fa-brands fa-instagram fa-2xl"></i>
-                    <p>@shinybuncis</p>
-                </div>
-                <div class="socials-discord">
-                    <i class="fa-brands fa-discord fa-2xl"></i>
-                    <p>shinybuncis#6737</p>
-                </div>
-                <div class="socials-linkedin">
-                    <i class="fa-brands fa-linkedin fa-2xl"></i>
-                    <p>Merry Rosalie</p>
-                </div>
+                <a href="https://www.instagram.com/shinybuncis/" target="_blank" rel="noopener noreferrer">
+                    <div class="socials-instagram">
+                        <i class="fa-brands fa-instagram fa-2xl"></i>
+                        <p>@shinybuncis</p>
+                    </div>
+                </a>
+                <a target="_blank" rel="noopener noreferrer">
+                    <div class="socials-discord">
+                        <i class="fa-brands fa-discord fa-2xl"></i>
+                        <p>shinybuncis#6737</p>
+                    </div>
+                </a>
+                <a href="https://au.linkedin.com/in/merry-rosalie" target="_blank" rel="noopener noreferrer">
+                    <div class="socials-linkedin">
+                        <i class="fa-brands fa-linkedin fa-2xl"></i>
+                        <p>Merry Rosalie</p>
+                    </div>
+                </a>
             </div>
         </section>
         <section class="footer">

diff --git a/static/styles.css b/static/styles.css
@@ -80,7 +80,7 @@ body {
   width: 1px;
   height: 1px;
   background: transparent;
-  box-shadow: 1742px 441px #FFF , 339px 1859px #FFF , 976px 497px #FFF , 1201px 612px #FFF , 354px 1618px #FFF , 1045px 83px #FFF , 1597px 943px #FFF , 152px 1090px #FFF , 465px 1906px #FFF , 1515px 1015px #FFF , 1631px 818px #FFF , 42px 356px #FFF , 1816px 330px #FFF , 952px 1419px #FFF , 1465px 949px #FFF , 1628px 1408px #FFF , 39px 1131px #FFF , 893px 395px #FFF , 1713px 756px #FFF , 795px 1346px #FFF , 198px 870px #FFF , 970px 240px #FFF , 1276px 809px #FFF , 1761px 1154px #FFF , 1223px 1619px #FFF , 1856px 266px #FFF , 1148px 406px #FFF , 503px 1317px #FFF , 960px 1013px #FFF , 411px 1259px #FFF , 1352px 1501px #FFF , 614px 599px #FFF , 94px 1160px #FFF , 1599px 1025px #FFF , 569px 408px #FFF , 577px 1794px #FFF , 1210px 637px #FFF , 1079px 913px #FFF , 931px 1566px #FFF , 110px 88px #FFF , 688px 1825px #FFF , 545px 1357px #FFF , 1154px 1082px #FFF , 1319px 1176px #FFF , 1591px 1204px #FFF , 1732px 90px #FFF , 1689px 1002px #FFF , 294px 1481px #FFF , 375px 1133px #FFF , 1967px 1685px #FFF , 1810px 1890px #FFF , 944px 1786px #FFF , 901px 347px #FFF , 202px 401px #FFF , 214px 581px #FFF , 931px 551px #FFF , 1083px 22px #FFF , 687px 1827px #FFF , 1435px 390px #FFF , 850px 315px #FFF , 447px 721px #FFF , 716px 1259px #FFF , 1138px 1502px #FFF , 143px 658px #FFF , 1659px 858px #FFF , 1564px 940px #FFF , 1374px 1105px #FFF , 889px 276px #FFF , 52px 1052px #FFF , 265px 1441px #FFF , 1466px 1068px #FFF , 1848px 283px #FFF , 692px 135px #FFF , 1617px 798px #FFF , 162px 1297px #FFF , 819px 540px #FFF , 804px 1349px #FFF , 889px 55px #FFF , 266px 1263px #FFF , 1223px 710px #FFF , 766px 160px #FFF , 449px 667px #FFF , 121px 71px #FFF , 443px 1427px #FFF , 1762px 36px #FFF , 741px 836px #FFF , 347px 555px #FFF , 1618px 673px #FFF , 328px 1493px #FFF , 1398px 1719px #FFF , 1635px 1614px #FFF , 268px 1780px #FFF , 1741px 1443px #FFF , 1081px 894px #FFF , 309px 1476px #FFF , 1965px 716px #FFF , 177px 1152px #FFF , 1317px 69px #FFF , 1510px 147px #FFF , 826px 1752px #FFF;
+  box-shadow: 157px 528px #FFF , 845px 1414px #FFF , 1264px 1621px #FFF , 518px 367px #FFF , 588px 1003px #FFF , 1948px 1385px #FFF , 1751px 1620px #FFF , 765px 1353px #FFF , 690px 378px #FFF , 1920px 1595px #FFF , 1235px 1194px #FFF , 1546px 1871px #FFF , 1251px 420px #FFF , 675px 1425px #FFF , 1484px 1156px #FFF , 184px 84px #FFF , 427px 896px #FFF , 1979px 1744px #FFF , 437px 1796px #FFF , 1601px 204px #FFF , 791px 1980px #FFF , 130px 710px #FFF , 742px 271px #FFF , 891px 916px #FFF , 1850px 790px #FFF , 1498px 1283px #FFF , 1183px 1477px #FFF , 1098px 943px #FFF , 98px 837px #FFF , 1268px 1364px #FFF , 1159px 675px #FFF , 858px 822px #FFF , 920px 1769px #FFF , 117px 1476px #FFF , 1972px 423px #FFF , 1135px 1749px #FFF , 7px 1191px #FFF , 602px 423px #FFF , 46px 709px #FFF , 1637px 654px #FFF , 1378px 915px #FFF , 1420px 1768px #FFF , 1147px 1782px #FFF , 77px 491px #FFF , 749px 1438px #FFF , 810px 38px #FFF , 1049px 1010px #FFF , 103px 1380px #FFF , 828px 213px #FFF , 610px 1828px #FFF , 1961px 1501px #FFF , 1965px 775px #FFF , 1158px 622px #FFF , 229px 1440px #FFF , 1968px 1959px #FFF , 1167px 835px #FFF , 222px 315px #FFF , 1564px 168px #FFF , 54px 1312px #FFF , 939px 1119px #FFF , 540px 434px #FFF , 511px 874px #FFF , 1374px 288px #FFF , 962px 661px #FFF , 1418px 571px #FFF , 1589px 605px #FFF , 1739px 1864px #FFF , 1627px 1227px #FFF , 645px 677px #FFF , 34px 1620px #FFF , 140px 583px #FFF , 883px 35px #FFF , 1425px 1662px #FFF , 713px 1337px #FFF , 777px 131px #FFF , 1709px 1379px #FFF , 1870px 296px #FFF , 249px 40px #FFF , 1227px 1282px #FFF , 589px 1453px #FFF , 1995px 1032px #FFF , 190px 1637px #FFF , 1064px 1645px #FFF , 1465px 327px #FFF , 415px 265px #FFF , 1602px 177px #FFF , 1727px 1568px #FFF , 1209px 1022px #FFF , 1289px 806px #FFF , 903px 1418px #FFF , 1440px 1693px #FFF , 343px 1431px #FFF , 1482px 1702px #FFF , 1177px 24px #FFF , 1462px 471px #FFF , 1922px 472px #FFF , 1380px 1749px #FFF , 919px 388px #FFF , 1825px 751px #FFF , 1535px 156px #FFF;
   -webkit-animation: animStar 50s linear infinite;
           animation: animStar 50s linear infinite;
 }
@@ -91,7 +91,7 @@ body {
   width: 1px;
   height: 1px;
   background: transparent;
-  box-shadow: 1742px 441px #FFF , 339px 1859px #FFF , 976px 497px #FFF , 1201px 612px #FFF , 354px 1618px #FFF , 1045px 83px #FFF , 1597px 943px #FFF , 152px 1090px #FFF , 465px 1906px #FFF , 1515px 1015px #FFF , 1631px 818px #FFF , 42px 356px #FFF , 1816px 330px #FFF , 952px 1419px #FFF , 1465px 949px #FFF , 1628px 1408px #FFF , 39px 1131px #FFF , 893px 395px #FFF , 1713px 756px #FFF , 795px 1346px #FFF , 198px 870px #FFF , 970px 240px #FFF , 1276px 809px #FFF , 1761px 1154px #FFF , 1223px 1619px #FFF , 1856px 266px #FFF , 1148px 406px #FFF , 503px 1317px #FFF , 960px 1013px #FFF , 411px 1259px #FFF , 1352px 1501px #FFF , 614px 599px #FFF , 94px 1160px #FFF , 1599px 1025px #FFF , 569px 408px #FFF , 577px 1794px #FFF , 1210px 637px #FFF , 1079px 913px #FFF , 931px 1566px #FFF , 110px 88px #FFF , 688px 1825px #FFF , 545px 1357px #FFF , 1154px 1082px #FFF , 1319px 1176px #FFF , 1591px 1204px #FFF , 1732px 90px #FFF , 1689px 1002px #FFF , 294px 1481px #FFF , 375px 1133px #FFF , 1967px 1685px #FFF , 1810px 1890px #FFF , 944px 1786px #FFF , 901px 347px #FFF , 202px 401px #FFF , 214px 581px #FFF , 931px 551px #FFF , 1083px 22px #FFF , 687px 1827px #FFF , 1435px 390px #FFF , 850px 315px #FFF , 447px 721px #FFF , 716px 1259px #FFF , 1138px 1502px #FFF , 143px 658px #FFF , 1659px 858px #FFF , 1564px 940px #FFF , 1374px 1105px #FFF , 889px 276px #FFF , 52px 1052px #FFF , 265px 1441px #FFF , 1466px 1068px #FFF , 1848px 283px #FFF , 692px 135px #FFF , 1617px 798px #FFF , 162px 1297px #FFF , 819px 540px #FFF , 804px 1349px #FFF , 889px 55px #FFF , 266px 1263px #FFF , 1223px 710px #FFF , 766px 160px #FFF , 449px 667px #FFF , 121px 71px #FFF , 443px 1427px #FFF , 1762px 36px #FFF , 741px 836px #FFF , 347px 555px #FFF , 1618px 673px #FFF , 328px 1493px #FFF , 1398px 1719px #FFF , 1635px 1614px #FFF , 268px 1780px #FFF , 1741px 1443px #FFF , 1081px 894px #FFF , 309px 1476px #FFF , 1965px 716px #FFF , 177px 1152px #FFF , 1317px 69px #FFF , 1510px 147px #FFF , 826px 1752px #FFF;
+  box-shadow: 157px 528px #FFF , 845px 1414px #FFF , 1264px 1621px #FFF , 518px 367px #FFF , 588px 1003px #FFF , 1948px 1385px #FFF , 1751px 1620px #FFF , 765px 1353px #FFF , 690px 378px #FFF , 1920px 1595px #FFF , 1235px 1194px #FFF , 1546px 1871px #FFF , 1251px 420px #FFF , 675px 1425px #FFF , 1484px 1156px #FFF , 184px 84px #FFF , 427px 896px #FFF , 1979px 1744px #FFF , 437px 1796px #FFF , 1601px 204px #FFF , 791px 1980px #FFF , 130px 710px #FFF , 742px 271px #FFF , 891px 916px #FFF , 1850px 790px #FFF , 1498px 1283px #FFF , 1183px 1477px #FFF , 1098px 943px #FFF , 98px 837px #FFF , 1268px 1364px #FFF , 1159px 675px #FFF , 858px 822px #FFF , 920px 1769px #FFF , 117px 1476px #FFF , 1972px 423px #FFF , 1135px 1749px #FFF , 7px 1191px #FFF , 602px 423px #FFF , 46px 709px #FFF , 1637px 654px #FFF , 1378px 915px #FFF , 1420px 1768px #FFF , 1147px 1782px #FFF , 77px 491px #FFF , 749px 1438px #FFF , 810px 38px #FFF , 1049px 1010px #FFF , 103px 1380px #FFF , 828px 213px #FFF , 610px 1828px #FFF , 1961px 1501px #FFF , 1965px 775px #FFF , 1158px 622px #FFF , 229px 1440px #FFF , 1968px 1959px #FFF , 1167px 835px #FFF , 222px 315px #FFF , 1564px 168px #FFF , 54px 1312px #FFF , 939px 1119px #FFF , 540px 434px #FFF , 511px 874px #FFF , 1374px 288px #FFF , 962px 661px #FFF , 1418px 571px #FFF , 1589px 605px #FFF , 1739px 1864px #FFF , 1627px 1227px #FFF , 645px 677px #FFF , 34px 1620px #FFF , 140px 583px #FFF , 883px 35px #FFF , 1425px 1662px #FFF , 713px 1337px #FFF , 777px 131px #FFF , 1709px 1379px #FFF , 1870px 296px #FFF , 249px 40px #FFF , 1227px 1282px #FFF , 589px 1453px #FFF , 1995px 1032px #FFF , 190px 1637px #FFF , 1064px 1645px #FFF , 1465px 327px #FFF , 415px 265px #FFF , 1602px 177px #FFF , 1727px 1568px #FFF , 1209px 1022px #FFF , 1289px 806px #FFF , 903px 1418px #FFF , 1440px 1693px #FFF , 343px 1431px #FFF , 1482px 1702px #FFF , 1177px 24px #FFF , 1462px 471px #FFF , 1922px 472px #FFF , 1380px 1749px #FFF , 919px 388px #FFF , 1825px 751px #FFF , 1535px 156px #FFF;
 }
 
 .loading-text {
@@ -387,7 +387,19 @@ h2:hover::after {
 #Contact h2 {
   margin-bottom: 2rem;
 }
-#Contact .socials > div {
+#Contact .socials a {
+  text-decoration: none;
+  color: white;
+}
+#Contact .socials a > div:hover {
+  transition: all 0.2s linear;
+  color: #976BA4;
+  border: 1px solid #976BA4;
+}
+#Contact .socials a > div:hover p {
+  color: #976BA4;
+}
+#Contact .socials > a > div {
   margin: 0 2rem;
   padding: 2rem;
   border-radius: 5%;
@@ -406,8 +418,8 @@ h2:hover::after {
   display: inline;
 }
 #Contact p {
-  color: white;
   margin: 0;
+  color: white;
 }
 
 @-webkit-keyframes extend {