Jump to content

Discord   |   Play games and chat with our PC gaming community in Discord.
Launch Discord  
Photo

Hour of Code - [Create a Galaxy]-HTML, CSS



  • Please log in to reply
3 replies to this topic

#1
frostb1te198

frostb1te198
  • Forum Member
  • Animation - Programming

  • 42 posts

Hey I'm Frostb1te198 and I'll be helping you guys with my first Hour of code for you guys. First you need to know that Admins please let me know If I can continue this. Also I'll try to help out as much as I can in comments but lets get started.

 

REQUIREMENTS

  • Must have some sort of source to do HTML, and CSS like notepad or a website to run this code.
  • This is a Hour of Code I hope to do this weekly :D please let me know below to keep on BUT I need to make sure I wont get ban for this.
  • LETS GET STARTED

HOUR OF CODE: v0.1 HOW TO CREATE A GALAXY

 

Ok well Lets get started  First where going to start off by creating a Index.html and Style.css

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/PmbqZa">
        
        <!-- Insert the 'earth' on the next line -->
        
        
    </body></html> 

We will add this to it under "Inster the earth we will also do Sun as well

<img id="earth" src="http://goo.gl/41IWnf">

Now I added this for you, you will put this on the Sytle.css <!--This is all done do NOT edit--!>

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
    
    /* The universe is black */
    background-color: black;
}


#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
    
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    ;
}


#earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
}


#earth-orbit {
    /* For Section #2 */
}

---------------------------------------------------------------

Now we will add the <div></div> This will add the Orbit. And no it does not move :(

 

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/PmbqZa">
        
        <!-- Insert the 'earth' on the next line -->
        <img id="earth" src="http://goo.gl/41IWnf">
        <div id='earth-orbit'>
                #earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
}
    <img id='earth' src="http://goo.gl/41IWnf">
    <img id='sun' src='http://goo.gl/PmbqZa'>


</div>
    </body>
</html>
--------------------------------------------------------------------
CONGRATS YOU HAVE DONE AN HOUR OF CODE I WILL HAVE MY CODE BELOW OF INDEX AND CSS BUT THANK YOU FOR DOING THIS PLEASE LET ME KNOW IF I SHOULD KEEP ON DOING THIS BUT ADMINS PLZ RESPOND AND LET ME KNOW IF I CAN DO THIS ANY WAY THANK YOU FOR DOING THIS :D LET ME KNOW WHAT YOU GUYS THINK :D
-----------------------------------------------------------------------------------------
NEXT HOUR OF CODE [Javascripting] - Games HYPE
--------------------------------MY CODES ---------------------------------
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/PmbqZa">
        
        <!-- Insert the 'earth' on the next line -->
        <img id="earth" src="http://goo.gl/41IWnf">
        #earth {
    /* Style your earth */
    position: absolute;
    top: 25%;
    left: 25%;
}
<img id='sun' src='http://goo.gl/PmbqZa'>
    </body>
</html>
--------------------------------------------------------------------------------------
html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
    
    /* The universe is black */
    background-color: black;
}


#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
    
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    ;
}


#earth {
    /* Style your earth */
}


#earth-orbit {
    /* For Section #2 */
}
--------------------------------------------------------------------------
CREDITS:
Frostb1te198,
ymqg0


#2
Kherune

Kherune

  • Member
  • Just Rune'd the whole thing

  • 1,661 posts

@Paronity @BadBadRobot

 

This is stuffs for you guys!



#3
Paronity

Paronity

  • Retired
  • var Paronity = new Guru();

  • 16,885 posts

I don't think there is any issues with people posting this kind of stuff, in case people want to work through some of it, but I have moved it to the correct place and labeled it correctly. Pay attention to where that is and post them here. 

 

Additionally, be careful with what you post and make sure it's your work. :)



#4
frostb1te198

frostb1te198
  • Forum Member
  • Animation - Programming

  • 42 posts

Here is a website you can use to run the scripts put the index.html in the html box and Style.css in the css box

 

 

http://cssdeck.com/labs


Edited by frostb1te198, May 18, 2015.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users