From b56e23ca7a81f4b94de546414f49671c588096f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 10 Jan 2022 21:32:44 +0300 Subject: [PATCH] fix alignment, placement and responsive --- .../components/landing/landing.component.html | 106 +++++++++--------- .../components/landing/landing.component.ts | 39 ++++++- 2 files changed, 91 insertions(+), 54 deletions(-) diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html index 30b73d5..521baf1 100644 --- a/src/app/components/landing/landing.component.html +++ b/src/app/components/landing/landing.component.html @@ -1,4 +1,4 @@ -
+
Sakai LogoSAKAI @@ -37,29 +37,29 @@
-
+

Eu sem integereget magna fermentum

-

Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...

+

Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...

- +
-

Marvelous Features

+

Marvelous Features

Placerat in egestas erat...
-
+
-
Easy to Use
- Posuere morbi leo urna molestie. +
Easy to Use
+ Posuere morbi leo urna molestie.
@@ -67,11 +67,11 @@
-
+
-
Fresh Design
- Semper risus in hendrerit. +
Fresh Design
+ Semper risus in hendrerit.
@@ -82,8 +82,8 @@
-
Well Documented
- Non arcu risus quis varius quam quisque. +
Well Documented
+ Non arcu risus quis varius quam quisque.
@@ -91,11 +91,11 @@
-
+
-
Responsive Layout
- Nulla malesuada pellentesque elit. +
Responsive Layout
+ Nulla malesuada pellentesque elit.
@@ -103,11 +103,11 @@
-
+
-
Clean Code
- Condimentum lacinia quis vel eros. +
Clean Code
+ Condimentum lacinia quis vel eros.
@@ -115,11 +115,11 @@
-
+
-
Dark Mode
- Convallis tellus id interdum velit laoreet. +
Dark Mode
+ Convallis tellus id interdum velit laoreet.
@@ -127,11 +127,11 @@
-
+
-
Ready to Use
- Mauris sit amet massa vitae. +
Ready to Use
+ Mauris sit amet massa vitae.
@@ -139,11 +139,11 @@
-
+
-
Modern Practices
- Elementum nibh tellus molestie nunc non. +
Modern Practices
+ Elementum nibh tellus molestie nunc non.
@@ -151,20 +151,20 @@
-
+
-
Privacy
- Neque egestas congue quisque. +
Privacy
+ Neque egestas congue quisque.
-
-

Joséphine Miller

+
+

Joséphine Miller

Peak Interactive -

“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

+

“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

@@ -174,31 +174,31 @@
-

Powerful Everywhere

+

Powerful Everywhere

Amet consectetur adipiscing elit...
-
-
+
+
mockup mobile
-
-
- +
+
+
-

Congue Quisque Egestas

- Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet. +

Congue Quisque Egestas

+ Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.
-
-
-
- +
+
+
+
-

Congue Quisque Egestas

- Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet. +

Celerisque Eu Ultrices

+ Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.
@@ -207,9 +207,9 @@
-
-
-

Matchless Pricing

+
+
+

Matchless Pricing

Amet consectetur adipiscing elit...
@@ -278,11 +278,11 @@
-
+

Free

- $0 + $999 per month
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts index 778185d..e32cd6e 100644 --- a/src/app/components/landing/landing.component.ts +++ b/src/app/components/landing/landing.component.ts @@ -9,13 +9,50 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; overflow:hidden; } - @media (min-width: 768px) { + @media screen and (min-width: 768px) { #hero{ -webkit-clip-path: ellipse(150% 87% at 93% 13%); clip-path: ellipse(150% 87% at 93% 13%); height: 430px; } } + + @media screen and (max-width: 1300px){ + #hero > img { + transform: scale(0.85); + top:10%; + } + } + + @media screen and (min-width: 1260px){ + #hero > img { + position: absolute; + } + + #hero > div > p { + max-width: 450px; + } + } + + @media screen and (max-width: 1260px){ + #hero { + height: 600px; + } + + #hero > img { + position:static; + transform: scale(1); + margin-left: auto; + } + + #hero > div { + width: 100%; + } + + #hero > div > p { + width: 100%; + } + } `] }) export class LandingComponent implements OnInit {