From 9e8fb321606f0e1a77e3f1d99b027ee38c3fcc8d Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 1 Jun 2023 12:10:06 +0200
Subject: [PATCH] responsive on our team

---
 .../src/assets/styles/_15-full-creative.scss  |  36 ++++-
 .../src/assets/styles/_16-our_team.scss       |  10 +-
 .../sesame/src/components/CoverSection.vue    | 148 +++++++++++++++++-
 .../sesame/src/components/DisabledSection.vue | 138 ----------------
 4 files changed, 187 insertions(+), 145 deletions(-)

diff --git a/sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss b/sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss
index dd0ec7a..4ef84e2 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss
@@ -1,5 +1,5 @@
-#full_creative{
-background: white;
+#full_creative {
+	background: white;
 	min-height: 120vh;
 
 	.title {
@@ -16,6 +16,7 @@ background: white;
 	.columns {
 		text-align: left;
 	}
+
 	.sub-title {
 		font-family: 'GT Walsheim Pro';
 		font-style: normal;
@@ -25,15 +26,42 @@ background: white;
 		letter-spacing: -0.04em;
 		color: #020225;
 		margin-bottom: 1rem;
-		+ .sub-title{
+
+		+ .sub-title {
 			margin-top: 2rem;
 		}
 	}
-	p{
+
+	p {
 		font-weight: 400;
 		font-size: 16px;
 		line-height: 110%;
 		margin-bottom: 4rem;
 		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;
+		}
+	}
+
 }
diff --git a/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss b/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
index e64e611..5787a40 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss
@@ -40,8 +40,10 @@
 	}
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1500px) {
 	#our_team{
+		margin-top: 20rem;
+		padding-bottom: 20rem;
 		img{
 			max-width: 100%;
 			margin: 0 auto;
@@ -49,6 +51,12 @@
 		.columns, .colmumn{
 			display: block;
 		}
+		.name{
+			font-size: 1.5rem;
+		}
+		.sub-category{
+			margin-bottom: 10rem;
+		}
 	}
 
 }
diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index 2306334..b5c7b14 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -7,8 +7,6 @@
   <main class="has-text-centered">
     <!--		sprint 4 content-->
     <div id="sprint_4">
-      <!--			responsive managed until here -->
-
       <section id="china">
         <h2 class="title primary-color">
           Our China-inspired ui in 4 pillars
@@ -153,6 +151,152 @@
           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.
+        </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>
   </main>
 </template>
diff --git a/sesame-vitejs/sesame/src/components/DisabledSection.vue b/sesame-vitejs/sesame/src/components/DisabledSection.vue
index 1e8090b..6295a0e 100644
--- a/sesame-vitejs/sesame/src/components/DisabledSection.vue
+++ b/sesame-vitejs/sesame/src/components/DisabledSection.vue
@@ -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">
 		<div class="columns">
 			<div class="column">