grid of team people

This commit is contained in:
Tykayn 2023-05-31 16:16:39 +02:00 committed by tykayn
parent 704d580305
commit b98d564e74
3 changed files with 306 additions and 274 deletions

View File

@ -1,16 +1,18 @@
#our_team { #our_team {
background: white;
padding-top: 5rem; padding-top: 5rem;
padding-left: 2rem; padding-left: 2rem;
background: white;
text-align: left; text-align: left;
min-height: 150vh;
.title { .title {
font-weight: 600; font-weight: 500;
font-size: 270px; font-size: 270px;
line-height: 80px; line-height: 9rem;
letter-spacing: -0.06em; letter-spacing: -0.06em;
text-align: left; text-align: left;
margin-bottom: 4rem; margin-bottom: 6rem;
} }
.sub-title{ .sub-title{
@ -19,13 +21,34 @@
line-height: 110%; line-height: 110%;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #020225; color: #020225;
margin-top: 2rem;
margin-bottom: 2rem;
} }
img{ img{
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
max-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;
}
}
}

View File

@ -4,247 +4,6 @@
<main class="has-text-centered"> <main class="has-text-centered">
<!-- sprint 4 content--> <!-- sprint 4 content-->
<div id="sprint_4"> <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 brands 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"> <section id="our_team">
<h2 class="title primary-color"> <h2 class="title primary-color">
Our team. Our team.
@ -255,76 +14,85 @@
</p> </p>
<div class="columns"> <div class="columns">
<div class="person column"> <div class="person column">
<div class="picture" /> <img
src="img/Rectangle 6.jpg"
alt="people"
>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture" /> <img
src="img/Rectangle%206-1.jpg"
alt="people"
>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture" /> <img
src="img/people%202.png"
alt="people"
>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture" /> <img
src="img/Rectangle 6-3.jpg"
alt="people"
>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="sub-category"> <div class="sub-category">
<h3 class="sub-title"> <h3 class="sub-title">
and our senior team and our senior team
</h3> </h3>
<div class="columns"> <div class="columns">
<div class="person column"> <div class="person column">
<div class="picture"> <img
<img src="img/Rectangle 6-4.jpg"
src="img/people_1.jpg" alt="people"
alt="people" >
>
</div>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"> <img
<img src="img/Rectangle%206-5.jpg"
src="img/people_1.jpg" alt="people"
alt="people" >
>
</div>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"> <img
<img src="img/Rectangle 6-6.jpg"
src="img/people 2.png" alt="people"
alt="people" >
>
</div>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>
</div> </div>
<div class="person column"> <div class="person column">
<div class="picture"> <img
<img src="img/Rectangle%206-7.jpg"
src="img/people_1.jpg" alt="people"
alt="people" >
>
</div>
<p class="name"> <p class="name">
Name Surname Name Surname
</p> </p>

View File

@ -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 brands 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"> <section id="china_achievements">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">