tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

responsive on our team

Browse Source
This commit is contained in:
Tykayn 2023-06-01 12:10:06 +02:00 committed by tykayn
parent 63ce62f326
commit 9e8fb32160
4 changed files with 187 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss
View File

@ -1,5 +1,5 @@
#full_creative{ #full_creative {
background: white; background: white;
min-height: 120vh; min-height: 120vh;
.title { .title {
@ -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,15 +26,42 @@ 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;
line-height: 110%; line-height: 110%;
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;
}
}
} }

10
sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
View File

@ -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;
}
} }
} }

148
sesame-vitejs/sesame/src/components/CoverSection.vue
View File

@ -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>

138
sesame-vitejs/sesame/src/components/DisabledSection.vue
View File

@ -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">