Animation test homework

css/style.css

@@ -206,76 +206,88 @@ h2.logoInner
 	}
 }
 
-#designers:after 
+.design-wrapper
 {
-	content: " ";
-	clear: both;
-	display: table;
+	height: 80vh;
+	left: 50%;
+	top: 50%;
+	overflow: auto;
+	position: absolute;
+	transform: translate(-55%, -57%);
+	width: calc(100vw - 8rem);
 }
 
 div.designers
 {
 	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
 	bottom: 0;
-	transform: translateY(12%);
+
+	display: flex;
+	justify-content: space-between;
+	column-gap: 2%;
+	flex-wrap: nowrap;
 }
 
-.designers-all.designers-jess
+@media (min-aspect-ratio: 2/1) 
 {
-	margin-right: 8%;
-	margin-top: 0;
-	width: 42%;
+	.design-wrapper
+	{
+		transform: translate(-55%, -45%);
+		height: 90vh;
+	}
 }
 
-img.designers
-{
-	width: 100%;
+.designers-all
+{	
+	align-self: flex-end;
 }
 
-h2.designers
+img.designers
 {
-	position: absolute;
-	left: 69%;
-	top: 14%;
-	transform: rotate(0.75turn);
-	transform-origin: bottom;
+	width: 30vw;	
 }
 
-@media (max-height: 899px), (orientation: portrait) 
+@media (max-height: 800px) 
 {
-	h2.designers
+	img.designers
 	{
-		position: absolute;
-		left: 69%;
-		top: 10%;
-		transform: rotate(0.75turn);
-		transform-origin: bottom;
+		width: 25vw;	
 	}
 }
 
-.designers-all
+img.jess,
+img.louisse,
+img.kameron,
+img.luk,
+img.darth,
+img.bill
 {
-	float: left;
-	margin-top: 6.5%;
-	width: 24%;
+	padding-left: 20%;
+	transition: all 0.5s;
 }
 
-img.louisse
+img.jess:hover,
+img.louisse:hover,
+img.kameron:hover,
+img.luk:hover,
+img.darth:hover,
+img.bill:hover
 {
-	width: 90%;
+	padding-left: 0%;
 }
 
-img.kameron
+figcaption.designers
 {
-	width: 88.8%;
+	padding-left: 20%;
 }
 
-figcaption.jess
+h2.designers
 {
-	margin-left: 30%;
+	position: absolute;
+	right: 2rem;
+	top: 50%;
+	transform: rotate(90deg);
+	transform-origin: bottom right;
 }
 
 .abs-50-50

index.html

@@ -48,31 +48,57 @@ <h3 class="bioh3">Katya<br>Mills</h3>
 				<!-- информационный блок -->
 				<section id="designers">
 					<h2 class="designers">Designers</h2>
-					<div class="designers">
-						<figure class="designers-all designers-jess roboto-light-1rem">
-							<img class="designers" src="pic/jess.png" alt="Jess Wonder Photo">
-							<figcaption class="jess">
-								<h3>JESS WONDER</h3>
-								<p><span class="roboto-bold-1rem">From/</span> Be more flower<br>
-								<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p> 
-							</figcaption>
-						</figure>
-						<figure class="designers-all roboto-light-1rem">
-							<img class="louisse" src="pic/louisse.png" alt="Louisse Red Photo">
-							<figcaption>
-								<h3>LOUISSE RED</h3>
-								<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
-								<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p> 
-							</figcaption>
-						</figure>
-						<figure class="designers-all roboto-light-1rem">
-							<img class="kameron" src="pic/cameron.png" alt="Kameron Clein Photo">
-							<figcaption>
-								<h3>KAMERON CLEIN</h3> 
-								<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
-								<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p>
-							</figcaption> 
-						</figure>
+					<div class="design-wrapper">
+						<div class="designers">
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers jess" src="pic/jess.png" alt="Jess Wonder Photo">
+								<figcaption class="designers">
+									<h3>JESS WONDER</h3>
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br>
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p> 
+								</figcaption>
+							</figure>
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers louisse" src="pic/louisse.png" alt="Louisse Red Photo">
+								<figcaption class="designers">
+									<h3>LOUISSE RED</h3>
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p> 
+								</figcaption>
+							</figure>
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers kameron" src="pic/cameron.png" alt="Kameron Clein Photo">
+								<figcaption class="designers">
+									<h3>KAMERON CLEIN</h3> 
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p>
+								</figcaption> 
+							</figure>
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers luk" src="pic/katy-small.png" alt="Luk Skywalker Photo">
+								<figcaption class="designers">
+									<h3>LUK SKYWALKER</h3> 
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p>
+								</figcaption> 
+							</figure>
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers darth" src="pic/darth.jpg" alt="Darth Vader Photo">
+								<figcaption class="designers">
+									<h3>DARTH VADER</h3> 
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p>
+								</figcaption> 
+							</figure>
+							<figure class="designers-all roboto-light-1rem">
+								<img class="designers bill" src="pic/bill.jpg" alt="Bill Gates Photo">
+								<figcaption class="designers">
+									<h3>BILL GATES</h3> 
+									<p><span class="roboto-bold-1rem">From/</span> Be more flower<br> 
+									<span class="roboto-bold-1rem">Skills/</span> Design Strategy / Marketing</p>
+								</figcaption> 
+							</figure>
+						</div>
 					</div>
 				</section>
 				<!-- информационный блок -->