Goggwell

Nah I ain't rich And BTW, I owe you 12$, so how can I donate?

I can remove the prices if needed And plus, none of the money will go to me, I'll donate all of it to iOSGods And I also stated that I could turn this into a giveaway

Test away! It's pretty darn good!

There's coding as well, so I don't think this would go in the GFX section. And this is General because I want people to know that they can have it at a lower price or as a giveaway.

Hey guys! So, I recently got the money to purchase several premium bundles for GFX and coding/developing alike. These bundles are amazing, and are totally BEAST! I was also able to purchase (with the extra cash) a Treehouse PRO account, and a Codepen PRO account. More coding for me! I was wondering, since I'm such a nice guy, if I should sell these for a lower price, or give them away for free. What do you guys think? Before you make a decision, here are the bundles below: https://ui8.net/product/heroes - HEROES | 37 Beautiful Background Header Images - 8$ https://ui8.net/product/ballicons - BALLICONS | 200+ 2-Way Animated Icons (PSD, GIF, AE) - 48$ https://ui8.net/product/xcode-for-designers - XCODE for DESIGNERS | Learn to Design and Code from Professional Keynote Speakers with Xcode - 8$ https://ui8.net/product/learn-swift-by-examples - LEARN SWIFT | Learn Swift from cutting-edge coders and designers through 95+ lectures and real-life situations - 8$ Choice is yours

Hey guys, I'm making a template on Photoshop for a website for a Gaming Clan! The problem is that I do not have any inspiration whatsoever. I was wondering if you guys had any thoughts about what a Gaming Website might look like. I really need your help! I've already made a logo, and the background info. But that won't matter as I have nothing else. If you help me, I'll turn this template into a free, public one for you guys to use!

Are you guys forgetting that I'm a GFX artist too?

I also forgot to mention, you can replace the words inside the boxes to your own! Just replace the words (just Ctrl + F and search lorem, the words will appear)

I was scavenging Codepen for something really Christmas-y, and I found it! Check it out: http://codepen.io/dazulu/pen/ByoWee It's a Christmas Calendar that actually works in real-time! Amazing, huh? Using animations, CSS and the latest in great HTML coding! Too lazy to check out Codepen? View the coding down below: <h1>Merry Christmas</h1> <ul> <li><div class="door">1</div></li> <li><div class="door">2</div></li> <li><div class="door">3</div></li> <li><div class="door">4</div></li> <li><div class="door">5</div></li> <li><div class="door">6</div></li> <li><div class="door">7</div></li> <li><div class="door">8</div></li> <li><div class="door">9</div></li> <li><div class="door">10</div></li> <li><div class="door">11</div></li> <li><div class="door">12</div></li> <li><div class="door">13</div></li> <li><div class="door">14</div></li> <li><div class="door">15</div></li> <li><div class="door">16</div></li> <li><div class="door">17</div></li> <li><div class="door">18</div></li> <li><div class="door">19</div></li> <li><div class="door">20</div></li> <li><div class="door">21</div></li> <li><div class="door">22</div></li> <li><div class="door">23</div></li> <li><div class="door">24</div></li> <li><div class="door">25</div></li> </ul> <p id="message"></p> @import url(http://fonts.googleapis.com/css?family=Oleo+Script); body { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg"); color: #fff; font-family: 'Oleo Script', cursive; padding: 20px; font-weight: 400; } h1 { margin:0; font-size:75px; line-height: 75px; text-align: center; font-weight: 400; } ul { margin:0 auto 30px auto; padding:0; list-style-type:none; max-width:900px; width: 100%; text-align: center; user-select: none; } li { font-weight: 400; background-color: #fff; box-sizing: border-box; border-radius: 6px; display: inline-block; color:#111; cursor:pointer; font-size: 26px; padding:15px; margin:25px 12px; width: 130px; height:130px; line-height: 100px; text-align:center; position: relative; vertical-align:top; user-select: none; perspective: 800px; transition: all 0.4s ease-in-out; } ul li:last-child { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/santa.jpg") center top; background-size:cover; display:block; clear:both; margin: 20px auto 0 auto; width: 200px; height: 275px; } ul li:last-child .door { font-size: 100px; width: 200px; height: 275px; line-height: 240px; } ul li:last-child .revealed { line-height: 123px; } .door { user-select: none; color:#fff; font-size: 70px; position: absolute; top:0; left:0; background-color: #91c1cc; box-sizing: border-box; border-top: 2px #eee dashed; border-right: 2px #eee dashed; border-bottom: 2px #eee dashed; border-left: 1px #eee solid; border-radius: 6px; padding:15px; width: 130px; height:130px; transform-origin: 0 40%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; } .current .door { background-color: #7EAD44; } .current .door.open{ color: #7EAD44; } .revealed { user-select: none; } #message { box-sizing: border-box; color: #222; display: none; font-size: 24px; padding: 20px; background: #eddecb; max-width: 500px; width: 100%; border-radius: 15px; margin: 0 auto; } .open { box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2); color: #91c1cc; transform: rotate3d(0, 1, 0, -98deg); } .jiggle { animation: jiggle 0.2s infinite; transform: rotate(-1deg); } @keyframes jiggle { 0% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } @media screen and (min-width: 480px) { li { margin:25px 20px; } } @media screen and (min-width: 768px) { body { background-size:150px; } p { right: 6%; top: 20%; bottom: auto; margin-left: auto; left: auto; } } $( document ).ready(function() { var words = ["Lorem ", "ipsum ", "delor", "sit", "amet", "consect", "adipisci", "elit,", "sed.", "Eiusmod", "tempor", "a", "enim", "minim", "season", "nulla", "dolore", "sint", "id", "est", "laboris", "ut.", "aute", "laborum", "toe"]; var message = ""; var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var scrolled = false; var timeDelay = 200; // function to reveal message var cardReveal = function() { $("#message").text(message).show(); } //day=25; // uncomment to skip to 25 // Only work in December if(month === 12) { // Loop through each calendar window $("li").each( function( index ) { var adventwindow = index + 1; var item = $(this); // Open past windows if( day !== adventwindow && adventwindow < day ) { window.setTimeout(function(){ item.children(".door").addClass("open"); }, timeDelay); } // timeout offset for past window opening animation timeDelay += 100; // Add words so far to message variable if( adventwindow <= day ) { var word = words[index]; $(this).append('<div class="revealed">' + word + '</div>'); message = message + " " + word; } // Add jiggle animation to current day window if(adventwindow === day) { $(this).addClass("current"); $(this).addClass("jiggle"); } // On clicking a window, toggle it open/closed and // handle other things such as removing jiggle and 25th $(this).on("click", function() { if(adventwindow <= day) { $(this).children(".door").toggleClass("open"); } $(this).removeClass("jiggle"); // If 25th, can show the postcard with message if(day >= 25 && adventwindow === 25) { cardReveal(); // Animate scroll to postcard if not already done if(!scrolled) { $('html, body').animate({ scrollTop: $("#message").offset().top }, 2000); scrolled = true; } } }); }); // If beyond 25, show postcard if(day >= 26){ cardReveal(); } } }); The coding is in order from HTML --> CSS --> Javascript/jQuery Don't forget to link the CSS and JS files in your HTML code! And add the DOCTYPE at the top of the HTML code as well! Have fun!

So, what is your coding language? Do you have a favourite, or something that you know how to use very well? Share your language below! Mine is HTML/CSS, although once I get into programming, I might as well switch to Obj-C, C++, C# and Swift.

Hey guys! I'll be talking to you today about Webbsy, a PSD to HTML converter based on Photoshop! Basically, PSD to HTML means Photoshop to Website, because a PSD is a Photoshop file and HTML is the coding behind a website. Webbsy is probably one of the best products out there for this kind of thing! You can do this manually, which takes so much time, or use Webbsy! Here's what it looks like in Photoshop: This is one of the older versions of Webbsy. There's a newer version that is basically the same thing except it packs in a lot more stuff! As you can see, you just design a site on Photoshop, then open Webbsy and turn everything in the file into a website! Easy isn't it? I have used this product, so I can verify how AWESOME this is! Here's the site I made: http://iogod.hol.es/Flat/ How long did that site take me? 1-2 minutes! Incredible, huh? Visit the official website at 'webbsy.com' View the video below for a brief tutorial:

Thank you so much! I'll feature you in the credits for sure

I might use this in a design I'll be coming up with for my website. Is it alright if I use this and credit you?

Well then, I'll just have to keep watching the videos In the mean time, here's something random for you guys: var main = function() { $('.article').click(function() { $('.article').removeClass('current'); $('.description').hide(); $(this).addClass('current'); $(this).children('.description').show(); }); $(document).keypress(function(event) { if(event.which === 111) { $('.description').hide(); $('.current').children('.description').show(); } else if(event.which === 110) { var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); nextArticle.addClass('current'); } }); } $(document).ready(main);

I've already watched the first few video tutorials, but I still do not understand how to work the basics of Edge Animate. I am being legit.

G O G G W E L L Hi! I recently got Edge Animate CC, which is a tool used to design animated stuff for the web. No coding is required, but when you're finished the stuff you create converts into HTML5 so you can paste it into your code. Now, anyone here know how to use it? Cause I really need some pointers. I have no idea how to use it. I know DreamWeaver, Muse, Photoshop, Illustrator and Lightroom. That's basically it.

Once again, we have almost reached another milestone. Nice work people! It seems like only yesterday that we reached 10K. I would like to thank all of the members for helping us reach this amazing goal! And it's almost December! Time to set up those Christmas decorations! Let's keep it up!

Well the site is called iOSGods for a reason. We have already expanded to fit a coding section, but personally I do not wish to see an Android community spring to life in this one, because we are an iOS-based establishment. And plus, we can always create another site called AndroidGods

Hey guys! As most of you know, HTML5 is the most commonly used coding language for building a website. Not only is it the most common, but it is the most versatile and easiest to use! To show you how easy it is, I have created a website template for you guys to use. It's a very simple template, designed to show people your 'About Me'! Here's a picture of what the website looks like: It's a pretty simple website, don't you think? Here's the code for it: <!DOCTYPE html> <head> <style> body { text-align: center; background: url("http://p1.pichost.me/i/51/1750928.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; color: white; font-family: Helvetica; } p { font-size: 24px; } input { border: 0; padding: 12px; font-size: 18px; } input[type="submit"] { background: #2c3e50; color: #ecf0f1; } </style> </head> <body> <img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250"> <p>Hi! I am learning how to make my very own web page! I really like blueberry muffins and long walks on the beach.</p> <input type="email" placeholder="Email"> <input type="submit"> </body> Now, this code may seem a bit difficult to understand for all you newbies out there, so let me walk you through it. I'll skim through the code really fast. The background image comes from this part of the code: <style> body { text-align: center; background: url("http://p1.pichost.me/i/51/1750928.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; color: white; font-family: Helvetica; } See the part where it says 'background: url("http://p1.pichost.me/i/51/1750928.jpg");'? That's the link to the picture you are seeing in the background. You can change the picture to your liking. The coding below it simply adjusts the image to fit the background. The same rule applies with the picture in the middle. It comes from this part of the code: <img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250"> This part is below <body> and above <p> in the code. Once again, you can change the link. The part where it says 'height' and 'width' are just functions that adjust the picture, so you want the original picture to be a square. <p> means paragraph. Judging by the part that comes after it, you can guess that <p> is the part below the picture. You can also change the picture to a title. Just delete the picture code and add this: <h1> After <h1> just write down the title of your site and then add </h1> There's also <h2> <h3> all the way up to <h6> You'll be a master in no time!