diff --git a/image.me.jpg b/image.me.jpg new file mode 100644 index 0000000..0e4fde5 Binary files /dev/null and b/image.me.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3971d47 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + Card - Afzal Mir + + + + + + +
+ +
+ +
+ +
+ +
+

Md Afzal Mir

+

Youtuber & Blogger

+
+ + +
+ + + + + + + + + + + + +
+ +
+ + + + +
+ +
+ + 10k + + 5k + + 2k +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3ec8e98 --- /dev/null +++ b/style.css @@ -0,0 +1,141 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.wrapper{ + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + + display: flex; + justify-content: center; + align-items: center; + background-color: #f4f4f4; +} + +.card{ + max-width: 370px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + background-color: #fff; + + box-shadow: 0 0 5px #949494; + border-radius: 25px; + + position: relative; +} + +.image{ + height: 150px; + width: 150px; + position: relative; + + margin-top: 25px; + padding: 3px; + background-color: royalblue; + border-radius: 50%; + +} + +.card::before{ + content: ""; + position: absolute; + top: 0; + left: 0; + height: 33%; + width: 100%; + background-color: royalblue; + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} + +.image .profile-image{ + height: 100%; + width: 100%; + object-fit:cover; + border-radius: 50%; + /* padding: 3px; */ + border: 3px solid #fff; + +} + +.hd-text{ + font-family:cursive; + text-align: center; + padding-top: 20px; + +} + +.hd-text h3{ + margin-top: 5px; +} + +.link{ + text-decoration: none; + color: inherit; + +} + +.icons{ + margin-top: 25px; + font-size: 2em; +} + +.fbcon, .twicon, .inscon, .youcon{ + background-color: royalblue; + color: white; + border-radius: 50%; + padding: 5px; + margin: 3px; +} + +.twicon{ + background-color: rgb(0, 177, 236); +} + +.inscon{ + background-color: rgb(255, 0, 119); +} + +.youcon{ + background-color: rgb(255, 0, 0); +} + +.buttons{ + width: 100%; + display: flex; + justify-content: center; + margin-top: 30px; + gap: 25px; +} + +button{ + background-color: royalblue; + color: white; + border: none; + padding: 9px 20px; + border-radius: 50px; + font-weight: 600; + font-size: 1.2rem; +} + +.reaction{ + margin: 30px 0; +} + +.rxn{ + + font-size: 1.5rem; + padding: 0 25px; + border-right: 2px solid rgb(96, 96, 96); +} + +.ri-share-forward-line{ + border-right: none; +} \ No newline at end of file