diff --git a/tasks-by-users/1khansaad/02-card-hover-project/gmail.png b/tasks-by-users/1khansaad/02-card-hover-project/gmail.png new file mode 100644 index 0000000..e265d5f Binary files /dev/null and b/tasks-by-users/1khansaad/02-card-hover-project/gmail.png differ diff --git a/tasks-by-users/1khansaad/02-card-hover-project/google photos.png b/tasks-by-users/1khansaad/02-card-hover-project/google photos.png new file mode 100644 index 0000000..013f829 Binary files /dev/null and b/tasks-by-users/1khansaad/02-card-hover-project/google photos.png differ diff --git a/tasks-by-users/1khansaad/02-card-hover-project/index.html b/tasks-by-users/1khansaad/02-card-hover-project/index.html new file mode 100644 index 0000000..3e3512a --- /dev/null +++ b/tasks-by-users/1khansaad/02-card-hover-project/index.html @@ -0,0 +1,54 @@ + + + + card hover effect + + + + +
+
+
+
+ play store icon +

Play store

+
+
+
+
+

Google Play, also branded as the Google Play Store and formerly Android Market, is a digital distribution service operated and developed by Google. It serves as the official app store for certified devices.

+ Read More +
+
+
+
+
+
+ gmail icon +

Gmail

+
+
+
+
+

Google Play, also branded as the Google Play Store and formerly Android Market, is a digital distribution service operated and developed by Google. It serves as the official app store for certified devices.

+ Read More +
+
+
+
+
+
+ google photos icon +

Google photos

+
+
+
+
+

Google Play, also branded as the Google Play Store and formerly Android Market, is a digital distribution service operated and developed by Google. It serves as the official app store for certified devices.

+ Read More +
+
+
+
+ + \ No newline at end of file diff --git a/tasks-by-users/1khansaad/02-card-hover-project/play store.png b/tasks-by-users/1khansaad/02-card-hover-project/play store.png new file mode 100644 index 0000000..16d28e7 Binary files /dev/null and b/tasks-by-users/1khansaad/02-card-hover-project/play store.png differ diff --git a/tasks-by-users/1khansaad/02-card-hover-project/style.css b/tasks-by-users/1khansaad/02-card-hover-project/style.css new file mode 100644 index 0000000..87529d6 --- /dev/null +++ b/tasks-by-users/1khansaad/02-card-hover-project/style.css @@ -0,0 +1,62 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container { + height: 100vh; + + display: flex; + text-align: center; + align-items: center; + justify-content: space-around; +} +.cards { + width: 25%; + display: flex; + flex-wrap: wrap; + min-width: 300px; +} +.container .cards .face1 img { + margin: 15px; +} +.container .cards .face1 img:hover { + width: 105px; + transition: 0.2s; +} +.container .cards .face1 { + background: rgb(177, 157, 157); + width: 100%; + z-index: 1; + transform: translateY(100px); + height: 33vh; +} +.container .cards:hover .face1 { + transform: translateY(0); + transition: 0.5s; +} +.container .cards .face2 { + transform: translateY(-106px); + height: 33vh; + background: rgb(221, 33, 33); +} +.container .cards:hover .face2 { + transform: translateY(0); +} +.container .cards .face2 a { + text-decoration: none; + border: 1px solid black; + color: black; + padding: 1%; +} +.container .cards .face2 p { + text-align: left; + padding-left: 10px; + font-size: 1.1em; +} +.container .cards .face2 a:hover { + background: black; + color: white; + box-shadow: 2px 2px #333; + transition: 0.3s; +}