firts commit

assets/css/animations.css

@@ -0,0 +1,20 @@
+@keyframes example {
+  0%   {background-color: red;}
+  25%  {background-color: yellow;}
+  50%  {background-color: blue;}
+  100% {background-color: green;}
+}
+
+/* ### EXAMPLE SETTING CODE ###  
+  animation-name: example;
+  animation-duration: 4s;
+  animation-iteration-count: 2;
+  animation-direction: alternate-reverse;
+  animation-delay: -2s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;}
+	
+  ### SAME ABOVE ANIMATION IN ONE LINE CODE ###
+  animation: example 5s linear 2s infinite alternate;
+*/
+

assets/css/style.css

@@ -0,0 +1,18 @@
+html { scroll-behavior: smooth; }
+*{ box-sizing: border-box; margin:0; padding:0;}
+
+
+.main-nav{
+  display:flex;
+  width:100%;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+  list-style-type: none;
+  padding:1rem;
+}
+
+.main-nav a {
+  text-decoration: none;
+}
+

assets/css/variables.css

@@ -0,0 +1,86 @@
+:root {
+  /*### PrimaryColor ###*/
+  --demo1:hsl(98, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --pri:98; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --priCol20:hsl(var(--pri), 100%, 100%);
+  --priCol19:hsl(var(--pri), 100%, 95%);
+  --priCol18:hsl(var(--pri), 100%, 90%);
+  --priCol17:hsl(var(--pri), 100%, 85%);
+  --priCol16:hsl(var(--pri), 100%, 80%);
+  --priCol15:hsl(var(--pri), 100%, 75%);
+  --priCol14:hsl(var(--pri), 100%, 70%);
+  --priCol13:hsl(var(--pri), 100%, 65%);
+  --priCol12:hsl(var(--pri), 100%, 60%);
+  --priCol11:hsl(var(--pri), 100%, 55%);
+  --priCol10:hsl(var(--pri), 100%, 50%);
+  --priCol9:hsl(var(--pri), 100%, 45%);
+  --priCol8:hsl(var(--pri), 100%, 40%);
+  --priCol7:hsl(var(--pri), 100%, 35%);
+  --priCol6:hsl(var(--pri), 100%, 30%);
+  --priCol5:hsl(var(--pri), 100%, 25%);
+  --priCol4:hsl(var(--pri), 100%, 20%);
+  --priCol3:hsl(var(--pri), 100%, 15%);
+  --priCol2:hsl(var(--pri), 100%, 10%);
+  --priCol1:hsl(var(--pri), 100%, 5%);
+
+  /*### SecondColor ###*/
+  --demo2:hsl(207, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+  --sec:207; /*Change only this from the color that you need! Don't Touch the code below!*/
+  /*The color below is automaticaly created 20 levels of lightness*/
+  --secCol20:hsl(var(--sec), 100%, 100%);
+  --secCol19:hsl(var(--sec), 100%, 95%);
+  --secCol18:hsl(var(--sec), 100%, 90%);
+  --secCol17:hsl(var(--sec), 100%, 85%);
+  --secCol16:hsl(var(--sec), 100%, 80%);
+  --secCol15:hsl(var(--sec), 100%, 75%);
+  --secCol14:hsl(var(--sec), 100%, 70%);
+  --secCol13:hsl(var(--sec), 100%, 65%);
+  --secCol12:hsl(var(--sec), 100%, 60%);
+  --secCol11:hsl(var(--sec), 100%, 55%);
+  --secCol10:hsl(var(--sec), 100%, 50%);
+  --secCol9:hsl(var(--sec), 100%, 45%);
+  --secCol8:hsl(var(--sec), 100%, 40%);
+  --secCol7:hsl(var(--sec), 100%, 35%);
+  --secCol6:hsl(var(--sec), 100%, 30%);
+  --secCol5:hsl(var(--sec), 100%, 25%);
+  --secCol4:hsl(var(--sec), 100%, 20%);
+  --secCol3:hsl(var(--sec), 100%, 15%);
+  --secCol2:hsl(var(--sec), 100%, 10%);
+  --secCol1:hsl(var(--sec), 100%, 5%);
+
+    /*### ThirdColor ###*/
+    --demo3:hsl(280, 100%, 50%);/*Use this only to check the color (--pri) if is fine*/
+    --thi:280; /*Change only this from the color that you need! Don't Touch the code below!*/
+    /*The color below is automaticaly created 20 levels of lightness*/
+    --thiCol20:hsl(var(--thi), 100%, 100%);
+    --thiCol19:hsl(var(--thi), 100%, 95%);
+    --thiCol18:hsl(var(--thi), 100%, 90%);
+    --thiCol17:hsl(var(--thi), 100%, 85%);
+    --thiCol16:hsl(var(--thi), 100%, 80%);
+    --thiCol15:hsl(var(--thi), 100%, 75%);
+    --thiCol14:hsl(var(--thi), 100%, 70%);
+    --thiCol13:hsl(var(--thi), 100%, 65%);
+    --thiCol12:hsl(var(--thi), 100%, 60%);
+    --thiCol11:hsl(var(--thi), 100%, 55%);
+    --thiCol10:hsl(var(--thi), 100%, 50%);
+    --thiCol9:hsl(var(--thi), 100%, 45%);
+    --thiCol8:hsl(var(--thi), 100%, 40%);
+    --thiCol7:hsl(var(--thi), 100%, 35%);
+    --thiCol6:hsl(var(--thi), 100%, 30%);
+    --thiCol5:hsl(var(--thi), 100%, 25%);
+    --thiCol4:hsl(var(--thi), 100%, 20%);
+    --thiCol3:hsl(var(--thi), 100%, 15%);
+    --thiCol2:hsl(var(--thi), 100%, 10%);
+    --thiCol1:hsl(var(--thi), 100%, 5%);
+
+  /*######################################*/
+
+  /*##### Default Variable #####*/
+  --padsidepage:0 25px; /*Padding side for page*/
+}
+
+/* ### Use Example ### 
+background-color:var(--main-bg-color)
+*/
+

assets/js/main.js

@@ -0,0 +1,9 @@
+/* @ default js*/
+function yearNow(textlocation) {
+  //This is a function to substitutes a value into the current year.
+  //Usually good for the footer.
+  var data = new Date();
+  var year;
+  year = data.getFullYear();
+  document.querySelector(textlocation).replaceWith(year);
+}