diff --git a/medialinks/github.png b/medialinks/github.png new file mode 100644 index 0000000..4b4d87d Binary files /dev/null and b/medialinks/github.png differ diff --git a/medialinks/index.html b/medialinks/index.html new file mode 100644 index 0000000..a69b89f --- /dev/null +++ b/medialinks/index.html @@ -0,0 +1,54 @@ + + + + + + Document + + + +
+

My Social Media Links

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

My github Account

+

Scan the qr code to visit my github repo

+
+
+ + +
+
+ +
+
+

My insta link

+

Scan the qr code to visit my insta account

+
+
+ + +
+
+ +
+
+

my LinkedIn

+

Scan the qr code to visit my linkedin profile

+
+
+ + +
+ + diff --git a/medialinks/insta.png b/medialinks/insta.png new file mode 100644 index 0000000..b74c3dc Binary files /dev/null and b/medialinks/insta.png differ diff --git a/medialinks/qr.png b/medialinks/qr.png new file mode 100644 index 0000000..5cea345 Binary files /dev/null and b/medialinks/qr.png differ diff --git a/medialinks/qrcode.png b/medialinks/qrcode.png new file mode 100644 index 0000000..a4f6ba9 Binary files /dev/null and b/medialinks/qrcode.png differ diff --git a/medialinks/style.css b/medialinks/style.css new file mode 100644 index 0000000..b5e42a6 --- /dev/null +++ b/medialinks/style.css @@ -0,0 +1,57 @@ +*{ + margin: 0; + padding: 0; +} +.intro{ + background-color: #8EC5FC; + background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); + display: flex; + justify-content: center; + font-size: 2rem; + /* color: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); */ + ; +} +.container{ + height: 100vh; + width: 100vw; + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #8EC5FC; + background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); +} + +.card{ + height: 700px; + width: 500px; + background-color: azure; + display: flex; + flex-direction: column; + justify-content: space-around; + border-radius: 15px; + box-shadow: 1px 5px 20px black; + gap: 30px; +} + +.card:hover{ + transform: scale(1.1); + transition: all 0.1s linear 0s; +} + +.image{ + align-self: center; + /* background-color: rgb(23, 193, 245); */ + height: 400px; + width: 400px; + padding: 10px; + border-radius: 15px; +} + +.content h2 { + padding-left: 20px; + font-size: 2.1rem; +} +.content p{ + padding: 20px; + font-size: 1.3rem; +}