Projects

Responsive

responsive project screenshot

This project is an single page project with open-subject which is about ColdPlay music group. This Project is based on mobile first and it has 6 break points to help the best usability exprience. The challenge on this project was hero image(banner) and YouTube video that need some extra code and some photoshop skills to have different sizes of hero image to load on different sizes. The Humberger menu on mobile has an animation that worked with jQuery which adding a class to menu(nav bar). Also in this project, it's shown that how it's posiible to use cropped images using source attribute to display better on different device sizes.

Visit Live

The technologies that were used on this Project help to get the best result, such as Photoshop, Illustrator, HTML, CSS, and JavaScript/jQuery.

For the Banner or Hero image, among different ways to do it, in this website which is mobile-first, Source was the best solution. It started from smallest size to largest size.



The interesting about responsive design is that developers can be so creative about their hamburger menus and there are lots of different design that can apply to the website.



The transition for the hamburger menu was through CSS and all the possible animations that make the movement in lines.

 	 
	.row .three{
	  padding: 80px 30px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  background-color: #2c3e50;
	  color: #ecf0f1;
	  text-align: center;
	}

	.hamburger .line{
	  width: 50px;
	  height: 5px;
	  background-color: #ecf0f1;
	  display: block;
	  margin: 8px auto;
	  -webkit-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
	}

	.hamburger:hover{
	  cursor: pointer;
	}

	#hamburger.is-active{
	  -webkit-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
	  -webkit-transition-delay: 0.4s;
	  -o-transition-delay: 0.4s;
	  transition-delay: 0.4s;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	}

	#hamburger.is-active .line:nth-child(2){
	  width: 0px;
	}

	#hamburger.is-active .line:nth-child(1),
	#hamburger.is-active .line:nth-child(3){
	  -webkit-transition-delay: 0.2s;
	  -o-transition-delay: 0.2s;
	  transition-delay: 0.2s;
	}

	#hamburger.is-active .line:nth-child(1){
	  -webkit-transform: translateY(13px);
	  -ms-transform: translateY(13px);
	  -o-transform: translateY(13px);
	  transform: translateY(13px);
	}

	#hamburger.is-active .line:nth-child(3){
	  -webkit-transform: translateY(-13px) rotate(90deg);
	  -ms-transform: translateY(-13px) rotate(90deg);
	  -o-transform: translateY(-13px) rotate(90deg);
	  transform: translateY(-13px) rotate(90deg);
	}