diff --git a/exercise-1/styles.css b/exercise-1/styles.css index d40e73d..f96193a 100644 --- a/exercise-1/styles.css +++ b/exercise-1/styles.css @@ -63,3 +63,49 @@ body { margin-right: auto; max-width: 56em; } + + + +@media screen and (min-width: 600px){ + + + .grid__text { + grid-area: text; + padding-left: 150px; + + } + .wrapper { + margin-left: 10px; + margin-right: 10px; + } + +.box { + margin: var(--grid); + min-height: calc(4 * var(--grid)); + padding: var(--grid); + width: 80%; +} + + +.grid { + grid-template-areas: + "red text" + "black text"; +} + +} + +@media screen and (min-width: 900px){ + + .grid { + display: grid; + grid-template-areas: + "black text red"; + + } + .box { + margin-top: var(--grid); + min-height: calc(4 * var(--grid)); + } + + } \ No newline at end of file diff --git a/exercise-2/index.html b/exercise-2/index.html index cd39571..37ad7d1 100644 --- a/exercise-2/index.html +++ b/exercise-2/index.html @@ -9,6 +9,51 @@ + +
+
+
+
+ thumbnail +

Card Title aligns left

SUBTITLE ALIGNS UNDERNEATH

+
+

There is a normal amount of text here, and there is even spacing around all sides.

+
+
+ + + +
+
+ thumbnail +

Two-line titles align vertically, I guess

+

SUBTITLE ALIGNS UNDERNEATH

+
star
SPECIAL
+
+

There is a text here

+
+
+ + +
+
thumbnail

Where's my subtitle?

+

There is a normal amount of text here, and there is even spacing around all sides. + + There is less text here. + + There is a little too much text here. This should have been caught or edited down by the copywriter but, hey, here we are, and this has to go live today. Gotta do our best! + + Neat! A line break!

+
+
+
+
+ + + + + + diff --git a/exercise-2/styles.css b/exercise-2/styles.css index db58392..8b11c20 100644 --- a/exercise-2/styles.css +++ b/exercise-2/styles.css @@ -2,8 +2,128 @@ body { margin: 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; } * { box-sizing: border-box; } + +.wrapper{ + display:grid; + background:#eee; + padding: 6em 3em 6em 3em; +} + + +.box{ + background-color: white; + padding: 15px 0px 5px 15px; + border-radius: 16px; + + +} + +.grid { + display:grid; + grid-template-columns:repeat(3, 1fr); + grid-auto-rows: 300px; + grid-gap:3em; + + +} + +.picture { + display:grid; + grid-template-areas: "picture heading" + ; +} + + +h4{ + opacity: 0.3; +} + + +h3{ + font-weight: bold; +} + +p { + display:grid; + grid-template-columns: 2fr 1fr; + width: 80%; + float: right; + +} + + + +.button-1 { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color:#eee; + color: gray; + display: inline; + position: relative; + top:100px; + left:190px; + +} + +.button-2 { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color: #4f50ff;; + color: white; + position: relative; + top:73px; + left:330px; +} + + + +#star{ + width: 12%; +} + +h6{ + color: rgb(235, 235, 62); +} + +.picture_2 { + display:grid; + grid-template-columns: 1fr 3fr 2fr; + +} + +.button-5 { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color:#eee; + color: gray; + display: inline; + position: relative; + top:170px; + left:230px; + +} + + +.button-6 { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color: #4f50ff; + color: white; + position: relative; + top:140px; + left:350px; +} + + + + diff --git a/exercise-2/thumbnail.png b/exercise-2/thumbnail.png new file mode 100644 index 0000000..4b34490 Binary files /dev/null and b/exercise-2/thumbnail.png differ diff --git a/exercise-3/index.html b/exercise-3/index.html index d7cab7b..3975d02 100644 --- a/exercise-3/index.html +++ b/exercise-3/index.html @@ -3,12 +3,40 @@ - + Exercise 3 +
+ +
+ + + + +
+ nicolascage smiling +
+
+ nicolascage close-eyes +
+
+ nicolascage in forest +
+
+ nicolascage in restaurant +
+
+ +
+ + + + +
+
diff --git a/exercise-3/nicolascage.jpeg b/exercise-3/nicolascage.jpeg new file mode 100644 index 0000000..36cbcf3 Binary files /dev/null and b/exercise-3/nicolascage.jpeg differ diff --git a/exercise-3/nicolascage2.jpeg b/exercise-3/nicolascage2.jpeg new file mode 100644 index 0000000..ab4fa68 Binary files /dev/null and b/exercise-3/nicolascage2.jpeg differ diff --git a/exercise-3/nicolascage3.jpeg b/exercise-3/nicolascage3.jpeg new file mode 100644 index 0000000..7dad50a Binary files /dev/null and b/exercise-3/nicolascage3.jpeg differ diff --git a/exercise-3/nicolascage4.jpeg b/exercise-3/nicolascage4.jpeg new file mode 100644 index 0000000..1f0468b Binary files /dev/null and b/exercise-3/nicolascage4.jpeg differ diff --git a/exercise-3/styles.css b/exercise-3/styles.css index f2f7776..942dac6 100644 --- a/exercise-3/styles.css +++ b/exercise-3/styles.css @@ -1,7 +1,68 @@ body { margin: 0; + padding: 0; + background: #444444; +} +.slidershow{ + width: 700px; + height: 400px; + overflow: hidden; +} +.middle{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} +.navigation{ + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; +} +.bar{ + width: 15px; + height: 15px; + border: 2px solid #fff; + margin: 6px; + cursor: pointer; + transition: 0.4s; + border-radius: 100%; +} +.bar:hover{ + background: #fff; +} + +input[name="r"]{ + position: absolute; + visibility: hidden; } -* { - box-sizing: border-box; +.slides{ + width: 500%; + height: 100%; + display: flex; +} + +.slide{ + width: 20%; + transition: 0.6s; +} +.slide img{ + width: 100%; + height: 100%; +} + +#r1:checked ~ .s1{ + margin-left: 0; +} +#r2:checked ~ .s1{ + margin-left: -20%; +} +#r3:checked ~ .s1{ + margin-left: -40%; +} +#r4:checked ~ .s1{ + margin-left: -60%; }