diff --git a/05-flex-modal/index.html b/05-flex-modal/index.html index 3b4a06f..7d825c6 100644 --- a/05-flex-modal/index.html +++ b/05-flex-modal/index.html @@ -9,12 +9,20 @@
-
!
-
Are you sure you want to do that?
- -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
- - +
+
!
+
+
+
+
Are you sure you want to do that?
+ +
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
+
+ + +
+
\ No newline at end of file diff --git a/05-flex-modal/style.css b/05-flex-modal/style.css index 780b355..f0b8f7e 100644 --- a/05-flex-modal/style.css +++ b/05-flex-modal/style.css @@ -20,6 +20,9 @@ body { width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); + display: flex; + padding: 14px; + gap: 12px; } .icon { @@ -35,6 +38,10 @@ body { justify-content: center; } +.subject { + display: flex; +} + .close-button { background: #eee; border-radius: 50%; @@ -48,6 +55,12 @@ body { justify-content: center; border: 1px solid #eee; padding: 0; + margin-left: auto; +} + +.buttons { + display: flex; + gap: 6px; } button { @@ -66,4 +79,14 @@ button.cancel { background: white; border: 1px solid #ddd; color: royalblue; +} + +.header { + font-size: 1.15rem; + font-weight: bold; +} + +.text { + font-size: 0.95rem; + padding: 8px 20px 16px 0; } \ No newline at end of file