Add custom cursor and separate reset css 🎄.

beginner/index.css

@@ -1,12 +1,8 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Carter+One&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
 
-/* Setting the margin, padding, box-sizing, and font-family for all elements. */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+    cursor: url('./assets/cursor.cur'),auto;
 }
 
 /* Setting the default background color to white and the default text color to black. */
@@ -26,7 +22,7 @@ html {
 }
 
 body {
-    max-width: 100%;
+    font-family: 'Poppins', sans-serif;
 }
 
 header {
@@ -98,7 +94,6 @@ li {
 
 .hamburger {
     display: none;
-    cursor: pointer;
 }
 
 .bar {
@@ -143,23 +138,22 @@ section {
     font-size: 3.5rem;
     font-family: 'Carter One', sans-serif;
     font-weight: bold;
-    color: #7b3fe4;
+    color: #8358cd;
 }
 
 .txt__upper {
-    font-weight: 900;
-    text-decoration-line: underline;
-    text-decoration-color: salmon;
+    font-weight: 800;
+    color: rgb(83, 81, 81);
 }
 
 .txt__under {
-    font-weight: bold;
-    text-decoration-line: underline;
-    text-decoration-color: salmon;
+    font-weight: 700;
+    color: rgb(83, 81, 81);
 }
 
 .desc {
     padding: .5rem;
+    color: rgb(119, 119, 119);
 }
 
 .btn {
@@ -176,7 +170,11 @@ section {
 }
 
 .btn:hover {
-    transform: scale(1.1);
+    /*transform: scale(1.1);*/
+    color: rgb(239, 248, 252);
+    background-color: #7b3fe4;
+    box-shadow: none;
+    border: 0;
 }
 
 .txt::first-letter {
@@ -225,15 +223,16 @@ section {
 
 .card {
     box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
-    border-bottom-right-radius: 1rem;
+    border-radius: 12px;
 }
 
 .card__cover {
     width: 100%;
 }
 
 .card__cover img {
-    border-top-left-radius: 1rem;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
 }
 
 .card:hover {
@@ -243,7 +242,8 @@ section {
 .card__content {
     padding: 1.25rem;
     background-color: white;
-    border-bottom-right-radius: 1rem;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
 }
 
 .card__content p {
@@ -268,7 +268,7 @@ section {
 }
 
 .testimony {
-    background: #7b3fe4;
+    background: #7757ae;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -481,7 +481,6 @@ figcaption {
     height: 30px;
     margin: 10px 10px;
     position: relative;
-    cursor: pointer;
     display: inline-block;
   }
   .nav-icon-6 span{

beginner/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Landing page</title>
     <link rel="icon" href="assets/favicon.ico">
+    <link rel="stylesheet" href="reset.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
 </head>
@@ -42,10 +43,10 @@
     <main>
         <section class="hero" id="hero__section">
             <article class="left-hero">
-                <p class="txt__upper">Hello I'm,</p>
+                <p class="txt__upper">Hello 👋 I'm,</p>
                 <h1 class="txt">John Doe</span></h1>
-                <h3 class="txt__under">Software Engineer.</h3>
-                <p class="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, iusto ullam? Vel facilis rem sit inventore a iure eum excepturi quasi sapiente cum voluptate, expedita, placeat nihil, molestias magnam vero?</p>
+                <h3 class="txt__under">Software Engineer. 💻</h3>
+                <p class="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, temporibus.</p>
                 <div class="soclinks">
                     <button class="btn" type="button">Contact Me!</button>
                 </div>

beginner/reset.css

@@ -0,0 +1,46 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+