Visit LEDU token page

PSD TO HTML Responsive

PSD TO HTML Responsive

  • English
  • Programming
  • HTML5HTML5
  • (1486)
  • Project length: 14h 03m

Overview

First Part

In this part we are building a full-page header with navigation.

You need:

  1. Basic HTML structure
  2. A mobile-nav contained that will disappear on desktop width
  3. A desktop nav that will disappear on mobile NOTE: Links are not included in the mobile-nav, this will be done using jQuery
  4. Centered Image and Text
  5. Header should have a background image with overlay

Two

For this part, refer to section 2: https://github.com/UmarOutstanding/ShastaPSD/blob/master/PSDs/Desktop.jpg https://github.com/UmarOutstanding/ShastaPSD/blob/master/PSDs/Mobile.jpg

  1. Create 4 Elements

     - h2 class="headline"
     - p class="supporting-copy"
     - two-grid
    - button

NOTE: all text elements look the same when using 'Meyer's CSS Reset'. This is helpful because it lets you style the elements yourself.

  1. The text of h2 and p are copied from the PSD and they are given their styles.

  2. The two-grid is:

       two equal columns
       width of 90px between the two columns
  3. The button is created by copying width and height from the PSD and applying a

      border-radius of 22px to it

the text in the button is centered using a flex-container class

      .flex-container {
                     display:flex; 
                     justify-content:center; 
                    align-items:center;
            }
  1. Elements are moved down using margin-top

Three / Community

  1. Create a slider
  2. Make sure it's responsive
  3. apply responsive styles

The slider used is slick slider. It is a jquery plugin. You can download it or link to:

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

Then you can set the settings to :

       $('.community-slider').slick({
    infinite: true,
    slidesToShow: 3,
    variableWidth: true,});

variableWidth allow you to change the width of a slick-slide using CSS.

Responsive Breakpoints can also be used so that as the browser-width reaches container-width, the container-width can be changed to a lower width:

@media (max-width: 1100px) {
.community-slider-container {
    width: 750px;
}

}

@media (max-width: 750px) { .community-slider-container { width: 375px; } }

This is to be done in conjuction with the following:

In the javascript, a breakpoint can be introduced to lower the number of slides shows e.g.

  responsive: [
{
  breakpoint: 1100,
  settings: {
    slidesToShow: 2,
    infinite: true,
  }
},
{
  breakpoint: 750,
  settings: {
    slidesToShow: 1
  }
},

]

As breakpoint of 1100 is reached, the amount of slides will go down to 2. an as the breakpoint of 750 is reached, 1 slide will be shown.

FOUR / What people say

This part is done similar to part 3. There is a slider with 2 slides shown at default. The responsive breakpoint has 1 slide showing.

There is a line under quotes which can be created simply by using an element with CSS

<div class="line"></div>

.line { width: 100%; height: 1px; opacity: 0.3; background-color: rgb(255, 255, 255); margin-top: 48px; }

FIVE / Liberating

  1. A two equal columns grid
  2. Image Positioned in the center of first column
  3. Text is typed in the second column (as can be seen in the psd)

Image poitioning is done using the flex-container class (seen in part two)

SIX / Invest

Very similar to the previous section. You can change the order in which columns appear using the order property e.g.

#order-2 { order: 2; }

can make the first column appear to be the second column

So you can change the order of appearence WITHOUT changing the order of the html code.

Project Outline

Reviews

Average rating

5(1486 Reviews)