Social Links Added

Miramoop · Apr 21, 2023 · a909870 · a909870
1 parent b6c0f00
commit a909870
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -21,13 +21,20 @@
                         <li><a href="#">About</a></li>
                         <li><a href="#">Learning</a></li>
                         <li><a href="#">Portfolio</a></li>
-                        <li><a href="#">Contact</a></li>
                     </ul>
                 </nav>
                 <div class="header-text">
                     <p>Compsci Student</p>
-                    <h1>Hi, I'm <span>Miranda</span> <br> Morris From The U.S.</h1>
+                    <h1>Hi, I'm <span>Miranda</span></h1>
                 </div>
+                <div class="social-icons">
+                    <a href="https://www.linkedin.com/in/mirandamorris845/" target="_blank" rel="noopener" rel="noreferrer"><i class="ri-linkedin-box-fill"></i></a>
+                    <a href="https://github.com/Juniperistic" target="_blank" rel="noopener" rel="noreferrer"><i class="ri-github-fill"></i></a>
+                    <a href="mailto:juniperistic@gmail.com"><i class="ri-mail-line"></i></a>
+                </div>
+
+                <!--Download Button Example-->
+                <!-- <a href="img/resume.pdf" download class="btn btn2">Download</a> -->
             </div>
         </div>
 
@@ -66,6 +73,7 @@ <h1 class="sub-title">About Me</h1>
                         <div class="tab-contents" id="experience">
                             <ul>
                                 <li><span> April 2023 - Current</span><br>Portfolio Website</li>
+                                <li><span> April 2023</span><br>Dino Rhythm Game</li>
                             </ul>
                         </div>
 
@@ -107,12 +115,12 @@ <h2>HTML, CSS, & Javascript</h2>
                 <a href="#">Learn more</a>
             </div>
 
-            <div>
+            <!-- <div>
                 <i class="ri-box-3-line"></i>
                 <h2>3D Modeling</h2>
                 <p>Creation of 3D Models using Blender</p>
                 <a href="#">Learn more</a>
-            </div>
+            </div> -->
 
         </div>
     </div>
@@ -149,13 +157,14 @@ <h3>Project 3</h3>
                     <a href="#"><i class="ri-external-link-line"></i></a>
                 </div>
             </div>
-
         </div>
-
         <a href="#" class="btn">See more</a>
+
+        <div class="copyright">
+            <p> © Juniperistic, 2023 <br> 
+                Made with <i class="ri-heart-line"></i></p>
+        </div>
     </div>
 </div>
     </body>
 </html>
-
-
diff --git a/styles.css b/styles.css
@@ -75,6 +75,30 @@ nav ul li a:hover::after{
     color: black;
 }
 
+.social-icons{
+    margin: center;
+    margin-top: 30px;
+}
+
+.social-icons a{
+    text-decoration: none;
+    font-size: 30px;
+    margin-right: 15px;
+    color: #fff;
+    display: inline-block;
+    transition: transform 0.5s;
+}
+
+.social-icons a:hover{
+    color:#ff004f;
+    transform: translateY(-5px);
+}
+
+.btn.btn2{
+    display:inline-block;
+    background: #ff004f;
+}
+
 /*--About--*/
 #about{
     padding: 80px 0;
@@ -292,4 +316,17 @@ nav ul li a:hover::after{
 
 .btn:hover{
     background: #ff004f;
-}
+}
+
+.copyright{
+    width: 100%;
+    text-align: center;
+    padding: 25px 0; 
+    background: #2b2b2b;
+    font-weight: 300;
+    margin-top: 20px;
+}
+
+.copyright i{
+    color: red;
+}