19 January 2020

Game Development Screenshot Saturday Episode 1

Hello and welcome to my blog if you are first time visitor.

Here are my TOP 5 Indie Game Development Screenshots for this week.

For more cool stuff please follow me on Twitter >> FLANTURE


5. Minute of Islands by @minuteofislands


4. BattleTronik by @fracteed made with Godot engine.


3. Early morning screenshot by @claudio_tulio made with Unity


2. This game is also being created with Unity by @thebigfatjay and it looks great!



1. My favorite screenshot this week is from game Vernal Edge by @hymynameismatt 


I hope you liked these shots from work in progress games. 

Once again, follow me on twitter >> FLANTURE and more screenshots next week.

01 October 2019

Learn HTML - Quiz for beginners


Take this short quiz for beginners to start learning about HTML. Hover for answer.


Question 1: The head element is placed between which two tags?


  1. body and script
  2. body and h1
  3. html and body
  4. h1 and h3
 Answer 


Question 2: Which tag does not describe metadata?

  1. meta
  2. script
  3. title
  4. data
 Answer 


Question 3: Which element does not have end tag?

  1. html
  2. body
  3. script
  4. none of the above
 Answer 


Question 4: There is only one valid comment among next answers, which one?

  1. <!Valid comment ->
  2. <!-- Valid comment -->
  3. <! Valid comment >
  4. <!-- Valid comment ->
 Answer 


Question 5: What tag is used to display smallest heading?

  1. H1
  2. H6
  3. H10
  4. HS

Answer


This is just a start. Quiz will be regularly updated. Stay tuned.

How many answers did you get correctly out of 5?

*_*

21 March 2019

Game of Thrones Final Season CSS Intro Animation

While waiting for White Walkers to kill us all, I've decided to play a little bit more with CSS animations. 

This simple text intro have 4 keyframes where letter-spacing is changing, creating interesting movie-like effect. Title text is fading in from black to white and subtitle appears at the end giving the animation dramatic ending, which is expected from this kind of show.

In this case animation lasts for 3 seconds, feel free to play with parameters as you like.

Here is the code and demo:





 
<!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
      <title>Game of Thrones intro</title>  
      <style>  
      * {  
           padding: 0;  
           margin: 0;  
           font-family: sans-serif;  
      }  
      body {  
           background: #000;  
      }  
      .container {  
           text-align: center;  
           position: absolute;  
           top: 50%;  
           left: 50%;  
           transform: translate(-50%,-50%);  
      }  
      .container span {  
           text-transform: uppercase;  
           display: block;  
      }  
      .text_title {  
           color: white;  
           font-size: 60px;  
           font-weight: 700;  
           letter-spacing: 8px;  
           margin-bottom: 20px;  
           background: black;  
           position: relative;  
           animation: text 3s 1;  
      }  
      .text_subtitle {  
           font-size: 30px;  
           color: #5DADE2;  
      }  
      @keyframes text {  
           0% {  
                color: black;  
                margin-bottom: -40px;  
           }  
           25% {  
                letter-spacing: 25px;  
                margin-bottom: -40px;  
           }  
           75% {  
                letter-spacing: 5px;  
                margin-bottom: -40px;  
           }  
           95% {  
                letter-spacing: 8px;  
           }  
      }       
      </style>  
  </head>  
 <body>  
  <div class="container">  
   <span class="text_title">Game of Thrones</span>  
      <span class="text_subtitle">final season</span>  
  </div>  
 </body>  
 </html>  
The Spring is coming! Happy Coding :) *_*

 

template by blogger templates