Day 5 - Diamond web page

November 22, 2019 | 4 minutes read

Today I have built a web page by following a tutorial from Youtube. Out of all the things I have learned from this tutorial, applying gradient was the most exciting part.
Below is a demonstration of how I applied gradient on the sign-up button:

Diamond web page


<div class="menu">  
        <i class="fas fa-gem"></i>
        <li id="active">Home</li>
        <li><a href="#" class="sign-up-btn"><span>Sign Up</span></a></li>
.sign-up-btn {
    top: 40px;
    right: 80px;
    position: absolute;
    text-decoration: none;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 30px;
    background-image: linear-gradient(#42455a, #42455a), radial-gradient(circle at top left, #fd00da, #19d7f8);
    background-origin: border-box;
    background-clip: content-box, border-box;

.sign-up-btn span {
    display: block;
    padding: 10px 20px;

After being done with the web page, I have done the "Applied Visual Course" on freecodecamp. And there are a few new things I have learnt from this course:


  • text-align: justify; Causes all lines of text except the last line to meet the left and right edges of the line box.
  • text-decoration: Line-through draws a 1px line across the text at its "middle" point.
  • <s></s>: HTML line through tag
  • <hr> border. Adds a horizontal line across the width of its containing element (self-closing tag).


p {
      transform: scale(2);

To change the scale of an element, CSS has the transform property, along with its scale() function.

p {
  transform: skewX(-32deg);
p {
  transform: skewY(78deg);

Skews the selected element along its X (horizontal) axis and Y (Vertical) axis by a given degree.

Finally I did some CSS animation practices which I believe I will have to gain more in-depth knowledge of, as this is a very new topic to me. But one interesting thing I have learnt though is:

CSS animation


  • ease-in - will start the animation slowly, and finish at full speed.
  • ease-out - will start the animation at full speed, then finish slowly.
  • ease-in-out - will start slowly, be fastest at the middle of the animation, then finish slowly.
  • ease - is like ease-in-out, except it starts slightly faster than it ends.
  • linear - uses no easing, applies a constant animation speed throughout.