Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

Help with personal project

Hey. I started working my portfolio real hard and right now I'm working on a project for a fictional fashion brand (urban style from New York). I have made a logo, brochure and shopping bag. Now I want to design and code the website. Also I want to get out from my comfort zone so the web site will be responsive, I'll be using svgs and I want to add few css3 animations on the first page. Here is the main page mockup. https://drive.google.com/file/d/0BzhAStaGPddxUGhPX2FKWHlXcDA/edit?usp=sharing What I want to happen on this page is that the sun rays will keep spinning around. Responsive. Correct positioning (sun is behind logo) and later I want to add more animations at the bottom of the page. (Yes I know that the two tall towers look like the twin towers. Ill change that later). So I'll start working on the code and I'll put it here for advice. Tell me what do you think about the logo BTW. Thanks!

3 Answers

Joe Wilmoth
Joe Wilmoth
2,991 Points
Joe Wilmoth
Joe Wilmoth
2,991 Points

Are you asking what script you need to make the sun rays spin?

If so, do you have the logo broken down into separate layers?

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

If you have the sun rays on a separate layer and position them where you want them. Then you could use jQuery to use the CSS transform: rotate(); property in an endless loop!

Al Lu
seal-mask
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points
Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

The logo is svg. The sun rays are png. I had success using css3 animation. I need help with the basic layout of the page. It's my first responsive project so Im not sure if im doing it right. I will upload the code tomorrow because I want to try other ways first. I don't know why but I'm having problems although its very simple page.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Have you gone through the responsive videos on here. Yeah get your code into a codepen or jsfiddle and send the link would be happy to give any tips or guidance. Just tag me with the @ and my name so i can respond. Alon Lubin