diff --git a/exercise-1/styles.css b/exercise-1/styles.css index d40e73d..3ef8026 100644 --- a/exercise-1/styles.css +++ b/exercise-1/styles.css @@ -63,3 +63,57 @@ body { margin-right: auto; max-width: 56em; } + + + +/* i will add media queries only below for the devices with differnt screen + 600px, and 900px */ + +@media all and (max-width: 899px) and (min-width: 600px){ + + .grid__text { + grid-area: text; + padding-left: 150px; + } + + .wrapper { + margin: 10px; + } + +.box { + margin: var(--grid); + min-height: calc(4 * var(--grid)); + padding: var(--grid); + width: 80%; +} + + +.grid { + grid-template-areas: + "red text" + "black text"; /* for the column arrengments */ +} + +} + +@media screen and (min-width: 900px){ + + .grid { + display: grid; + grid-template-areas: + "black text red"; + + } + .box { + margin: var(--grid); + min-height: calc(4 * var(--grid)); + padding: var(--grid); + width: auto; + } + .grid__text { + grid-area: text; + padding-left: 30px; + } + + } + diff --git a/exercise-2/index.html b/exercise-2/index.html index cd39571..e5ffdb7 100644 --- a/exercise-2/index.html +++ b/exercise-2/index.html @@ -9,6 +9,21 @@ + +

Identity Card

+ +
+ avater +

Mr. Tom Cleverly

+
Blogger & Content Writter
+

Contact: +32-xxxxx

+
+
+ + + + + diff --git a/exercise-2/profileimage.jpg b/exercise-2/profileimage.jpg new file mode 100644 index 0000000..2ae2b1a Binary files /dev/null and b/exercise-2/profileimage.jpg differ diff --git a/exercise-2/styles.css b/exercise-2/styles.css index db58392..e773b9f 100644 --- a/exercise-2/styles.css +++ b/exercise-2/styles.css @@ -1,9 +1,57 @@ /* The only reset you’ll ever need */ -body { - margin: 0; + + body { + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + } + h1 { + text-align: center; + } + .card { + box-shadow: 0 8px 8px 10px rgba(87, 84, 84, 0.4); + max-width: 250px; + padding: 10px; + margin: auto; + text-align: center; + box-sizing: border-box; + } + + img { + width: 70%; + border: 1px solid black; + border-radius: 50%; + } + + .designation { + font-size: 18px; + } + + .button { + margin: 20px 0; + } + +.nope { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color:#eee; + color: gray; + display: inline; + position: relative; + top:100px; + left:190px; + } -* { - box-sizing: border-box; +.ok { + border-radius: 36px; + font-size: 18px; + width: 20%; + background-color: #4f50ff;; + color: white; + position: relative; + top:73px; + left:330px; } diff --git a/exercise-3/images/1.png b/exercise-3/images/1.png new file mode 100644 index 0000000..0c83db9 Binary files /dev/null and b/exercise-3/images/1.png differ diff --git a/exercise-3/images/2.png b/exercise-3/images/2.png new file mode 100644 index 0000000..5707f1c Binary files /dev/null and b/exercise-3/images/2.png differ diff --git a/exercise-3/images/3.png b/exercise-3/images/3.png new file mode 100644 index 0000000..6470e1e Binary files /dev/null and b/exercise-3/images/3.png differ diff --git a/exercise-3/index.html b/exercise-3/index.html index d7cab7b..ffba216 100644 --- a/exercise-3/index.html +++ b/exercise-3/index.html @@ -1,14 +1,48 @@ - + - Exercise 3 - +
+

Exercise 3: Interactivity

+

Objective

+

Build a carousel using only HTML and CSS that looks somewhat like the + following:

+
+ + + +
+ + + +
+ + + +
+
+ + + +
+
+ +
+

Rules

+
    +
  1. Only HTML and CSS. No Javascript is allowed.
    2. +
  2. Carousel must be operable using the navigation.
    3. +
  3. Left, right buttons are not necessary.
    4. +
  4. Touch swipe isn't necessary.
    5. +
  5. Supporting flexible slides / image sizes isn't necessary.
    6. +
+
+ diff --git a/exercise-3/styles.css b/exercise-3/styles.css index f2f7776..3e8e86e 100644 --- a/exercise-3/styles.css +++ b/exercise-3/styles.css @@ -1,7 +1,63 @@ -body { - margin: 0; +.slider-holder +{ + width: 800px; + height: 400px; + background-color: yellow; + margin-left: auto; + margin-right: auto; + margin-top: 0px; + text-align: center; + overflow: hidden; } -* { - box-sizing: border-box; +.image-holder +{ + width: 2400px; + background-color: red; + height: 400px; + clear: both; + position: relative; + + -webkit-transition: left 2s; + -moz-transition: left 2s; + -o-transition: left 2s; + transition: left 2s; } + +.slider-image +{ + float: left; + margin: 0px; + padding: 0px; + position: relative; +} + +#slider-image-1:target ~ .image-holder +{ + left: 0px; +} + +#slider-image-2:target ~ .image-holder +{ + left: -800px; +} + +#slider-image-3:target ~ .image-holder +{ + left: -1600px; +} + +.button-holder +{ + position: relative; + top: -20px; +} + +.slider-change +{ + display: inline-block; + height: 10px; + width: 10px; + border-radius: 5px; + background-color: brown; +} \ No newline at end of file