Github avatar on page, font awesome

Remaster1 · Oct 15, 2023 · 1e344b7 · 1e344b7
1 parent 2877174
commit 1e344b7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/assests/icon.png b/assests/icon.png
diff --git a/index.html b/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Remaster</title>
     <link rel="stylesheet" href="./style.css" />
+    <!-- Font awesome-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>
@@ -14,17 +18,35 @@
             <span class="logo"><span class="gradient">R</span>emaster</span>
             <ul>
                 <li><a href="#home">Home</a></li>
+                <li><a href="#skills">Skills</a></li>
                 <li><a href="#about">About</a></li>
             </ul>
         </nav>
     </header>
     <main>
         <div id="home" class="greet-text">
-            <h1>Hi, im Ivan aka Remaster!</h1>
-            <p>I'm Full-Stack Developer</p>
+            <img class="avatar" src="./assests/icon.png">
+            <h1>Hi, i'm Ivan Degtyarev</h1>
+            <p>Full-Stack Developer</p>
         </div>
 
+        <div id="about">
+            <h1 class="sub-title">About me</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue nibh in bibendum
+                blandit.
+                Morbi a ipsum felis. Mauris vitae iaculis eros. Pellentesque interdum leo et tellus pulvinar
+                volutpat.
+                Donec euismod dolor risus, ac fermentum lorem mattis quis. Sed a metus enim. Quisque consequat
+                volutpat
+                leo. Ut elementum ornare urna, ac sollicitudin ligula venenatis eget. Donec auctor iaculis nisl, non
+                accumsan turpis imperdiet a. Nullam pulvinar massa sed auctor lobortis. Pellentesque ac lectus
+                metus.
+                Nunc egestas risus vel feugiat elementum.
+            </p>
+        </div>
+
     </main>
+    <script src="./index.js"></script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -8,11 +8,11 @@ body {
     padding: 10px 10%;
 }
 
+
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
 }
 
 nav ul li {
@@ -51,7 +51,7 @@ nav ul li a:hover::after {
     text-align: center;
 }
 
-.greet-text p{
+.greet-text p {
     font-size: 25px;
 }
 
@@ -60,4 +60,14 @@ nav ul li a:hover::after {
     background: linear-gradient(142deg, rgba(0, 3, 36, 1) 0%, rgba(9, 9, 121, 1) 27%, rgba(0, 212, 255, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
+}
+
+.sub-title {
+    font-size: 30px;
+}
+
+
+.avatar {
+    border-radius: 5px;
+}
+