diff --git a/week-4/layout1/inbox-solid.svg b/week-4/layout1/inbox-solid.svg new file mode 100644 index 0000000..88a6908 --- /dev/null +++ b/week-4/layout1/inbox-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week-4/layout1/main.css b/week-4/layout1/main.css new file mode 100644 index 0000000..5ad26ad --- /dev/null +++ b/week-4/layout1/main.css @@ -0,0 +1,45 @@ +nav { + background-color: #999; +} +nav a { + color: white; + text-decoration: none; + display: block; + padding: 1em; +} +nav a:hover { + background-color: rgb(128, 128, 128); + border-radius: 10px; +} +ul { + margin:0; +} +body { + margin:0; +} +#inbox-div { + display: flex; + align-items: center; +} +img { + display: none; +} + +@media(min-width: 750px) { + img { + display: block; + margin-right: 5px; + } + nav { + display:flex; + justify-content: space-between; + align-items: center; + padding-left: 10px; + } + ul { + display: flex; + padding: 0px; + list-style: none; + gap: 1em; + } +} \ No newline at end of file diff --git a/week-4/layout1/nav.html b/week-4/layout1/nav.html new file mode 100644 index 0000000..be3969e --- /dev/null +++ b/week-4/layout1/nav.html @@ -0,0 +1,30 @@ + + + + + + + Layout 1 + + + + + + + + \ No newline at end of file diff --git a/week-4/layout2/background.jpg b/week-4/layout2/background.jpg new file mode 100644 index 0000000..eef194d Binary files /dev/null and b/week-4/layout2/background.jpg differ diff --git a/week-4/layout2/fullscreen.html b/week-4/layout2/fullscreen.html new file mode 100644 index 0000000..6a20044 --- /dev/null +++ b/week-4/layout2/fullscreen.html @@ -0,0 +1,20 @@ + + + + + + + Layout 2 + + + + +
+ smiley face icon +

Welcome to the app!

+

Thanks for signing up. Let's take a look around.

+ +
+ + + \ No newline at end of file diff --git a/week-4/layout2/smile-regular.svg b/week-4/layout2/smile-regular.svg new file mode 100644 index 0000000..4ca93c8 --- /dev/null +++ b/week-4/layout2/smile-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/week-4/layout2/style.css b/week-4/layout2/style.css new file mode 100644 index 0000000..07e1e9e --- /dev/null +++ b/week-4/layout2/style.css @@ -0,0 +1,24 @@ +body { + display: flex; + justify-content: center; + min-height: 100vh; + align-items: center; + background-image: url('background.jpg'); + background-position: center; + background-size: cover; + text-align: center; +} +div { + display: flex; + flex-direction: column; + align-items: center; + border-style: solid; + padding: 10px; + color: white; +} +h1 { + margin-bottom: 0; +} +h1, p { + opacity: .7; +} \ No newline at end of file diff --git a/week-4/layout3/index.html b/week-4/layout3/index.html new file mode 100644 index 0000000..0d27cc3 --- /dev/null +++ b/week-4/layout3/index.html @@ -0,0 +1,33 @@ + + + + + + + Layout 3 + + + + +
+
+

Bristol

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime obcaecati repellendus necessitatibus at beatae ad porro asperiores sed ipsam? Facilis quo explicabo veritatis sit dolores ut maxime libero voluptatum.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit aliquam reprehenderit veniam, deleniti modi repellat impedit sapiente cum voluptatum perferendis ipsam nam maiores iste numquam unde nemo veritatis! Sit, ducimus.

+
+ +
+

Harbour Cranes

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!

+
+ +
+

Striped Balloon

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam quam, adipisci rem natus minus dolorum, at numquam similique atque facere laborum iure ea officiis molestias, fuga blanditiis dolor maxime. Ipsa!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime obcaecati repellendus necessitatibus at beatae ad porro asperiores sed ipsam? Facilis quo explicabo veritatis sit dolores ut maxime libero voluptatum.

+
+
+ + + \ No newline at end of file diff --git a/week-4/layout3/style.css b/week-4/layout3/style.css new file mode 100644 index 0000000..ddc5d03 --- /dev/null +++ b/week-4/layout3/style.css @@ -0,0 +1,27 @@ +@media(min-width: 650px) { + section { + display: flex; + gap: 20px; + } +} + +body { + margin: 1em; +} +article h3 { + background-color: rgb(62, 161, 87); + color: white; + padding: 1em; + padding-left: 10px; + margin: 0; +} +article p { + padding: 10px; + margin-top: 0; + margin-bottom: 0; +} +article { + border: 1px solid rgb(83, 83, 83); + box-shadow: 3px 3px 4px 2px #e3e3e3; + margin-bottom: 20px; +} \ No newline at end of file