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; }