From b9e188f0753c330fe81c771f6d39357cc2c1f7bf Mon Sep 17 00:00:00 2001 From: DkSanjed Date: Sun, 17 May 2020 23:18:49 -0500 Subject: [PATCH 1/4] New exercise box model by raul valencia --- 3-box-model/box-model.html | 34 ++++++++++++++++++++++++++++++++++ 3-box-model/styles.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 3-box-model/box-model.html create mode 100644 3-box-model/styles.css diff --git a/3-box-model/box-model.html b/3-box-model/box-model.html new file mode 100644 index 0000000..d561df2 --- /dev/null +++ b/3-box-model/box-model.html @@ -0,0 +1,34 @@ + + + + + + + Document + + +
+

This is my first layout

+
+ +
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia odio ut, reprehenderit magnam placeat laborum incidunt alias quidem suscipit expedita ea. Quam porro soluta explicabo quibusdam earum illum pariatur distinctio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates saepe asperiores, sit rem alias placeat hic, omnis sequi cum illum doloribus ab dolor ex velit adipisci harum, inventore enim! Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, ipsam? Necessitatibus quisquam nulla ipsa magnam praesentium natus itaque sequi tempora doloribus. Amet, hic! Officiis laborum reiciendis illo ipsam eum. Perspiciatis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam doloremque tenetur nam mollitia, quos nisi libero, quas, distinctio debitis vitae ipsam expedita tempore. Rem fugit dolorem minus explicabo facilis facere?

+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus itaque, obcaecati voluptas ea cupiditate quaerat nulla dolore recusandae quasi voluptatibus ipsa. A necessitatibus ipsam omnis cumque maiores ullam totam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit reiciendis, voluptas eligendi similique ipsa id iste eaque asperiores! Id illo pariatur delectus ab saepe nostrum accusantium ullam nisi, quisquam vitae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, dolore laboriosam quia eaque alias labore tenetur vitae ex deserunt eos minus suscipit ab, nostrum recusandae, corporis esse nulla rerum quas? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero laudantium reprehenderit aut perferendis error unde illo ad nam odit quod tempora repellat ipsum quo distinctio pariatur, nesciunt ullam quidem tempore.

+
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores autem amet illum ratione, provident harum vero accusamus voluptatibus obcaecati architecto asperiores atque deleniti adipisci enim est incidunt unde in ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis cumque earum qui ipsam consequuntur atque, quidem soluta vel ab suscipit dignissimos rem nihil perspiciatis voluptas reiciendis tempora hic commodi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium harum id natus consectetur ipsam minus sapiente quibusdam excepturi veniam saepe debitis mollitia voluptatibus eum repudiandae quod nobis provident, dolorem modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia neque accusamus ad sapiente explicabo consequuntur ullam culpa amet? Doloremque eligendi quibusdam distinctio debitis. Quibusdam facere maiores consectetur mollitia libero placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quisquam quos corrupti id minus harum odio soluta, tempora fugiat non consectetur dignissimos! Fuga, dolorem. Consequuntur omnis modi quibusdam natus quae.

+
+ + + \ No newline at end of file diff --git a/3-box-model/styles.css b/3-box-model/styles.css new file mode 100644 index 0000000..41e62b5 --- /dev/null +++ b/3-box-model/styles.css @@ -0,0 +1,32 @@ +*{ + font-family: 'Times New Roman', Times, serif; + font-size: large; +} +footer { + background-color: black; + border: 2px solid orange; + bottom: 0px; + color: whitesmoke; + position: fixed; + width: 100%; +} +header { + background-color: black; + border: 2px solid green; + color: whitesmoke; + position: sticky; +} +nav { + border: 2px solid blue; + position: absolute; + box-sizing: border-box; + padding-right: 90.5px; + display: grid; +} +section { + border: 2px solid red; + margin-left: 200px; +} +section:nth-last-child(3) { + margin-bottom: 6%; +} \ No newline at end of file From 4b97d47735eaf3d96130616fe56a38e7b9b6ca29 Mon Sep 17 00:00:00 2001 From: DkSanjed Date: Mon, 18 May 2020 01:09:07 -0500 Subject: [PATCH 2/4] New exercise css grid by raul valencia --- 3-box-model/styles.css | 32 -------------------------------- 4-css-grid/grid.html | 27 +++++++++++++++++++++++++++ 4-css-grid/styles.css | 18 ++++++++++++++++++ 3 files changed, 45 insertions(+), 32 deletions(-) delete mode 100644 3-box-model/styles.css create mode 100644 4-css-grid/grid.html create mode 100644 4-css-grid/styles.css diff --git a/3-box-model/styles.css b/3-box-model/styles.css deleted file mode 100644 index 41e62b5..0000000 --- a/3-box-model/styles.css +++ /dev/null @@ -1,32 +0,0 @@ -*{ - font-family: 'Times New Roman', Times, serif; - font-size: large; -} -footer { - background-color: black; - border: 2px solid orange; - bottom: 0px; - color: whitesmoke; - position: fixed; - width: 100%; -} -header { - background-color: black; - border: 2px solid green; - color: whitesmoke; - position: sticky; -} -nav { - border: 2px solid blue; - position: absolute; - box-sizing: border-box; - padding-right: 90.5px; - display: grid; -} -section { - border: 2px solid red; - margin-left: 200px; -} -section:nth-last-child(3) { - margin-bottom: 6%; -} \ No newline at end of file diff --git a/4-css-grid/grid.html b/4-css-grid/grid.html new file mode 100644 index 0000000..4d31fb8 --- /dev/null +++ b/4-css-grid/grid.html @@ -0,0 +1,27 @@ + + + + + + + Grid + + +
+

A

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

B

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

C

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

D

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+ + \ No newline at end of file diff --git a/4-css-grid/styles.css b/4-css-grid/styles.css new file mode 100644 index 0000000..ac4adea --- /dev/null +++ b/4-css-grid/styles.css @@ -0,0 +1,18 @@ +* section { + background-color: rgb(66, 66, 66); + border-radius: 15px; + color: whitesmoke; + margin: 5px; + padding: 20px; +} +body { + display: grid; + grid-template: 50% 50% / 1fr 1fr 1fr; +} +section:first-child { + grid-column: 1/3; +} +section:nth-of-type(2) { + grid-column-start: 3; + grid-row: 1/3; +} From bcddb3928a17deaeff66ed1f46461ff761d47627 Mon Sep 17 00:00:00 2001 From: DkSanjed Date: Mon, 18 May 2020 21:19:12 -0500 Subject: [PATCH 3/4] =?UTF-8?q?My=20grid.html=20before=20isn=C2=B4t=20last?= =?UTF-8?q?=20html=20save,=20this=20it's=20correct?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 4-css-grid/grid.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/4-css-grid/grid.html b/4-css-grid/grid.html index 4d31fb8..7d7cdb3 100644 --- a/4-css-grid/grid.html +++ b/4-css-grid/grid.html @@ -7,19 +7,19 @@ Grid -
+

A

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
+

B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
+

C

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
+

D

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

From 3e387ebcdb7a64015aeb2689a1ccff6351aa5892 Mon Sep 17 00:00:00 2001 From: DkSanjed Date: Tue, 19 May 2020 22:31:34 -0500 Subject: [PATCH 4/4] New changes --- 4-css-grid/grid.html | 34 ++++++++++++++++++---------------- 4-css-grid/styles.css | 18 +++++++++++------- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/4-css-grid/grid.html b/4-css-grid/grid.html index 7d7cdb3..f3efb6b 100644 --- a/4-css-grid/grid.html +++ b/4-css-grid/grid.html @@ -7,21 +7,23 @@ Grid -
-

A

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
-
-

B

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
-
-

C

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
-
-

D

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

-
+
+
+

A

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

B

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

C

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
+

D

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ducimus cumque, atque deserunt, blanditiis mollitia dolor error corrupti harum accusamus omnis modi optio ex voluptas, at placeat quae debitis consequatur?

+
+
\ No newline at end of file diff --git a/4-css-grid/styles.css b/4-css-grid/styles.css index ac4adea..911230e 100644 --- a/4-css-grid/styles.css +++ b/4-css-grid/styles.css @@ -1,18 +1,22 @@ -* section { +body { + font-family: 'Times New Roman', Times, serif; + font-size: medium; +} +main { + display: grid; + grid-template: 50% 50% / 1fr 1fr 1fr; +} +section { background-color: rgb(66, 66, 66); border-radius: 15px; color: whitesmoke; margin: 5px; padding: 20px; } -body { - display: grid; - grid-template: 50% 50% / 1fr 1fr 1fr; -} -section:first-child { +.blockA { grid-column: 1/3; } -section:nth-of-type(2) { +.blockB { grid-column-start: 3; grid-row: 1/3; }