modified: index.html

modified: styles/style.css
IlliaHorbenko · Nov 7, 2023 · e962b31 · e962b31
1 parent 2559086
commit e962b31
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -178,7 +178,7 @@ <h2 class="home__subtitle subtitle">
 					/>
 				</div>
 			</div>
-		</section> -->
+		</section>
 
 		<section class="section-two">
 			<div class="content">
@@ -394,14 +394,19 @@ <h4 class="parameters__sqft">1,109 sqft</h4>
 					</div>
 				</div>
 			</div>
-		</section>
-		<!-- <section class="section-three">
+		</section> -->
+		<section class="section-three">
+			<div class="position-bubble">
+				<img class="position-bubble__image" src="images/Ellipse.png" />
+			</div>
 			<div class="content">
-				<div class="position-bubble">
-					<img class="position-bubble__image" src="images/Ellipse.png" />
-				</div>
 				<div class="house-properties">
-					<img class="house-properties__image" src="images/redhouse.jpg" />
+					<div class="house-properties-picture">
+						<img
+							class="house-properties-picture__image"
+							src="images/redhouse.jpg"
+						/>
+					</div>
 					<div class="house-properties__content">
 						<h2 class="house-properties__title">
 							See some benefit from our properties
@@ -538,7 +543,7 @@ <h3 class="properties__subtitle">
 				</div>
 			</div>
 		</section>
-		<section class="section-four">
+		<!-- <section class="section-four">
 			<div class="content">
 				<div class="social">
 					<img

diff --git a/styles/style.css b/styles/style.css
@@ -517,12 +517,22 @@ ul {
 	align-items: center;
 }
 
+.house-properties-picture__image {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: cover;
+}
+
 .house-properties__properties {
 	display: flex;
 	align-items: center;
 	margin-bottom: 4rem;
 }
 
+.house-properties__properties:last-child {
+	margin-bottom: 0;
+}
+
 .house-properties__title {
 	font-size: 58px;
 	font-weight: 700;
@@ -937,6 +947,22 @@ ul {
 	padding: 1.5rem 0;
 }
 
+@media (max-width: 1880px) {
+	.position-bubble__image {
+		left: 0%;
+	}
+}
+
+@media (max-width: 1590px) {
+	.house-properties__content {
+		margin-left: 2rem;
+	}
+	.house-properties__title {
+		font-size: 3.125rem;
+		line-height: 3.75rem;
+	}
+}
+
 @media (max-width: 1280px) {
 	.header {
 		margin-bottom: 100px;
@@ -998,7 +1024,33 @@ ul {
 	}
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1200px) {
+	.house-properties-picture {
+		display: none;
+	}
+
+	.house-properties__content,
+	.house-properties__properties {
+		margin: 0 auto 3rem;
+	}
+
+	.house-properties__title {
+		margin: 0 auto 5rem;
+		text-align: center;
+	}
+
+	.properties__icon {
+		width: 10rem;
+		height: 10rem;
+	}
+
+	.properties__title {
+		font-size: 3rem;
+	}
+
+	.properties__subtitle {
+		font-size: 2rem;
+	}
 }
 
 @media (max-width: 1020px) {
@@ -1079,6 +1131,24 @@ ul {
 	.title {
 		font-size: 2.5rem;
 	}
+
+	.position-bubble__image {
+		width: 10rem;
+		top: -12rem;
+	}
+
+	.properties__icon {
+		width: 7rem;
+		height: 7rem;
+	}
+
+	.properties__title {
+		font-size: 2.5rem;
+	}
+
+	.properties__subtitle {
+		font-size: 1.5rem;
+	}
 }
 
 @media (max-width: 780px) {
@@ -1312,6 +1382,61 @@ ul {
 	.swiper-pagination {
 		display: block;
 	}
+
+	.house-properties__title {
+		font-size: 2.5rem;
+		line-height: 2.75rem;
+	}
+
+	.properties__title {
+		font-size: 2rem;
+	}
+
+	.properties__subtitle {
+		font-size: 1.3rem;
+	}
+
+	.properties__icon {
+		width: 5rem;
+		height: 5rem;
+	}
+}
+
+@media (max-width: 420px) {
+	.position-bubble__image {
+		width: 7rem;
+		top: -10rem;
+	}
+
+	.house-properties__title {
+		font-size: 2rem;
+		line-height: 1.75rem;
+	}
+
+	.properties__title {
+		font-size: 1.5rem;
+	}
+
+	.properties__subtitle {
+		font-size: 1rem;
+	}
+}
+
+@media (max-width: 345px) {
+	.house-properties__title {
+		font-size: 1.5rem;
+		line-height: 1.5rem;
+		margin-bottom: 3rem;
+	}
+
+	.properties__title {
+		font-size: 1.3rem;
+		margin-bottom: 0.3rem;
+	}
+
+	.properties__subtitle {
+		font-size: 1rem;
+	}
 }
 
 @media (max-width: 400px) {