Design Challenge 1

MainPage in Xaml:

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:newflex" x:Class="newflex.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true" >
	<ContentPage.Resources>
	<Style TargetType="Frame">
	<Setter Property="BackgroundColor" Value="#fdfdfd" />
	<Setter Property="BorderColor" Value="#e5e5e5" />
	<Setter Property="Margin" Value="10" />
	<Setter Property="CornerRadius" Value="15" />
	</Style>
	<Style TargetType="Label">
	<Setter Property="Margin" Value="0, 5" />
	</Style>
	<Style x:Key="headerLabel" TargetType="Label">
	<Setter Property="Margin" Value="0, 8" />
	<Setter Property="FontSize" Value="Large" />
	<Setter Property="TextColor" Value="Blue" />
	</Style>
	<Style TargetType="Image">
	<Setter Property="FlexLayout.Order" Value="-1" />
	<Setter Property="FlexLayout.AlignSelf" Value="Center" />
	</Style>
	<Style TargetType="Button">
	<Setter Property="Text" Value="MoreInfo" />
	<Setter Property="FontSize" Value="Small" />
	<Setter Property="TextColor" Value="White" />
	<Setter Property="BackgroundColor" Value="#4c90ee" />
	<Setter Property="BorderRadius" Value="30" />
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Both">
	<FlexLayout>
	<Frame WidthRequest="320"
	HeightRequest="650">
	<FlexLayout Direction="Column">
	<Grid BackgroundColor="White">
	<Grid.RowDefinitions>
	<RowDefinition Height="50"/>
	<RowDefinition Height="*"/>
	<RowDefinition Height="50"/>
	</Grid.RowDefinitions>
	<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,10,0,0" Grid.Row="0">
	<Label Text=""/>
	<Image Source="download.jpeg" HeightRequest="400" WidthRequest="300" Opacity="0.6" VerticalOptions="Start" Margin="0,3,0,0"/>
	</StackLayout>
	<Grid Grid.Row="1" Margin="20,0,20,0">
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition Height="50"/>
	<RowDefinition Height="50"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="40"/>
	<RowDefinition Height="40"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Image Source="Samir.png" HeightRequest="70" VerticalOptions="EndAndExpand"/>
	<Entry Grid.Row="1" Placeholder="Email or Phone Number" PlaceholderColor="#bababa" FontSize="16"/>
	<Entry Grid.Row="2" Placeholder="Password" PlaceholderColor="#bababa" FontSize="16"/>
	<Button Text="LogIn" BackgroundColor="#3897f0" TextColor="White" HeightRequest="50" VerticalOptions="Start" Grid.Row="3"/>
	<Label Text="LoginTrouble?GetHelp" HorizontalOptions="Center" Grid.Row="4" Margin="0,10,0,0" FontSize="12"/>
	<Grid Grid.Row="5">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="Auto"/>
	<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Label BackgroundColor="#bababa" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
	<!--<Label Text="" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>-->
	<Image Source="http://blog.addthiscdn.com/wp-content/uploads/2015/11/facebook_2.png" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>
	<Label BackgroundColor="#bababa" Grid.Column="2" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
	</Grid>
	<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="6">
	<Label Text="LoginWithFacebook" TextColor="#485992" />
	</StackLayout>
	</Grid>
	<StackLayout Grid.Row="2" BackgroundColor="#ffffff">
	<Label HeightRequest="1" BackgroundColor="#e3e3e3"/>
	<Label Text="Dont'Have Account Login? SignUp" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
	</StackLayout>
	</Grid>
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub