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
By Giancarlo Di Vece
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 class="link-blue">Read More</a>
</div>
</div>
</div>
Breadcrumb
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 >Home</a>
</li>
<li class="breadcrumb-item" aria-current="page">
<a >Section</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<a >Subsection</a>
</li>
</ol>
</nav>
Calendar
<div id="articles">
<div class="events-list mt-5 mt-lg-0">
<a href="">
<div class="event" itemscope itemtype="http://schema.org/Event">
<div class="event-date event-date d-flex flex-column justify-content-center align-items-start pl-4 mb-2"
itemprop="startDate" content="8/22/2018">
<h3 class="day m-0">22</h3><h4 class="text-uppercase m-0 month">Aug</h4><h5 class="m-0 year">2018</h5>
</div>
<div class="event-title" itemprop="name" content="Unosquare & Logic20/20 present: AI & Wine">
<h5 class="headline">Unosquare & Logic20/20 present: AI & Wine</h5>
</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" class="sub-headline">Location: Seattle,</span>
<span itemprop="addressRegion" class="sub-headline">WA</span>
</div>
</div>
<p class="description">Join us for an exclusive event featuring some of the brightest minds in the
software industry, while drinking some delicious wine from a local Seattle winery.</p>
</div>
</a>
</div>
</div>
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 class="link-blue">Let’s Talk!</a>
</div>
Call to Action - Small
The small call to action link
<div class="calltoaction calltoaction-sm">
<a 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" >Let’s Talk!</a>
<a class="link-gray" >Let’s Talk!</a>
Cards
Card Info
This is a simple card to show info.
Distributed Agile Augmentation
We are global, you are global too.
<div class="cardinfo col-12 col-lg-4">
<div class="card card-body decoration-background-blue service-box">
<div class="info">
<img src="assets/images/Flexibility.png" alt="Distributed Agile Augmentation">
<p class="d-block">
<strong>Distributed Agile Augmentation</strong><br>
We are global, you are global too.
<span></span>
</p>
</div>
<div class="calltoaction">
<a href="#cardInfo" class="link-blue">learn more</a>
</div>
</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.
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 class="link-blue">learn more</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 >read more</a>
</div>
</div>
</div>
</div>
Carousel
A bootstrap carousel styled with our needs. Adding "<script src="//cdn.unosquare.com/js/carousel-swipe.js"> </script>" this carousel can be swiped.
<div id="carousel-example" class="container content-home carousel h-100">
<div class="image-card row d-flex justify-content-center" data-ride="carousel" data-interval="5000">
<div>
<div class="carousel-item active">
<img src="assets/images/answer-financial-image.png" class="card-img-top example-img">
</div>
<div class="carousel-item">
<img src="assets/images/foundation-medicine-image.png" class="card-img-top example-img">
</div>
<div class="carousel-item">
<img src="assets/images/the_medicines_company-image.png" class="card-img-top example-img">
</div>
</div>
<div class="w-100">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Divider
Its a simple divider of components.
<hr>
Facts
Facts Four Columns
This is 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 Four Columns Blue
This is a diferent version of the Facts Four Columns component
43
Active
Clients
6+
Timezones
Covered
500+
Full Time
Engineering Staff
2000+
Delivered
Projects
98%
Client
Retention
3
Countries of
Operation
5%
Staff
Attrition
100+
Distributed
Teams
<div class="offset-0 col-12 offset-lg-2 col-lg-8">
<div class="facts-four-columns-blue fact-home my-0">
<div class="container-fluid row">
<div class="col-7 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>43</h4>
<h5>Active<br> Clients</h5>
</div>
<div class="col-5 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>6+</h4>
<h5>Timezones<br> Covered</h5>
</div>
<div class="col-7 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>500+</h4>
<h5>Full Time<br>Engineering Staff</h5>
</div>
<div class="col-5 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>2000+</h4>
<h5>Delivered<br> Projects</h5>
</div>
<div class="col-7 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>98%</h4>
<h5>Client<br> Retention</h5>
</div>
<div class="col-5 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>3</h4>
<h5>Countries of<br> Operation</h5>
</div>
<div class="col-7 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>5%</h4>
<h5>Staff<br> Attrition</h5>
</div>
<div class="col-5 col-lg-3 d-flex flex-column justify-content-end fact">
<h4>100+</h4>
<h5>Distributed<br> Teams</h5>
</div>
</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.
<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>
Footer
This is the footer.
<footer class="main-footer">
<div class="footer-content container">
<div class="p-3 row">
<div class="col-12 col-lg-3">
<h6 class="footer-title">ABOUT US</h6>
<div>
<p class="footer-text">
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="footer-text" >
Privacy
Policy
</a>
</div>
<div class="col-12 col-lg-3 mt-4 mt-lg-0">
<h6 class="footer-title">QUICK LINKS</h6>
<div class="link-container">
<div class="white-box"></div>
<a >Services</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >Practice Areas</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >Industries</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >Our DNA</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >
Articles &
Events
</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >About Us</a>
</div>
<div class="link-container last-link">
<div class="white-box"></div>
<a >Careers</a>
</div>
</div>
<div class="col-12 col-lg-3 mt-4 mt-lg-0">
<h6 class="footer-title">SERVICES</h6>
<div class="link-container">
<div class="white-box"></div>
<a >
Distributed
Agile Augmentation
</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >
Technology
Project Consulting
</a>
</div>
<div class="link-container last-link">
<div class="white-box"></div>
<a >
Digital
Transformation
</a>
</div>
<h6 class="footer-title mt-4">INDUSTRIES</h6>
<div class="link-container">
<div class="white-box"></div>
<a >BFSI</a>
</div>
<div class="link-container">
<div class="white-box"></div>
<a >
Life
Sciences
</a>
</div>
<div class="link-container last-link">
<div class="white-box"></div>
<a >High Tech</a>
</div>
</div>
<div class="col-12 col-lg-3 mt-4 mt-lg-0">
<h6 class="footer-title">CONTACT US</h6>
<div>
<p class="footer-text">
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" >Contact us</a>
</div>
</div>
</div>
</div>
<div class="container-fluid my-3">
<div class="mt-5 d-flex justify-content-center social-footer-icons" style="color:white">
<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>
</div>
</footer>
Heros
Collage Hero
It's a hero with multiple images on it.
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. Adding the class 'title-white' you can get the white version of the Main Hero
<div class="main-hero">
<img src="assets/images/hero-example.jpg">
<div class="hero-title">
<h2>Digital transformation solutions</h2>
<div id="hero-label">Through distributed agile teams</div>
<a class="link-gray" > Learn more </a>
</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>
Navbar
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" >
<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" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" >Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link" >Industries</a>
</li>
<li class="nav-item">
<a class="nav-link" >Our DNA</a>
</li>
<li class="nav-item">
<a class="nav-link" >Articles
<br>& Events</a>
</li>
<li class="nav-item">
<a class="nav-link" >About</a>
</li>
<li class="nav-item">
<a class="nav-link link-blue" >Contact us</a>
</li>
</ul>
</div>
</nav>
</header>
Platforms
It is a grid with several images of the technologies and platforms.
Artificial Intelligence
Cloud
Internet of things
Automation
Bimodal IT
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.
I can’t sing Unosquare’s praises highly enough. They’re a pleasure to work with, and they’re great partners.
Kevin Newman, Senior Director of Technology, HBR
<div class="blockquote row p-3">
<div class="col-3 col-lg-1 pl-0">
<img src="assets/images/Testimonial.png" alt="" />
</div>
<div class="col-9 col-lg-11 mt-4">
<p>I can’t sing Unosquare’s praises highly enough. They’re a pleasure to work with, and they’re great partners.</p>
<span class="text-uppercase font-weight-bold"> Kevin Newman, Senior Director of Technology, HBR</span>
</div>
</div>
Showcase
Showcase defined for the specific topics with a map where the offices of unosquare are.
<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 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>