gaf-mobile
Version:
GAF mobile Web site
297 lines (295 loc) • 16.1 kB
HTML
<!-- PAGE VIEW -->
<!-- Site home page -->
<main class="Homepage scroll-container" fl-analytics-section="Homepage">
<section class="Homepage-section Homepage-hero">
<div class="Homepage-hero-inner">
<h1 class="Homepage-hero-title">
Hire expert freelancers for your online job
</h1>
<p class="Homepage-hero-desc">
Millions of small businesses use Freelancer to turn their ideas into reality.
</p>
<div class="Homepage-hero-footer">
<div class="Homepage-hero-footer-item">
<a href="/post-project" class="btn btn-large btn-tertiary btn-no-border" fl-analytics="GoToPPP" fl-analytics-label="GetFreeQuotes">I want to hire</a>
</div>
<div class="Homepage-hero-footer-item">
<a href="/signup?role=freelancer" class="btn btn-large btn-hollow" fl-analytics="GoToSignup" fl-analytics-label="Signup">I want to work</a>
</div>
</div>
</div>
<div class="Homepage-hero-action">
<button class="Homepage-hero-action-btn btn-link">
<fl-svg src="images/icons/flicon-chevron-down.svg"></fl-svg>
</button>
</div>
</section>
<section class="Homepage-section Homepage-section--light Homepage-products">
<div class="Homepage-products-item">
<h2 class="Homepage-section-title">
Top Categories
</h2>
<div class="Homepage-slider">
<ul class="Homepage-slider-list SimpleSlider">
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project/Design?fallback-cat=4" fl-analytics="GoToPPP" fl-analytics-label="TopCategoriesDesign">
<div class="SimpleCard">
<div class="SimpleCard-header">
<h3 class="SimpleCard-title">
Design
</h3>
</div>
<span class="SimpleCard-desc">
Starts from $90
</span>
<div class="SimpleCard-img">
<img src="/images/homepage/top-categories-design.png" alt="Top Category - Design">
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project/Web-development?fallback-cat=1" fl-analytics="GoToPPP" fl-analytics-label="TopCategoriesWebDevelopment">
<div class="SimpleCard SimpleCard--secondary">
<div class="SimpleCard-header">
<h3 class="SimpleCard-title">
Website & Software
</h3>
</div>
<span class="SimpleCard-desc">
Starts from $200
</span>
<div class="SimpleCard-img">
<img src="/images/homepage/top-categories-website-and-software.png" alt="Top Category - Website and Software">
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project/Writing?fallback-cat=3" fl-analytics="GoToPPP" fl-analytics-label="TopCategoriesWriting">
<div class="SimpleCard SimpleCard--tertiary">
<div class="SimpleCard-header">
<h3 class="SimpleCard-title">
Writing & Content
</h3>
</div>
<span class="SimpleCard-desc">
Starts from $50
</span>
<div class="SimpleCard-img">
<img src="/images/homepage/top-categories-writing-and-content.png" alt="Top Category - Writing and Content">
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project/Data-entry?fallback-cat=5" fl-analytics="GoToPPP" fl-analytics-label="TopCategoriesDataEntry">
<div class="SimpleCard SimpleCard--quaternary">
<div class="SimpleCard-header">
<h3 class="SimpleCard-title">
Data Entry & Admin
</h3>
</div>
<span class="SimpleCard-desc">
Starts from $70
</span>
<div class="SimpleCard-img">
<img src="/images/homepage/top-categories-data-entry-and-admin.png" alt="Top Category - Data Entry and Admin">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="Homepage-products-item">
<h2 class="Homepage-section-title">
Featured Projects
</h2>
<div class="Homepage-slider">
<ul class="Homepage-slider-list Homepage-slider-list--featured-projects SimpleSlider">
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project" fl-analytics="GoToPPP" fl-analytics-label="FeaturedProjectCard">
<div class="FeaturedProject">
<div class="FeaturedProject-img">
<img src="/images/Sample-3.png" alt="Sample 3">
</div>
<div class="FeaturedProject-body">
<h3 class="FeaturedProject-title">
Build a website $250
</h3>
<span class="FeaturedProject-username">
nesiri
</span>
<div class="FeaturedProject-rating user-rating user-rating--simple" data-rating="5.0">
<span class="user-rating-progress"></span>
</div>
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project" fl-analytics="GoToPPP" fl-analytics-label="FeaturedProjectCard">
<div class="FeaturedProject">
<div class="FeaturedProject-img">
<img src="/images/Sample-4.png" alt="Sample 5">
</div>
<div class="FeaturedProject-body">
<h3 class="FeaturedProject-title">
Design some Business Cards $28
</h3>
<span class="FeaturedProject-username">
jfrankelt
</span>
<div class="FeaturedProject-rating user-rating user-rating--simple" data-rating="4.5">
<span class="user-rating-progress"></span>
</div>
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project" fl-analytics="GoToPPP" fl-analytics-label="FeaturedProjectCard">
<div class="FeaturedProject">
<div class="FeaturedProject-img">
<img src="/images/Sample-1.png" alt="Sample 4">
</div>
<div class="FeaturedProject-body">
<h3 class="FeaturedProject-title">
Mobile development $493
</h3>
<span class="FeaturedProject-username">
holidays12
</span>
<div class="FeaturedProject-rating user-rating user-rating--simple" data-rating="3.5">
<span class="user-rating-progress"></span>
</div>
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project" fl-analytics="GoToPPP" fl-analytics-label="FeaturedProjectCard">
<div class="FeaturedProject">
<div class="FeaturedProject-img">
<img src="/images/Sample-2.png" alt="Sample 1">
</div>
<div class="FeaturedProject-body">
<h3 class="FeaturedProject-title">
Logo Design $60
</h3>
<span class="FeaturedProject-username">
funnelblast
</span>
<div class="FeaturedProject-rating user-rating user-rating--simple" data-rating="4.0">
<span class="user-rating-progress"></span>
</div>
</div>
</div>
</a>
</li>
<li class="SimpleSlider-item">
<a class="SimpleSlider-linkBlock" href="/post-project" fl-analytics="GoToPPP" fl-analytics-label="FeaturedProjectCard">
<div class="FeaturedProject">
<div class="FeaturedProject-img">
<img src="/images/Sample-5.png" alt="Sample 2">
</div>
<div class="FeaturedProject-body">
<h3 class="FeaturedProject-title">
Post some Advertisements $84
</h3>
<span class="FeaturedProject-username">
designerblog
</span>
<div class="FeaturedProject-rating user-rating user-rating--simple" data-rating="5.0">
<span class="user-rating-progress"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="Homepage-section Homepage-section--alt Homepage-section--invert Homepage-details">
<h2 class="Homepage-section-title">
Freelancer connects
<br>
your idea with
<br>
talent, anywhere.
</h2>
<p class="Homepage-section-desc">
Bring all the pieces together. Create new projects, get competitive quotes and select freelancers within minutes. From start to finish Freelancer is for you.
</p>
</section>
<section class="Homepage-section Homepage-section--light">
<h2 class="Homepage-section-title">
How do you benefit?
</h2>
<ul class="Homepage-list">
<li class="Homepage-list-item">
<span class="Homepage-list-icon">
<fl-svg src="images/icons/flicon-tick-circled--solid.svg"></fl-svg>
</span>
<div class="Homepage-list-body">
<h4 class="Homepage-list-title">
Quick Results
</h4>
<p class="Homepage-list-desc">
You’ll receive competitive bids from our talented freelancers within minutes
</p>
</div>
</li>
<li class="Homepage-list-item">
<span class="Homepage-list-icon">
<fl-svg src="images/icons/flicon-tick-circled--solid.svg"></fl-svg>
</span>
<div class="Homepage-list-body">
<h4 class="Homepage-list-title">
Always Connected
</h4>
<p class="Homepage-list-desc">
Keeping up-to-date is easy with our realtime chat, 24/7 support, time tracker, and mobile apps
</p>
</div>
</li>
<li class="Homepage-list-item">
<span class="Homepage-list-icon">
<fl-svg src="images/icons/flicon-tick-circled--solid.svg"></fl-svg>
</span>
<div class="Homepage-list-body">
<h4 class="Homepage-list-title">
Easy & Secure
</h4>
<p class="Homepage-list-desc">
Pay for work safely and securely. Only release payment when you are 100% satisfied with the work provided!
</p>
</div>
</li>
</ul>
<div class="Homepage-testimonial Testimonial">
<p class="Testimonial-content">
"Freelancer helps entrepreneurs focus on the vision and strategy of the company by giving easy access to great qualified talent."
</p>
<div class="Testimonial-author">
<span class="Testimonial-author-pic">
<img src="/images/homepage/sample.png" alt="Alex Guastella's profile picture">
</span>
<div class="Testimonial-author-body">
<span class="Testimonial-author-name">
Alex Guastella
</span>
<span class="Testimonial-author-desc">
Healthcare Advocate
</span>
</div>
</div>
</div>
<div class="Homepage-section-action">
<a href="/post-project" class="btn btn-large btn-tertiary btn-no-border" fl-analytics="GoToPPP" fl-analytics-label="GetFreeQuotes">I want to hire</a>
</div>
</section>
<mobile-footer></mobile-footer>
</main>