grid of team people
This commit is contained in:
parent
704d580305
commit
b98d564e74
@ -1,16 +1,18 @@
|
||||
#our_team {
|
||||
|
||||
background: white;
|
||||
padding-top: 5rem;
|
||||
padding-left: 2rem;
|
||||
background: white;
|
||||
text-align: left;
|
||||
min-height: 150vh;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
font-size: 270px;
|
||||
line-height: 80px;
|
||||
line-height: 9rem;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: left;
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
.sub-title{
|
||||
@ -19,13 +21,34 @@
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.04em;
|
||||
color: #020225;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
img{
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.description {
|
||||
.name{
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.sub-category {
|
||||
padding: 0 2em;
|
||||
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
#our_team{
|
||||
img{
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.columns, .colmumn{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,247 +4,6 @@
|
||||
<main class="has-text-centered">
|
||||
<!-- sprint 4 content-->
|
||||
<div id="sprint_4">
|
||||
<section
|
||||
id="transactionnal_webdesign"
|
||||
class="has-text-centerd"
|
||||
>
|
||||
<h2 class="title">
|
||||
Transactional
|
||||
</h2>
|
||||
<div class="description has-text-centered">
|
||||
Webdesign
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column first">
|
||||
<h3 class="sub-title">
|
||||
For all your
|
||||
<br>
|
||||
<span class="color-emphasis"> digital</span> uses.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="column second">
|
||||
Our creative competitive edge <br>
|
||||
<br>
|
||||
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||
We power transactional content with our technology. Our content is
|
||||
transactional and generate online sales. We produce multi-purpose
|
||||
content at scale for all touchpoints to reduce costs.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="carry">
|
||||
<h2 class="title color-emphasis">
|
||||
We carry out web design and development
|
||||
</h2>
|
||||
<p class="description">
|
||||
in headless
|
||||
<br>
|
||||
commerce.
|
||||
</p>
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block-item" />
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
<p>Web App (pwa) development</p>
|
||||
<p>Consulting</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kyc">
|
||||
<p class="description2 primary-color">
|
||||
We craft e-commerce Ux template based on qualitative and quantitative
|
||||
studies
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="column left-column">
|
||||
<h2 class="title primary-color text-content">
|
||||
We help you to know your customer needs
|
||||
</h2>
|
||||
<p class="description secondary-color text-content">
|
||||
With our method
|
||||
</p>
|
||||
<a
|
||||
href="#kyc"
|
||||
class="button text-content"
|
||||
> Show Sesame method </a>
|
||||
</div>
|
||||
<div class="column" />
|
||||
</div>
|
||||
<div class="bubbles secondary-color fat-text">
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to Prioritize development effort
|
||||
</span>
|
||||
</p>
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to improve customer satisfaction
|
||||
</span>
|
||||
</p>
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to increase conversion rate
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="china">
|
||||
<h2 class="title primary-color">
|
||||
Our China-inspired ui in 4 pillars
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
a quick and smooth consumer journey and never
|
||||
<br>
|
||||
ending shopping experience at the same time
|
||||
</p>
|
||||
<div class="line" />
|
||||
<div class="block-items columns">
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-1">
|
||||
<p>
|
||||
Content driven
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-2">
|
||||
- Rebound rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-3">
|
||||
<p>
|
||||
Experimental
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-4">
|
||||
- Return rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-5">
|
||||
<p>
|
||||
Interactive
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-6">
|
||||
+Conversion rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-7">
|
||||
<p>
|
||||
Agile
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-8">
|
||||
+ Retention rate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="we_develop">
|
||||
<h2 class="title secondary-color">
|
||||
We develop custom-made innovative e-commerce features based on your
|
||||
brand stakes.
|
||||
</h2>
|
||||
<div class="phone-container-2">
|
||||
<div class="top" />
|
||||
<div class="picture" />
|
||||
<div class="bottom" />
|
||||
</div>
|
||||
<div class="container-arrows">
|
||||
<div class="circle">
|
||||
<img
|
||||
class="rotated"
|
||||
src="img/arrow.svg"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="circle circle-right">
|
||||
<img
|
||||
|
||||
src="img/arrow.svg"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns light-text">
|
||||
<div class="column data">
|
||||
Data
|
||||
</div>
|
||||
<div class="column ar">
|
||||
AR
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick secondary-color">
|
||||
Quick wins
|
||||
</div>
|
||||
<div class="long_term secondary-color">
|
||||
Long-Term
|
||||
<br>
|
||||
Project
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="full_creative">
|
||||
<h2 class="title secondary-color">
|
||||
A full creative & production Studio in Paris
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="tiles columns dark-color">
|
||||
<div class="aside column">
|
||||
<h3 class="sub-title">
|
||||
Sesame Studio Spaces
|
||||
</h3>
|
||||
<p>
|
||||
2 Large Sets for Photos, Videos and Live Shopping Shooting
|
||||
Adaptable lighting racks
|
||||
Walls and decor for in-apartment style shooting
|
||||
LED Screen Background
|
||||
<br>
|
||||
1 Small Set for Stills Life Shooting
|
||||
<br>
|
||||
1 Space for 720° with turntable and 720° robot
|
||||
<br>Editing Room equipped for voice recording
|
||||
<br>Styling Room
|
||||
<br>Glam Room
|
||||
<br>Separated Storrage Room safe for brand’s products
|
||||
</p>
|
||||
<h3 class="sub-title">
|
||||
Full Service & Adaptative Team
|
||||
</h3>
|
||||
<p>
|
||||
Studio Manager, Lighting Technician.
|
||||
<br>Digital Creative Director, Motion Design, UX Designer, 3D Design.
|
||||
<br>Large network of freelances specialized in all categories, premium and luxury included.
|
||||
</p>
|
||||
</div>
|
||||
<div class="picture column">
|
||||
<img
|
||||
src="img/pictures_rooms.png"
|
||||
alt="rooms"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="our_team">
|
||||
<h2 class="title primary-color">
|
||||
Our team.
|
||||
@ -255,76 +14,85 @@
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="person column">
|
||||
<div class="picture" />
|
||||
<img
|
||||
src="img/Rectangle 6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture" />
|
||||
<img
|
||||
src="img/Rectangle%206-1.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture" />
|
||||
<img
|
||||
src="img/people%202.png"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture" />
|
||||
<img
|
||||
src="img/Rectangle 6-3.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sub-category">
|
||||
<h3 class="sub-title">
|
||||
and our senior team
|
||||
</h3>
|
||||
<div class="columns">
|
||||
<div class="person column">
|
||||
<div class="picture">
|
||||
<img
|
||||
src="img/people_1.jpg"
|
||||
src="img/Rectangle 6-4.jpg"
|
||||
alt="people"
|
||||
>
|
||||
</div>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture">
|
||||
<img
|
||||
src="img/people_1.jpg"
|
||||
src="img/Rectangle%206-5.jpg"
|
||||
alt="people"
|
||||
>
|
||||
</div>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture">
|
||||
<img
|
||||
src="img/people 2.png"
|
||||
src="img/Rectangle 6-6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
</div>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<div class="picture">
|
||||
<img
|
||||
src="img/people_1.jpg"
|
||||
src="img/Rectangle%206-7.jpg"
|
||||
alt="people"
|
||||
>
|
||||
</div>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
|
||||
@ -5,6 +5,247 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<section
|
||||
id="transactionnal_webdesign"
|
||||
class="has-text-centerd"
|
||||
>
|
||||
<h2 class="title">
|
||||
Transactional
|
||||
</h2>
|
||||
<div class="description has-text-centered">
|
||||
Webdesign
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column first">
|
||||
<h3 class="sub-title">
|
||||
For all your
|
||||
<br>
|
||||
<span class="color-emphasis"> digital</span> uses.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="column second">
|
||||
Our creative competitive edge <br>
|
||||
<br>
|
||||
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||
We power transactional content with our technology. Our content is
|
||||
transactional and generate online sales. We produce multi-purpose
|
||||
content at scale for all touchpoints to reduce costs.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="carry">
|
||||
<h2 class="title color-emphasis">
|
||||
We carry out web design and development
|
||||
</h2>
|
||||
<p class="description">
|
||||
in headless
|
||||
<br>
|
||||
commerce.
|
||||
</p>
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block-item" />
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
<p>Web App (pwa) development</p>
|
||||
<p>Consulting</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kyc">
|
||||
<p class="description2 primary-color">
|
||||
We craft e-commerce Ux template based on qualitative and quantitative
|
||||
studies
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="column left-column">
|
||||
<h2 class="title primary-color text-content">
|
||||
We help you to know your customer needs
|
||||
</h2>
|
||||
<p class="description secondary-color text-content">
|
||||
With our method
|
||||
</p>
|
||||
<a
|
||||
href="#kyc"
|
||||
class="button text-content"
|
||||
> Show Sesame method </a>
|
||||
</div>
|
||||
<div class="column" />
|
||||
</div>
|
||||
<div class="bubbles secondary-color fat-text">
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<div class="small-bubble" />
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to Prioritize development effort
|
||||
</span>
|
||||
</p>
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to improve customer satisfaction
|
||||
</span>
|
||||
</p>
|
||||
<p class="bubble">
|
||||
<span>
|
||||
|
||||
to increase conversion rate
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="china">
|
||||
<h2 class="title primary-color">
|
||||
Our China-inspired ui in 4 pillars
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
a quick and smooth consumer journey and never
|
||||
<br>
|
||||
ending shopping experience at the same time
|
||||
</p>
|
||||
<div class="line" />
|
||||
<div class="block-items columns">
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-1">
|
||||
<p>
|
||||
Content driven
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-2">
|
||||
- Rebound rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-3">
|
||||
<p>
|
||||
Experimental
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-4">
|
||||
- Return rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-5">
|
||||
<p>
|
||||
Interactive
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-6">
|
||||
+Conversion rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-7">
|
||||
<p>
|
||||
Agile
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-8">
|
||||
+ Retention rate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="we_develop">
|
||||
<h2 class="title secondary-color">
|
||||
We develop custom-made innovative e-commerce features based on your
|
||||
brand stakes.
|
||||
</h2>
|
||||
<div class="phone-container-2">
|
||||
<div class="top" />
|
||||
<div class="picture" />
|
||||
<div class="bottom" />
|
||||
</div>
|
||||
<div class="container-arrows">
|
||||
<div class="circle">
|
||||
<img
|
||||
class="rotated"
|
||||
src="img/arrow.svg"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="circle circle-right">
|
||||
<img
|
||||
|
||||
src="img/arrow.svg"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns light-text">
|
||||
<div class="column data">
|
||||
Data
|
||||
</div>
|
||||
<div class="column ar">
|
||||
AR
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick secondary-color">
|
||||
Quick wins
|
||||
</div>
|
||||
<div class="long_term secondary-color">
|
||||
Long-Term
|
||||
<br>
|
||||
Project
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="full_creative">
|
||||
<h2 class="title secondary-color">
|
||||
A full creative & production Studio in Paris
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="tiles columns dark-color">
|
||||
<div class="aside column">
|
||||
<h3 class="sub-title">
|
||||
Sesame Studio Spaces
|
||||
</h3>
|
||||
<p>
|
||||
2 Large Sets for Photos, Videos and Live Shopping Shooting
|
||||
Adaptable lighting racks
|
||||
Walls and decor for in-apartment style shooting
|
||||
LED Screen Background
|
||||
<br>
|
||||
1 Small Set for Stills Life Shooting
|
||||
<br>
|
||||
1 Space for 720° with turntable and 720° robot
|
||||
<br>Editing Room equipped for voice recording
|
||||
<br>Styling Room
|
||||
<br>Glam Room
|
||||
<br>Separated Storrage Room safe for brand’s products
|
||||
</p>
|
||||
<h3 class="sub-title">
|
||||
Full Service & Adaptative Team
|
||||
</h3>
|
||||
<p>
|
||||
Studio Manager, Lighting Technician.
|
||||
<br>Digital Creative Director, Motion Design, UX Designer, 3D Design.
|
||||
<br>Large network of freelances specialized in all categories, premium and luxury included.
|
||||
</p>
|
||||
</div>
|
||||
<div class="picture column">
|
||||
<img
|
||||
src="img/pictures_rooms.png"
|
||||
alt="rooms"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="china_achievements">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user