Account Creation VF Page with Lightening Look

VF Preview Screen 

Lightening Component :

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
   <aura:attribute name="newAccount" type="Account" default="{ 'sobjectType': 'Account'}"/>
 
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Gaurav Account</p>
                <h1 class="slds-text-heading--medium">My Account</h1>
            </div>
        </div>
    </div>
 
<div class="slds-col slds-col--padded slds-p-top--large">
         
            <fieldset class="slds-box slds-theme--default slds-container--large">
                <legend id="Accountform" class="slds-text-heading--small
                                                slds-p-vertical--medium">
                    Add Gaurav Account
                </legend>
             
             
                <div class="slds">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
                         
                            <div class="slds-form-element slds-is-required">
                                <div class="slds-form-element__control">
                                    <ui:inputText aura:id="account Name" label="Account Name"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.Name}"
                                                  />
                                </div>
                            </div>
                         
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.SLAExpirationDate__c}"
                                                  displayDatePicker="true "/>
                                </div>
                            </div>
                         
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <ui:inputText aura:id="accountSLADate" label="Phone"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.phone}"
                                                  />
                                </div>
                            </div>
                        </div>
                        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="expname" label="Account Site"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.Site}"
                                              />
                            </div>
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="expname" label="SIC Description"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.SicDesc}"
                                              />
                            </div>
                         
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.SLASerialNumber__c}"
                                              />
                            </div>
                        </div>
                    </div>
                </div>
                <center>
                <div class="slds-form-element">
                    <ui:button label="Create Account" class="slds-button slds-button--brand" press="{!c.clickCreateAccount}"/>
                </div>
                </center>
            </fieldset>
    </div>
</aura:component>

Lightening Application:

<aura:application extends="force:slds">
    <c:GRVComp />

</aura:application>

Controller JS :

({
    clickCreateAccount: function(component, event, helper) {
    var newAccount = component.get("v.newAccount");
    helper.createAccount(component, newAccount);
    alert("Account created Successfully!!");
 }
})

Helper JS :

({
    createAccount: function(component, Account) {
    var action = component.get("c.saveAccount");
    action.setParams({
        "accountObj": Account
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        alert("state");
        if (component.isValid() && state === "SUCCESS") {
            var newAccount = component.get("v.newAccount");
            component.set("v.newAccount", newAccount);
        }
    });
    $A.enqueueAction(action);
}
})