Unosquare Website Components

This is the components used in the unosquare website, here you can find a preview and the code of the component. This is useful to have a snippet of the code if there is need it in other section or project.

We are using Bootstrap 4.0.0 with his dependencies.

Articles

A component to use when there is an article to present on the page. It has his title and author with a summary of the article and a button to redirect to the full article.

What gaming tech tells us about every products ux

isv insights

Gamification, the application of using game thinking and game-design elements in a non-entertainment context in order to improve an outcome, is being utilized more than ever. When users feel as though they are active participants, it encourages more engagement and personal investment in the outcome.

Read More
<div class="articles">
    <div class="row" itemscope itemtype="http://schema.org/Article">
        <div class="col-lg-4">
            <h3 class="title" itemprop="headline">What gaming tech tells us about every products ux</h3>
            <div>
                <span itemprop="publisher">isv insights</span>
                <span itemprop="datePublished" content="2017-10-16">Octuber 16, 2017</span>
            </div>
            <h5 class="author" itemprop="author">By Giancarlo Di Vece</h5>
        </div>
        <div class="col-lg-8">
            <p itemprop="description">Gamification, the application of using game thinking and game-design elements in a non-entertainment
                context in order to improve an outcome, is being utilized more than ever. When users feel as though
                they are active participants, it encourages more engagement and personal investment in the outcome.
            </p>
            <a href="#" class="link-blue">Read More</a>
        </div>
    </div>
</div>
                

The breadcrumb component uses more the classes of bootstrap 4 than the local file but is styled with the component.css to adapt it the styles of the page.

You need to add the class active to tell the user the section that is watching.

<nav aria-label="breadcrumb" role="navigation">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item" aria-current="page">
            <a href="#">Section</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <a href="#">Subsection</a>
        </li>
    </ol>
</nav>
                

Calls to Action

Call to Action

This is a link most of the times takes the 50% of the width. It has two color blue and gray adding the class link-blue or link-gray to the "a" tag.

<div class="calltoaction">
    <a href="#" class="link-blue">Let’s Talk!</a>
</div>
                

Call to Action - Small

The small call to action link

<div class="calltoaction calltoaction-sm">
    <a href="" class="link-blue">small</a>
</div>
                

Call to Action Banner

This is the call to action with a banner

<div class="call-to-action-banner row">
    <div class="col-3 col-lg-1 icon">
        <img src="/assets/icons/medal_icon.png" alt="">
    </div>
    <div class="banner col-9 col-lg-9"> 
        <h2>Need top-tier talent?</h2>
        <p>We provide top-tier talent in variety of practice areas to streamline the execution of your projects</p>
    </div>
    <div class="link col-12 col-lg-2">
        <a href="#callToActinBanner" class="link-blue">Contact us</a>
    </div>
</div>
                

Link

It's a link to use in the page. There is two color to use blue and gray.

<a class="link-blue" href="#">Let’s Talk!</a>
<a class="link-gray" href="#">Let’s Talk!</a>
                 

Cards

Card With Decorations

This is simple cards that have a decoration in the icons. The title content and button text can be changed, it is recommended that the content of this cards is little.

Distributed Agile Augmentation

Title

Body

<div class="card decorations decoration-background-blue">
    <div class="card-body">
        <div class="card-title">
            <img src="assets/icons/DistributedAgileAugmentation.svg" alt="Distributed Agile Augmentation" />
            <h3>Title</h3>
        </div>
        <p>Body</p>
    </div>
    <div class="calltoaction">
        <a href="#" class="link-blue">learn more</a>
    </div>
</div>
                

Cards With Icon

This is the simple card, it has an icon to the left of the title a body and a footer. In some cases, a style to the footer link may be required to adapt the content of the page.

Distributed Agile Augmentation

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus tempora recusandae, suscipit iusto obcaecati, soluta excepturi officia ratione, delectus illo ipsum aliquid deleniti! Suscipit doloribus consequatur officia, nostrum tempore possimus?

<div class="card">
    <div class="card-body">
        <div class="card-title">
            <img src="assets/icons/DistributedAgileAugmentation.svg" alt="Distributed Agile Augmentation" />
            <h3>Title</h3>
        </div>
        <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus tempora recusandae, suscipit iusto
            obcaecati, soluta excepturi officia ratione, delectus illo ipsum aliquid deleniti! Suscipit doloribus
            consequatur officia, nostrum tempore possimus?
        </p>
    </div>
    <div class="calltoaction">
        <a href="" class="link-blue">learn more</a>
    </div>
</div>
                

Events Cards

These cards are made to give the user the next events that are coming.

Calendar

Upcoming Events

November
5
Money 20/20
Madrid, Spain
Auditorium Conference Center
November
12
Atlanta Hit
Atlanta, USA
Georgia Tech Global Learning Center
December
3
Singapore Conf
Singapore City, Singapore
Conference Center

Are you attending?

Let’s meet!
<div class="card decorations decoration-background-blue events">
    <div class="card-body">
        <div class="card-title">
            <h2>Calendar</h2>
        </div>
        <h4>Upcoming Events</h4>
        <div class="events-list">
            <div class="event" itemscope itemtype="http://schema.org/Event">
                <div class="event-date" itemprop="startDate" content="2018-11-5T00:00"><h5>November</h5><span>5</span></div>
                <div class="event-title" itemprop="name" content="Money 20/20">Money 20/20</div>
                <div class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
                    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                        <span itemprop="addressLocality">Madrid</span>,
                        <span itemprop="addressRegion">Spain</span>
                    </div>
                    <span itemprop="name">Auditorium Conference Center</span>
                </div>
            </div>
            <div class="event" itemscope itemtype="http://schema.org/Event">
                <div class="event-date" itemprop="startDate" content="2018-11-5T00:00"><h5>November</h5><span>12</span></div>
                <div class="event-title" itemprop="name" content="Atlanta Hit">Atlanta Hit</div>
                <div class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
                    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                        <span itemprop="addressLocality">Atlanta</span>,
                        <span itemprop="addressRegion">USA</span>
                    </div>
                    <span itemprop="name">Georgia Tech Global Learning Center</span>
                </div>
            </div>
            <div class="event" itemscope itemtype="http://schema.org/Event">
                <div class="event-date" itemprop="startDate" content="2018-11-5T00:00"><h5>December</h5><span>3</span></div>
                <div class="event-title" itemprop="name" content="Singapore Conf">Singapore Conf</div>
                <div class="event-location" itemprop="location" itemscope itemtype="http://schema.org/Place">
                    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                        <span itemprop="addressLocality">Singapore City</span>,
                        <span itemprop="addressRegion">Singapore</span>
                    </div>
                    <span itemprop="name">Conference Center</span>
                </div>
            </div>
        </div>
    </div>
    <div class="calltoaction">
        <h4>Are you attending?</h4>
        <a href="" class="link-blue">Let’s meet!</a>
    </div>
</div>
                

Card with image

This is a simple card. It contains an image, a title, a subtitle and an info section

Title

Many communication pitfalls can derail an otherwise productive conversation with a geographically distributed, Agile team. In my experience, an accusatory tone, even though unintentional, can ...

read more
<div class="image-card row">
    <div class="offset-1 col-10 offset-lg-0 col-lg-4 mb-4 mb-lg-0">
        <div class="card h-100">
            <img src="/assets/images/collage-hero-image-1.png" class="card-img-top">
            <div class="card-body">
                <div class="card-head">
                    <h4 class="text-uppercase">Title</h4>
                    <p class="author-date">
                        Subtitle
                    </p>
                </div>
                <p class="card-text">  
                    Many communication pitfalls can derail an otherwise productive conversation with a geographically distributed, 
                    Agile team. In my experience, an accusatory tone, even though unintentional, can ... 
                </p>
                <a href="#">read more</a>
            </div>
        </div>
    </div>
</div>
                

A bootstrap carousel styled with our needs.

<section id="carouselExampleControls" class="carousel slide" data-ride="false">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <div class="col-12 col-md-6 align-self-center">
                    <img src="/assets/images/hero-example.jpg" style="width:50%;" alt="Image">
                </div>
                <div class="col-12 col-md-6 align-self-center  order-first">
                    <h3>Slide 1</h3>
                    <p>Description</p>
                    <div class="calltoaction">
                        <a href="" class="link-blue">Button</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-12 col-md-6 align-self-center">
                    <img src="/assets/images/hero-example.jpg" style="width:50%;" alt="Image">
                </div>
                <div class="col-12 col-md-6 align-self-center  order-first">
                    <h3>Slide 2</h3>
                    <p>Description</p>
                    <div class="calltoaction">
                        <a href="" class="link-blue">Button</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="col-12 col-md-6 align-self-center">
                    <img src="/assets/images/hero-example.jpg" style="width:50%;" alt="Image">
                </div>
                <div class="col-12 col-md-6 align-self-center  order-first">
                    <h3>Slide 3</h3>
                    <p>Description</p>
                    <div class="calltoaction">
                        <a href="" class="link-blue">Button</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</section>
                

Divider

Its a simple divider of components.


<hr>
                

Facts

Facts Four Columns

This are the grid, its a grid that contains little information (facts) and the grid would adapt when the window gets resized.

43

ACTIVE PARTNERS

6+

Timezones Covered

400+

Full Time Engineering Staff

2000+

Delivered Projects

98%

Client Retention

3

Countries of Operation

5%

Staff Attrition

100+

Distributed Teams
<div class="facts-four-columns">
    <div class="row">
        <div class="col-6 col-lg-3">
            <h4>43</h4>
            <h5>ACTIVE PARTNERS</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>6+</h4>
            <h5>Timezones Covered</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>400+</h4>
            <h5>Full Time Engineering Staff</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>2000+</h4>
            <h5>Delivered Projects</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-6 col-lg-3">
            <h4>98%</h4>
            <h5>Client Retention</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>3</h4>
            <h5>Countries of Operation</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>5%</h4>
            <h5>Staff Attrition</h5>
        </div>
        <div class="col-6 col-lg-3">
            <h4>100+</h4>
            <h5>Distributed Teams</h5>
        </div>
    </div>
</div>
                

Facts Three Columns

This is also a grid with facts, but this grid has decorations on it, and just like the other grid, it adapt when the window gets resized.

Transparency

Personal access to every resource with granular reporting of activities.

Quality

Industry focus, cultural alignment, and top tier technologies.

Availability

Proactively hired resources that make your selection process 40% to 100% faster.

Flexibility

Meet your changing demand with ease.

Cost

20% to 50% reduction in resource spending.

Talent

Scale in your same time zone or across time zones to best accommodate your process.

<div class="row facts-three-columns">
    <div class="col-md-6 col-xl-4">
        <h3>Transparency</h3>
        <p>Personal access to every resource with granular reporting of activities.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h3>Quality</h3>
        <p>Industry focus, cultural alignment, and top tier technologies.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h3>Availability</h3>
        <p>Proactively hired resources that make your selection process 40% to 100% faster.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h3>Flexibility</h3>
        <p>Meet your changing demand with ease.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h3>Cost</h3>
        <p>20% to 50% reduction in resource spending.</p>
    </div>
    <div class="col-md-6 col-xl-4">
        <h3>Talent</h3>
        <p>Scale in your same time zone or across time zones to best accommodate your process.</p>
    </div>
</div>
                

Address Fact

The address fact is a variation of the Subsection Fact, this fact has four columns at the maximum size.

Us Headquarters

Portland, OR USA

4800 Meadows

Suite 300

Lake Oswego OR, 97035

+1 (503) 534-3787

Sales Offices

Boston, MA USA

1 Broadway

14th floor

Cambridge, MA, 02140

+1 (857) 400-8211

Sales offices

San Diego, CA USA

941 Orange Ave, 108

Coronado, CA, 92118

+1 (619) 889-4816

Sales offices

Atlanta, GA USA

201 17th Street, Suite 3081

Atlanta, GA 30363

+1 (503) 534-3787

Latam Headquarters

Av. Américas 1536 1A

Col. Country Club

C.P. 44637

Guadalajara, JAL, México

US: +1 (617) 849-8685

MX: +52 (333) 839-1855

Development Center

Guadalajara, México

Av. Jacarandas Pte. 659 Piso 3

Col. Jacarandas

C.P. 45160

Zapopan, JAL, México

Development Center

Guadalajara, México

Av. Unión 601, Piso 6

Col. Moderna

C.P. 44190

Guadalajara, JAL, México

Development Center

León, México

Blvd. Juan Alonso de Torres 1920 Planta Alta

Col. Del Moral, C.P. 37125

León, GTO, México

+52 (47) 7690-3256

Uk Office

Belfast, NI

7 Donegall Square West

Scottish Provident Building

BT1 6JH

Belfast, NI, UK

<div class="container address-fact">
    <div class="row">
        <div class="col-sm-6 col-xl-3">
            <h4>Us Headquarters</h4>
            <p>Portland, OR USA</p>
            <p>4800 Meadows</p>
            <p>Suite 300</p>
            <p>Lake Oswego OR, 97035</p>
            <p>+1 (503) 534-3787</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Sales Offices</h4>
            <p>Boston, MA USA</p>
            <p>1 Broadway</p>
            <p>14th floor</p>
            <p>Cambridge, MA, 02140</p>
            <p>+1 (857) 400-8211</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Sales offices</h4>
            <p>San Diego, CA USA</p>
            <p>941 Orange Ave, 108</p>
            <p>Coronado, CA, 92118</p>
            <p>+1 (619) 889-4816</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Sales offices</h4>
            <p>Atlanta, GA USA</p>
            <p>201 17th Street, Suite 3081</p>
            <p>Atlanta, GA 30363</p>
            <p>+1 (503) 534-3787</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Latam Headquarters</h4>
            <p>Av. Américas 1536 1A</p>
            <p>Col. Country Club</p>
            <p>C.P. 44637</p>
            <p>Guadalajara, JAL, México</p>
            <p>US: +1 (617) 849-8685</p>
            <p>MX: +52 (333) 839-1855</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Development Center</h4>
            <p>Guadalajara, México</p>
            <p>Av. Jacarandas Pte. 659 Piso 3</p>
            <p>Col. Jacarandas</p>
            <p>C.P. 45160</p>
            <p>Zapopan, JAL, México</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Development Center</h4>
            <p>Guadalajara, México</p>
            <p>Av. Unión 601, Piso 6</p>
            <p>Col. Moderna</p>
            <p>C.P. 44190</p>
            <p>Guadalajara, JAL, México</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Development Center</h4>
            <p>León, México</p>
            <p>Blvd. Juan Alonso de Torres 1920 Planta Alta</p>
            <p>Col. Del Moral, C.P. 37125</p>
            <p>León, GTO, México</p>
            <p>+52 (47) 7690-3256</p>
        </div>
        <div class="col-sm-6 col-xl-3">
            <h4>Uk Office</h4>
            <p>Belfast, NI</p>
            <p>7 Donegall Square West</p>
            <p>Scottish Provident Building</p>
            <p>BT1 6JH</p>
            <p>Belfast, NI, UK</p>
        </div>
    </div>
</div>
                

Form

A very simple form to contact to get more information.

Help text
Help text
Help text
Help text

File format: .PDF, .DOCX less than 1mb
Help text

<form>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name">
                <small class="form-text text-muted">Help text</small>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email">
                <small class="form-text text-muted">Help text</small>
            </div>
            <div class="form-group">
                <label for="companyName">Company Name</label>
                <input type="text" class="form-control" id="companyName">
                <small class="form-text text-muted">Help text</small>
            </div>
            <div class="form-group">
                <label for="phoneNumber">Phone Number</label>
                <input type="text" class="form-control" id="phoneNumber">
                <small class="form-text text-muted">Help text</small>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Attach CV</label>
                <br>
                <input type="file" class="form-control file" id="attachCV" name="attachCV" accept=".pdf,application/pdf,.doc,application/msword,.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                <label for="attachCV" class="attachment">
                    <span class="file-name float-left"></span>
                    <span class="browse link-blue float-left">Browse</span>
                </label>
                <small id="fileHelp" class="form-text text-muted text-file">File format: .PDF, .DOCX less than 1mb</small>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea class="form-control no-resize" id="message" rows="8"></textarea>
                <small class="form-text text-muted">Help text</small>
            </div>
        </div>
        <div class="form-group col-12">
            <label for="contactTimeMorning">Preferred contact time</label>
            <br>
            <button type="button" class="btn btn-pill" style="max-width: 200px;" data-toggle="button" aria-pressed="false" autocomplete="off">Morning</button>
            <button type="button" class="btn btn-pill" style="max-width: 200px;" data-toggle="button" aria-pressed="false" autocomplete="off">Afternoon</button>
        </div>
        <button type="submit" class="btn button-blue">Send</button>                    
    </div>
</form>
                 

This is the footer.

<footer>
<div class="footer-columns-container">
    <div class="aboutus-column">
        <h6 class="title-footer-aboutus">ABOUT US</h6>
        <div>
            <p class="content-footer-aboutus">
                Unosquare, at its core, has a mission driven by three guiding purposes for every individual that
                is part of the organization: personal, professional and social.
            </p>
        </div>
        <a class="content-footer-aboutus" href="#">
            Privacy
            Policy
        </a>
    </div>
    <div class="quicklinks-column">
        <h6 class="title-footer-quicklinks">QUICK LINKS</h6>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">Services</a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">Practice Areas</a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">Industries</a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">Our DNA</a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">
                Articles &
                Events
            </a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">About Us</a>
        </div>
        <div style="margin-top: 10px">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-quicklinks" href="#">Careers</a>
        </div>
    </div>

    <div class="services-industries-column">
        <h6 class="title-footer-services">SERVICES</h6>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-services" href="#">
                Distributed
                Agile Augmentation
            </a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-services" href="#">
                Technology
                Project Consulting
            </a>
        </div>
        <div style="margin-top: 10px">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-services" href="#">
                Digital
                Transformation
            </a>
        </div>
        <h6 class="title-footer-industries">INDUSTRIES</h6>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-industries" href="#">BFSI</a>
        </div>
        <div class="quicklinks-container">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-industries" href="#">
                Life
                Sciences
            </a>
        </div>
        <div style="margin-top: 10px">
            <div class="white-box-quicklinks"></div>
            <a class="content-footer-industries" href="#">High Tech</a>
        </div>
    </div>

    <div class="contactus-column">
        <h6 class="title-footer-aboutus align">CONTACT US</h6>
        <div>
            <p class="content-footer-contactus">
                Reach out to us! Let's discuss current technology trends, building a team of high performing software engineers, or apply for your dream job!
            </p>
        </div>
        <div class="calltoaction">
            <a class="nav-link link-blue blue-button" href="#">Contact us</a>
        </div>
    </div>
</div>

<div class="social-footer-icons ">
    <div class=" flex-container">
        <a href="https://www.facebook.com/unosquare/" target="_blank">
            <svg class="svg" viewBox="0 0 40 40">
                <g id="facebook" class="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                    <g id="Facebook" stroke="#FFFFFF">
                        <g id="Group-17" transform="translate(8.000000, 8.000000)">
                            <path d="M23.5,0 L1.5,0 C0.671,0 0,0.671 0,1.5 L0,23.5 C0,24.329 0.671,25 1.5,25 L13,25 L13,17 L10,17 L10,13 L13,13 L13,10 C13,7.239 15.239,5 18,5 L21,5 L21,9 L19,9 C17.896,9 17,9.896 17,11 L17,13 L21,13 L20.5,17 L17,17 L17,25 L23.5,25 C24.329,25 25,24.329 25,23.5 L25,1.5 C25,0.671 24.329,0 23.5,0 Z" id="Stroke-2050"></path>
                        </g>
                    </g>
                </g>
            </svg>
        </a>
        <a href="https://twitter.com/unosquare" target="_blank">
            <svg class="svg" viewBox="0 0 40 40">
                <g id="twitter" class="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                    <g id="Twitter" stroke="#FFFFFF">
                        <g id="Group-16" transform="translate(5.000000, 9.000000)">
                            <path d="M1.891,1.21 C4.319,4.169 8.666,6.962 14.5,7.263 C14.178,5.978 14.147,2.489 16.691,1.04 C17.829,0.391 18.906,0 20.174,0 C21.768,0 23.077,0.524 24.469,1.801 C25.601,1.643 27.718,0.77 28.22,0.426 C27.893,1.63 26.585,3.175 25.64,3.542 C26.508,3.54 28.415,3.042 29,2.748 C28.189,4 26.773,5.198 25.998,5.695 C26.895,13.406 19.737,22.99 9.456,23 C6.52,23.003 3.33,22.404 0,20.579 C3.285,20.948 6.805,19.926 8.826,18.158 C6.277,18.103 3.696,16.453 2.521,13.921 C3.799,14.303 4.976,14.496 5.674,13.921 C4.484,13.793 0.63,11.766 0.63,7.841 C1.516,8.545 2.791,9.272 3.783,9.079 C2.161,8.156 -0.197,4.645 1.891,1.21 Z" id="Stroke-2052"></path>
                        </g>
                    </g>
                </g>
            </svg>
        </a>
        <a href="https://www.linkedin.com/company/293703/" target="_blank">
            <svg class="svg" viewBox="0 0 40 40">
                <g id="linkedin-white" class="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                    <g id="LinkedIn" stroke="#FFFFFF">
                        <g id="Group-15" transform="translate(7.000000, 8.000000)">
                            <path d="M8,6 C8,7.104 7.104,8 6,8 C4.896,8 4,7.104 4,6 C4,4.896 4.896,4 6,4 C7.104,4 8,4.896 8,6 Z" id="Stroke-2173"></path>
                            <polygon id="Stroke-2175" points="4 22 8 22 8 10 4 10"></polygon>
                            <path d="M23.5,0 L1.5,0 C0.671,0 0,0.671 0,1.5 L0,23.5 C0,24.329 0.671,25 1.5,25 L23.5,25 C24.329,25 25,24.329 25,23.5 L25,1.5 C25,0.671 24.329,0 23.5,0 Z" id="Stroke-2177"></path>
                            <path d="M17.5,10 C16.078,10 14.825,10.673 14,11.704 L14,10 L10,10 L10,22 L13,22 L14,22 L14,15 C14,13.896 14.896,13 16,13 C17.104,13 18,13.896 18,15 L18,22 L22,22 L22,14.5 C22,12.015 19.985,10 17.5,10 Z" id="Stroke-2178"></path>
                        </g>
                    </g>
                </g>
            </svg>
        </a>
    </div>
    <div class=" flex-container">
        <small class="copyright-sign">Copyright © Unosquare, LLC</small>
    </div>
</div>
</footer>
                 

Heros

Collage Hero

It's a hero with multiple images on it.

Careers Image
Careers Image
Careers Image
Careers Image

Be part of our team

We’re looking for the best talent, check our open positions and apply!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat arcu eu vehicula lacinia. Suspendisse varius accumsan tortor id imperdiet. Sed vitae elementum leo. Proin feugiat blandit elementum. Mauris non felis augue. Pellentesque nec sapien aliquet, porttitor dolor sed, feugiat mauris. Integer id consectetur tortor, vitae vestibulum urna. Nam placerat porta lorem, sed ullamcorper ipsum mollis eget.

<div class="collage-hero">
    <div class="row">
        <div class="col-4">
            <img src="/assets/images/collage-hero-image-1.png" alt="Careers Image">
        </div>
        <div class="col-4">
            <img src="/assets/images/collage-hero-image-2.png" alt="Careers Image">
        </div>
        <div class="col-4">
            <img src="/assets/images/collage-hero-image-3.png" alt="Careers Image">
        </div>
        <div class="col-4 d-none d-md-block">
            <img src="/assets/images/collage-hero-image-4.png" alt="Careers Image">
        </div>
        <div class="col-12 col-md-8">
            <div class="collage-hero-body">
                <h3>Be part of our team</h3>
                <h5>We’re looking for the best talent, check our open positions and apply!</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat arcu eu vehicula lacinia. Suspendisse
                    varius accumsan tortor id imperdiet. Sed vitae elementum leo. Proin feugiat blandit elementum.
                    Mauris non felis augue. Pellentesque nec sapien aliquet, porttitor dolor sed, feugiat mauris.
                    Integer id consectetur tortor, vitae vestibulum urna. Nam placerat porta lorem, sed ullamcorper
                    ipsum mollis eget.</p>
            </div>
        </div>
    </div>
</div>
                

Main Hero

Style for a main hero that is use on store project. You can use title-gray, title-blue or title-black to make the title background change.

Unosquare Store

Smart engineering for the digital economy!

<div class="main-hero hero-image-example">
    <div class="hero-title title-black">
        <h2>Unosquare Store</h2>
        <h3>Smart engineering for the digital economy!</h3>
    </div>
</div>
                

Section Hero

The main section has a gap in the cover column, and the body column has a title, subtitle and content establish. Also, you can now choose between color, blue and gray, just add the class square-blue for blue or square-gray.

This component can be used in different sections, just change the corresponding tags to the correct information. To add a cover you need to add in the CSS a class that identifies with the hero and set the URL in the background property where the image is located.

Title

Subtitle


Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus sint maiores error consequatur non quis exercitationem, placeat illo? Accusamus consectetur nihil velit enim atque quibusdam adipisci natus quae aut mollitia.

<div class="hero-sections main-section hero-image-example">
    <div class="hero-sections-body blue-background">
        <h2>Title</h2>
        <h3>Subtitle</h3>
        <hr class="hero-line">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus sint maiores error consequatur non quis exercitationem,
            placeat illo? Accusamus consectetur nihil velit enim atque quibusdam adipisci natus quae aut mollitia.</p>
    </div>
</div>
                

Subsection Hero

This is the subsection, is the same as the section, the only thing that change is the extra-square class, now is removed.

Title

Subtitle


Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus sint maiores error consequatur non quis exercitationem, placeat illo? Accusamus consectetur nihil velit enim atque quibusdam adipisci natus quae aut mollitia.

<div class="hero-sections hero-image-example">
    <div class="hero-sections-body white-background">
        <h2>Title</h2>
        <h3>Subtitle</h3>
        <hr class="hero-line">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus sint maiores error consequatur non quis exercitationem,
            placeat illo? Accusamus consectetur nihil velit enim atque quibusdam adipisci natus quae aut mollitia.</p>
    </div>
</div>
                

New Main Hero

Style for a main hero that is use on store project.

Digital transformation solutions

Through distributed agile teams
Learn more
<div class="main-hero hero-homepage">
    <div class="hero-title title-black">
        <h2>Digital transformation solutions</h2>
        <div id="hero-label">Through distributed agile teams</div>
        <a class="link-gray" href="@Url.Action("Index", "PracticeAreas")"> Learn more </a>
    </div>
</div>

.hero-homepage {
    background: url(/assets/images/hero-example.jpg) no-repeat center center;
}

                

The navbar has the logo to the left and the menu to the right is using the classes and components of Bootstrap 4 and style with the local file. It has a class active to determine in what section the user is navigating to and a button to redirect to a form for contact information.

In mobile the navbar change to a collapsible menu that toggles with the button.

<header class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light menu">
        <a class="navbar-brand" href="#">
            <img src="assets/unosquare_logo.svg" alt="Unosquare">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end align-self-start" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Solutions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Industries</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Our DNA</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Articles
                        <br>& Events</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link-blue" href="#">Contact us</a>
                </li>
            </ul>
        </div>
    </nav>
</header>
                

Platforms

It is a grid with several images of the technologies and platforms.

AI Artificial Intelligence
Cloud Cloud
InternetofThings Internet of things
Automation Automation
BimodalIT Bimodal IT
DevOps DevOps
<div class="row platforms">
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/AI.svg" alt="AI">
        <span>Artificial Intelligence</span>
    </div>
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/Cloud.svg" alt="Cloud">
        <span>Cloud</span>
    </div>
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/InternetofThings.svg" alt="InternetofThings">
        <span>Internet of things</span>
    </div>
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/Automation.svg" alt="Automation">
        <span>Automation</span>
    </div>
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/BimodalIT.svg" alt="BimodalIT">
        <span>Bimodal IT</span>
    </div>
    <div class="col-md-6 col-xl-4">
        <img src="/assets/icons/DevOps.svg" alt="DevOps">
        <span>DevOps</span>
    </div>
</div>
                

Quote

The quote is used in several views, just using the p tag to the content and h4 with the strong and em tags for the author.

“We cannot afford to risk our business with the world’s most demanding customers, that is why we partner with Unosquare”

Tracy Metzger, Coo - Vesta
<blockquote class="blockquote">
    <p class="mb-0">“We cannot afford to risk our business with the world’s most demanding customers, that is why we partner with Unosquare”</p>
    <footer class="blockquote-footer">Tracy Metzger, <cite title="Source Title">Coo - Vesta</cite></footer>
</blockquote>
                

Showcase

Showcase defined for the specific topics with a map where the offices of unosquare are.

title
subtitle, or small description

info
info
info


<div class="case row">
    <div class="col-12 col-lg-4">
            <h5>title</h5>
            <strong class="desc">subtitle, or small description</strong>
            <div>
                <p>
                    info<br>
                    info<br>
                    info
                </p>
            </div>
        </div>
        <div class="logos col-12 col-lg-8 row">
            <div class="col-4 col-md-3 logo">
                <img src="/assets/images/vesta.png" alt="Vesta">
            </div>
            <div class="col-4 col-md-3 logo">
                <img src="/assets/images/bofi.png" alt="Bofi Federal Bank">
            </div>
            <div class="d-block d-md-none w-100 m-0"></div>
            <div class="col-4 col-md-3 logo">
                <img src="/assets/images/answer_financial.png" alt="Answer Financial">
            </div>
            <div class="col-4 col-md-3 logo">
                <img src="/assets/images/seed.png" alt="Seed">
            </div>
        </div>
        <div class="col-12"><a href="#" class="link-blue">Learn more</a></div>
        <hr>
</div>
                

Strategy

Strategy Mission

The component with cards added to describe three specific mission, Personal, Professional and Social.

Mission

Unosquare, at its core, has a mission driven by three specific

Personal

Fundamentally, the company was created understanding that, at out core, we are no more than a group of people pushing our personal boundaries to do the best work we have ever done. A good working environment is key to that creativity, collaboration, and ultimately, success.

Professional

We strive to create an environment where not only our entire staff personally enjoys the cultural foundation and the personal relationships they have created throughout their tenure. We also, want to see projects that challenge our technical capabilities, that help change the world, and that prove that provide that complexity level that pushes professional growth of the individual and the group.

Social

Unosquare is here to create a legacy. We have a commitment to generating well being in every geography we have a presence. Our organization has been blessed with the opportunity to substantially impact the ethos in which we continue to develop the company. We believe in a global effort towards equality of opportunity.

<div class="decorations decoration-background-blue strategy">
    <h3>Mission</h3>
    <p>Unosquare, at its core, has a mission driven by three specific</p>
    <div class="row strategy-mission">
        <div class="col-lg-4">
            <div>
                <h3>Personal</h3>
                <p>Fundamentally, the company was created understanding that, at out core, we are no more than a
                    group of people pushing our personal boundaries to do the best work we have ever done. A
                    good working environment is key to that creativity, collaboration, and ultimately, success.
                </p>
            </div>
        </div>
        <div class="col-lg-4">
            <div>
                <h3>Professional</h3>
                <p>We strive to create an environment where not only our entire staff personally enjoys the cultural
                    foundation and the personal relationships they have created throughout their tenure. We also,
                    want to see projects that challenge our technical capabilities, that help change the world,
                    and that prove that provide that complexity level that pushes professional growth of the
                    individual and the group.
                </p>
            </div>
        </div>
        <div class="col-lg-4">
            <div>
                <h3>Social</h3>
                <p>Unosquare is here to create a legacy. We have a commitment to generating well being in every
                    geography we have a presence. Our organization has been blessed with the opportunity to substantially
                    impact the ethos in which we continue to develop the company. We believe in a global effort
                    towards equality of opportunity.
                </p>
            </div>
        </div>
    </div>
</div>