HTML & CSS & Javascript mobile-friendly single web page

Budget $10 - $40 USD
Bids 7
Average Bid $42

There are two areas in this one page.
One area is A, another is B. The size and layout of A and B depends on the size of the window, as area B has 4 buttons with dynamic size.
The 4 buttons in the area B with 2x2 layout. They have a minimum height and width in pixel, and minimum margin in pixel regardless of the size of window. These two restrictions define the minimum size of area B (height: Bh_min, width: Bw_min, with button height Buh_min, Buw_min).
Here's how the layout and size of A and B is determined. Say the window size is Wh in height and Ww in width.

If Wh>2*Bh_min and Ww>=Bw_min: resize the buttons inside B proportionally in both width, height and margin by up to Ww/Bw_min, in the pre-condition that area B must not occupy more than half of Wh, and stays at the bottom of the window. Area A takes the above.

ElseIf Ww>2*Bw_min and Wh>=Bh_min: resize the buttons inside B proportionally in both width and height and margin by up to Wh/Bh_min, in the pre-condition that area B must not occupy more than half of Ww, and stays at the right side of the window. Area A takes the left side.

ElseIf Wh>=Ww, area B with minimum size stays on the bottom, and A on the top.

Else area B with minimum size stays on the right, and A on the left.

The layout should adjust according to the rules above when resizing, mobile device rotating.
Need to test with Android and iOS devices, as well as mainstream browsers (Firefox, Chrome) on desktop computers.

Post a Project Like This

Looking to make some money?

  • Set your budget and the time frame
  • Outline your proposal
  • Get paid for your work

Bids on this Project

  • salientcomputer Profile Picture

    salientcomputer

    surat,  Bangladesh

    Hi I have experience in graphic and web design.i provide you W3C validated, cross browser, hand coded xhtml/css/javascript conversion.means quality work. Thanks

    Javascript, Website Design, Graphic Design, and Data Entry

  • MinhHoangAnh Profile Picture

    MinhHoangAnh

    Ho Chi Minh City,  Vietnam

    I'm working for Front-end website, my work: HTML5-CSS3(HTML-CSS) PSD To HTML5-CSS3(HTML-CSS) JavaScript - Jquery PHP MySQL Graphic-Design

    PHP, Javascript, XML, and Adobe Flash

  • waqasdeveloperz Profile Picture

    waqasdeveloperz

    Lahore,  Pakistan

    Waqasdeveloperz is a professional custom online graphic design company that knows how best to serve our customers when it comes to design logos be it company, website business etc. Our unique creative graphic design services include logo design, website logo design, website design, stationery design, banner design, brochure design and much more.

    Java, Javascript, Website Design, and Graphic Design

  • zhengnami13 Profile Picture

    zhengnami13

    Shenyang,  China

    I deliver only exceptionally robust and well-designed work as a rule. Furthermore, you should know that as a principle I do not finish my work until I believe it is of the most professional quality I am able to create. My skills encompass Native iOS , Android, and Black Berry mobile development, Python or Ruby web programming, and, in addition, Xamarin iOS / Android development. I possess deep technological expertise regarding Optical Character Recognition, Augmented , OpenCV, XMPP, and OpenTok. You will find me easy to communicate with to an extent by which you may be surprised, but that is because I believe only a dedicated connection with my employer can lead to truly extraordinary creations.

    PHP, Java, JSP, and Javascript

  • sunsoftpro Profile Picture

    sunsoftpro

    Ho Chi Minh,  Vietnam

    Glink Solutions, which full name is Glink Solution Technology, is an official established IT company that provide global IT solutions. Developing from its precursor, NQS company, that manage and working on the best outsourcing and freelancer website FREELANCER.COM with the account ID Isunsoft since 2012. Noticably, just with 3 operating years, Isunsoft achieved significant successful and high reputation from the site, with many good feedback in providing outsourcing services to customers all around the world. Taking the advantages of domestic labor, which are young, dynamic and skillful, Glink provides multiple IT services such as: Web design and development, E-commerce solutions, ERP software, mobile applications and cloud computing…to the variety of customers. On its expanding plan, Glink adopts its own Corporate Identity, with the clear visions and missions, to provide better services to domestic and international customers.

    PHP, Perl, ASP, and C Programming

  • topworkerbd Profile Picture

    topworkerbd

    Dhaka,  Bangladesh

    I love to work: => Responsive theme development using bootstrap 3 (Very latest version) => Module development using jquery/html5. => Payment API integration. => Shipping API integration. => Price matrix.Dynamic price calculator module. => Custom user design tools using html5. => BFS/DFS algorithm based module development.(using C Language) => Fixing Bug

    PHP, Javascript, XML, and Script Install

  • grtiwari Profile Picture

    grtiwari

    Ahmedabad,  India

    Extensive 10 years’ experience of both Web and UI Design with expert knowledge of HTML 5, XHTML (standards compliance and basic accessibility) and Cascading Style Sheets (CSS) with latest trends. Good knowledge of HTML 5, Adobe Photoshop/Dreamweaver/ Flash, Windows and Macintosh environments. Familiar with the JavaScript and Jquery.Also have worked on Magento, Worpress, Joomla theming. Highly self-motivated, professional designer with a fresh, clean approach to design. Strong work ethic and ability to follow through with projects from concept to the buttoned-up final product. Specialties Design Wireframes, High-Fidelity Prototypes , Mobile Prototypes, User Centered Design, Mock Ups

    PHP, Website Design, Graphic Design, and CSS