responsive on our team
This commit is contained in:
parent
63ce62f326
commit
9e8fb32160
@ -16,6 +16,7 @@ background: white;
|
|||||||
.columns {
|
.columns {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-title {
|
.sub-title {
|
||||||
font-family: 'GT Walsheim Pro';
|
font-family: 'GT Walsheim Pro';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -25,10 +26,12 @@ background: white;
|
|||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
color: #020225;
|
color: #020225;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
+ .sub-title {
|
+ .sub-title {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -36,4 +39,29 @@ background: white;
|
|||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
img{
|
||||||
|
max-width: 80vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1500px) {
|
||||||
|
#full_creative {
|
||||||
|
padding-bottom: 20rem;
|
||||||
|
.title{
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.column{
|
||||||
|
padding: 2rem;
|
||||||
|
p{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column, .columns {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
margin-bottom: 15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,8 +40,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1023px) {
|
@media screen and (max-width: 1500px) {
|
||||||
#our_team{
|
#our_team{
|
||||||
|
margin-top: 20rem;
|
||||||
|
padding-bottom: 20rem;
|
||||||
img{
|
img{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -49,6 +51,12 @@
|
|||||||
.columns, .colmumn{
|
.columns, .colmumn{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.sub-category{
|
||||||
|
margin-bottom: 10rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,8 +7,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">
|
||||||
<!-- responsive managed until here -->
|
|
||||||
|
|
||||||
<section id="china">
|
<section id="china">
|
||||||
<h2 class="title primary-color">
|
<h2 class="title primary-color">
|
||||||
Our China-inspired ui in 4 pillars
|
Our China-inspired ui in 4 pillars
|
||||||
@ -153,6 +151,152 @@
|
|||||||
Project
|
Project
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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.
|
||||||
|
</h2>
|
||||||
|
<div class="sub-category dark-color">
|
||||||
|
<p class="sub-title">
|
||||||
|
of experts and directors.
|
||||||
|
</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle 6.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle%206-1.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/people%202.png"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<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">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle 6-4.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle%206-5.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle 6-6.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<img
|
||||||
|
src="img/Rectangle%206-7.jpg"
|
||||||
|
alt="people"
|
||||||
|
>
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- responsive managed until here -->
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -97,144 +97,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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.
|
|
||||||
</h2>
|
|
||||||
<div class="sub-category dark-color">
|
|
||||||
<p class="sub-title">
|
|
||||||
of experts and directors.
|
|
||||||
</p>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle 6.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle%206-1.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/people%202.png"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<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">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle 6-4.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle%206-5.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle 6-6.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<img
|
|
||||||
src="img/Rectangle%206-7.jpg"
|
|
||||||
alt="people"
|
|
||||||
>
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="china_achievements">
|
<section id="china_achievements">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user