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/4-css-grid/grid.html b/4-css-grid/grid.html new file mode 100644 index 0000000..f3efb6b --- /dev/null +++ b/4-css-grid/grid.html @@ -0,0 +1,29 @@ + + + + + + + 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..911230e --- /dev/null +++ b/4-css-grid/styles.css @@ -0,0 +1,22 @@ +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; +} +.blockA { + grid-column: 1/3; +} +.blockB { + grid-column-start: 3; + grid-row: 1/3; +}