├── Aaditya-Mishra ├── README.md ├── Vector.png ├── index.html ├── profile image.png └── style.css ├── Abhishek ├── Abhishek.css ├── Abhishek.html ├── CONTRIBUTING.md ├── IMAGE.png ├── Readme.md ├── joker-artwork-5k.jpg └── wp2655933.jpg ├── Adaeze ├── Adaeze_Resume.pdf ├── README.md ├── images │ ├── Readme-screenshot.png │ └── ada.jpg ├── index.html └── styles.css ├── AkshatKumar ├── README.md ├── img │ └── Screenshot 2022-10-06 224731.png ├── index.html └── style.css ├── Amit ├── README.md ├── amit.png ├── dhgfb.jpg ├── index.html └── style.css ├── Atul ├── README.md ├── atul.css └── atul.html ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING-GUIDELINE.md ├── CONTRIBUTING.md ├── Divya ├── README.md ├── divya.css ├── divya.html ├── divya.jpeg ├── readme.png └── readme1.png ├── FabianCristancho ├── README.md ├── images │ ├── bg-pattern-bottom.svg │ ├── bg-pattern-card.svg │ ├── bg-pattern-top.svg │ ├── design.png │ ├── fabian.jpg │ └── icon.png ├── index.html └── style.css ├── Gagan ├── README.md ├── css │ └── style.css ├── gaganpf.png ├── images │ └── gagan.png └── index.html ├── Harsh ├── README.md ├── harsh.html ├── img │ └── harsh.png └── style.css ├── Harsha-Bajaj ├── README.md ├── bajaj.png ├── img.jpeg ├── index.html └── style.css ├── LICENSE ├── Lokesh ├── README.md ├── lokesh.css └── lokesh.html ├── MitalSapkale ├── img │ ├── SquareQuick_202012416910400.jpg │ └── profileTamplete.png ├── mital.css └── mital.html ├── NwekeGoddy ├── images │ ├── Hacktoberfest1111.PNG │ └── Nweke_chidi_pic.png ├── index.html ├── readme.md └── style.css ├── Piyush ├── README.md ├── images │ ├── IMG_20220506_021038_424.jpg │ └── Screenshot at 2022-10-07 21-56-57.png ├── piyush.css └── piyush.html ├── Pratap360 ├── Readme.md ├── img │ ├── github profile img.jfif │ └── ss of profile.jpg ├── index.html └── style.css ├── README.md ├── Rahul Sehgal ├── README.md ├── images │ ├── github.jpg │ ├── instagram.jpg │ ├── linkedin.jpg │ └── profile_image_crowninn.jpg ├── rahul.html ├── rahulsingle.png └── style.css ├── Raunak ├── README.md ├── Raunak.css └── Raunak.html ├── Shital ├── Img │ ├── Facebook.PNG │ ├── Github.PNG │ ├── Instagram.PNG │ ├── Twitter.PNG │ └── profilephoto.jpg ├── Readme.md ├── index.html └── style.css ├── Shreeyash Garde ├── css │ └── styles.css ├── images │ ├── Shreeyash photo-modified2.png │ └── preview.png ├── index.html └── readme.md ├── Sujit is Back ├── Panda_Archigraphs.png ├── Readme.md ├── index.css └── index.html ├── Swadesh ├── Profile.png ├── index.html ├── my photo.jpg ├── readme.md └── style.css ├── naman ├── README.md ├── assests │ ├── card.png │ ├── hater_fr.png │ ├── instagram.png │ ├── linkedin.png │ ├── profile.png │ └── twitter.png ├── index.html └── style.css ├── raj-hero ├── README.md ├── android-chrome-192x192.png ├── index.html ├── particles.json ├── raj-hro-prf-ss.png └── style.css └── satwik ├── readme.md ├── satwik.css └── satwik.html /Aaditya-Mishra/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## MY PROFILE CARD 3 | Here are the list of languages for contribution 4 | 5 | 1. Beautiful UI 6 | 2. Some hover animations 7 | 3. Used icons 8 | 9 | ## Previews 10 | 11 | ![195164753-15efcd1f-6e1b-49b4-a631-84eb7054b9fb](https://user-images.githubusercontent.com/37442807/195750405-e66ac179-f243-46fd-be5f-b6275f280f8f.png) 12 | ![195164878-83f2e146-28f1-4872-8523-63fbc8c14730](https://user-images.githubusercontent.com/37442807/195750437-f2c0878f-4068-442d-863a-06877d988242.png) 13 | -------------------------------------------------------------------------------- /Aaditya-Mishra/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Aaditya-Mishra/Vector.png -------------------------------------------------------------------------------- /Aaditya-Mishra/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Profile card 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |

Aaditya Mishra

35 |

Web developer

36 |
37 | 38 |

HTML || CSS || JavaScript developer || UI/UX designer || GDSC MMDU member ||

39 | 40 |
41 |
42 |

203k

43 |

Following

44 | 45 |
46 |
47 |

1.8M

48 |

Profile visits

49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /Aaditya-Mishra/profile image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Aaditya-Mishra/profile image.png -------------------------------------------------------------------------------- /Aaditya-Mishra/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | 13 | } 14 | 15 | .box { 16 | position: relative; 17 | width: 22rem; 18 | height: 30rem; 19 | overflow: hidden; 20 | box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; 21 | } 22 | 23 | .vector { 24 | position: absolute; 25 | width: 80%; 26 | z-index: -1; 27 | display: none; 28 | } 29 | 30 | .menu { 31 | position: absolute; 32 | top: 1.5rem; 33 | right: 2rem; 34 | display: none; 35 | } 36 | 37 | .profile { 38 | display: flex; 39 | flex-direction: column; 40 | flex-wrap: wrap; 41 | align-items: center; 42 | } 43 | 44 | .profile img { 45 | transform: scale(0.7); 46 | transition: .5s ease-in-out; 47 | } 48 | 49 | .followstatus { 50 | position: relative; 51 | display: flex; 52 | justify-content: space-between; 53 | width: 70%; 54 | margin: auto; 55 | top: 2rem; 56 | transition: .2s ease-in-out; 57 | } 58 | 59 | .following { 60 | display: flex; 61 | flex-direction: column; 62 | align-items: center; 63 | } 64 | 65 | h1 { 66 | font-family: 'Poppins', sans-serif; 67 | color: #5500C1; 68 | transition: .5s ease-in-out; 69 | } 70 | 71 | h3 { 72 | font-family: 'Poppins', sans-serif; 73 | color: #4D4D4D; 74 | transition: .5s ease-in-out; 75 | } 76 | 77 | h2, 78 | h4 { 79 | font-family: 'Poppins', sans-serif; 80 | color: #4D4D4D; 81 | } 82 | 83 | p { 84 | 85 | font-size: .9rem; 86 | font-family: 'Poppins'; 87 | text-align: center; 88 | width: 70%; 89 | margin: auto; 90 | 91 | display: none; 92 | } 93 | 94 | .footer { 95 | display: flex; 96 | justify-content: space-between; 97 | align-items: center; 98 | padding: 2rem; 99 | height: 80px; 100 | background: #eee; 101 | visibility: hidden; 102 | } 103 | 104 | .footer i { 105 | font-size: 2rem; 106 | color: #A5A5A5; 107 | 108 | } 109 | i:hover { 110 | cursor: pointer; 111 | color: #5500C1; 112 | } 113 | 114 | /* HOVER EFFECTS */ 115 | 116 | .box:hover .vector { 117 | display: block; 118 | animation: slide-in .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 119 | 120 | 121 | } 122 | 123 | .box:hover .menu { 124 | display: block; 125 | } 126 | 127 | .box:hover p { 128 | 129 | display: block; 130 | animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; 131 | transform: translateY(-3rem); 132 | 133 | } 134 | 135 | .box:hover .followstatus { 136 | display: none; 137 | } 138 | 139 | 140 | 141 | .box:hover .profile img { 142 | 143 | transform: translateY(-2rem) scale(0.5); 144 | 145 | } 146 | 147 | .box:hover h1 { 148 | transform: translateY(-6rem); 149 | } 150 | 151 | .box:hover h3 { 152 | transform: translateY(-6rem); 153 | } 154 | 155 | .box:hover .footer { 156 | visibility: visible; 157 | } 158 | 159 | /* ANIMATIONS */ 160 | @keyframes slide-in { 161 | 0% { 162 | transform: translateY(-1000px); 163 | opacity: 0; 164 | } 165 | 166 | 100% { 167 | transform: translateY(0); 168 | opacity: 1; 169 | } 170 | } 171 | 172 | @keyframes text-focus-in { 173 | 0% { 174 | filter: blur(12px); 175 | opacity: 0; 176 | } 177 | 178 | 100% { 179 | filter: blur(0px); 180 | opacity: 1; 181 | } 182 | } -------------------------------------------------------------------------------- /Abhishek/Abhishek.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url('wp2655933.jpg'); 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 440px; 22 | color: #fff; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: blur(5px); 30 | } 31 | 32 | .card img{ 33 | width: 140px; 34 | border-radius: 50%; 35 | font-weight: 600; 36 | margin-top: 20px; 37 | } 38 | 39 | .btn{ 40 | text-decoration: none; 41 | display: inline-block; 42 | font-size: 18px; 43 | font-weight: 500; 44 | background-color: transparent; 45 | border: 1px solid white; 46 | color: #fff; 47 | padding: 10px 30px; 48 | border-radius: 30px; 49 | margin: 30px 0 10px; 50 | } 51 | 52 | .btn:hover{ 53 | cursor: pointer; 54 | background-color: white; 55 | font-weight: medium; 56 | box-shadow: 0 0 10px rgb(169, 205, 235); 57 | color: #137570; 58 | } 59 | 60 | 61 | .social-menu ul{ 62 | position: absolute; 63 | top: 50%; 64 | left: 50%; 65 | padding: 0; 66 | margin: 0; 67 | transform: translate(-50%, -50%); 68 | display: flex; 69 | } 70 | 71 | .social-menu ul li{ 72 | list-style: none; 73 | margin: 0 15px; 74 | } 75 | 76 | .social-menu ul li .fab{ 77 | font-size: 30px; 78 | line-height: 60px; 79 | transition: .3s; 80 | color: #000; 81 | } 82 | 83 | .social-menu ul li .fab:hover{ 84 | color: #fff; 85 | } 86 | 87 | .social-menu ul li a{ 88 | position: relative; 89 | display: block; 90 | width: 60px; 91 | height: 60px; 92 | border-radius: 50%; 93 | background-color: #fff; 94 | text-align: center; 95 | transition: .6s; 96 | box-shadow: 0 5px 4px rgba(0,0,0,.5); 97 | } 98 | 99 | .social-menu ul li a:hover{ 100 | transform: translate(0, -10%); 101 | } 102 | 103 | .social-menu ul li:nth-child(1) a:hover{ 104 | background-color: rgba(0, 0, 0, 0.829); 105 | } 106 | .social-menu ul li:nth-child(2) a:hover{ 107 | background-color: #00acee; 108 | } 109 | .social-menu ul li:nth-child(3) a:hover{ 110 | background-color: #0077b5; 111 | } 112 | .social-menu ul li:nth-child(4) a:hover{ 113 | background-color: #000; 114 | } 115 | 116 | 117 | -------------------------------------------------------------------------------- /Abhishek/Abhishek.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Abhishek 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Abhishek Kumar


15 |

Front End Developer | Machine Learning Enthusiast

16 | 24 | Contact
25 | Phone 26 |
27 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Abhishek/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributers 2 | 3 | - [Mital](https://github.com/mitalrs) 4 | - [Harsh](https://github.com/Harsh-Singh-Rajput) 5 | - [Raunak](https://github.com/raunak-dev-edu) 6 | - [Pratap Parui](https://github.com/pratap360) 7 | - [Atul Narayan](https://github.com/atulnarayan16) 8 | - [raj-hero](https://github.com/raj-hero) 9 | - [NwekeGoddy](https://github.com/NwekeGoddy) 10 | - [Abhishek Kumar Ray](https://github.com/AbhishekKumarRay) 11 | -------------------------------------------------------------------------------- /Abhishek/IMAGE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Abhishek/IMAGE.png -------------------------------------------------------------------------------- /Abhishek/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Profile with HTML, CSS. 3 | 4 | ## Screenshot: 5 | 6 | ![Screenshot](https://user-images.githubusercontent.com/56451789/194726146-ed75ff6d-b82d-45e4-911a-0deb97d63be2.png) 7 | -------------------------------------------------------------------------------- /Abhishek/joker-artwork-5k.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Abhishek/joker-artwork-5k.jpg -------------------------------------------------------------------------------- /Abhishek/wp2655933.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Abhishek/wp2655933.jpg -------------------------------------------------------------------------------- /Adaeze/Adaeze_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Adaeze/Adaeze_Resume.pdf -------------------------------------------------------------------------------- /Adaeze/README.md: -------------------------------------------------------------------------------- 1 | # Profile Preview 2 | 3 | ![](images/Readme-screenshot.png) 4 | -------------------------------------------------------------------------------- /Adaeze/images/Readme-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Adaeze/images/Readme-screenshot.png -------------------------------------------------------------------------------- /Adaeze/images/ada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Adaeze/images/ada.jpg -------------------------------------------------------------------------------- /Adaeze/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Adaeze Ndupu 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Adaeze

18 |

Ndupu

19 |
20 |
21 | 22 |
23 |
24 |

FRONTEND DEVELOPER

25 | Download 26 | My CV 27 |
28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Adaeze/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | body { 7 | min-height: 100vh; 8 | display: grid; 9 | place-content: center; 10 | background-color: rgb(41, 39, 39); 11 | font-family: Georgia, 'Times New Roman', Times, serif; 12 | } 13 | a { 14 | text-decoration: none; 15 | } 16 | .btn { 17 | padding: 0.7rem 1.5rem; 18 | background: tomato; 19 | border: 1px solid tomato; 20 | border-radius: 15px; 21 | cursor: pointer; 22 | color: #fff; 23 | text-align: center; 24 | margin-bottom: 0.5rem; 25 | transform: scale(1); 26 | transition: all 0.3s ease; 27 | } 28 | .btn a { 29 | font-weight: 800; 30 | } 31 | .btn:hover { 32 | transform: scale(1.1); 33 | background-color: rgb(94, 17, 3); 34 | } 35 | .card { 36 | display: grid; 37 | position: relative; 38 | grid-template-columns: 300px; 39 | grid-template-rows: 300px 170px; 40 | border: 1px solid #e6e6e6; 41 | grid-template-areas: 'image' 'details'; 42 | width: 300px; 43 | border-radius: 18px; 44 | background: white; 45 | box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9); 46 | transition: 0.5s ease; 47 | cursor: pointer; 48 | overflow-x: hidden; 49 | } 50 | 51 | .card-image { 52 | grid-area: image; 53 | position: relative; 54 | width: 100%; 55 | aspect-ratio: 1/1; 56 | border-radius: 18px; 57 | } 58 | 59 | .first-user { 60 | background: url('./images/ada.jpg') no-repeat -100px 0; 61 | } 62 | 63 | .text { 64 | color: #fff; 65 | font-size: 20px; 66 | display: flex; 67 | align-items: center; 68 | justify-content: center; 69 | gap: 1rem; 70 | transition: all 0.3s ease; 71 | } 72 | .text a { 73 | color: tomato; 74 | } 75 | .text a:hover { 76 | transform: scale(1.1); 77 | color: rgb(94, 17, 3); 78 | } 79 | .card:hover .card-overlay { 80 | bottom: 0; 81 | height: 100%; 82 | } 83 | 84 | .first-user { 85 | width: 300px; 86 | aspect-ratio: 1/1; 87 | filter: grayscale(0); 88 | background-size: cover; 89 | } 90 | .name { 91 | color: #fff; 92 | position: absolute; 93 | top: 20%; 94 | left: 10px; 95 | z-index: 1; 96 | } 97 | .name h2 { 98 | font-size: 1.8rem; 99 | text-transform: uppercase; 100 | font-style: italic; 101 | } 102 | .name h4 { 103 | font-size: 1.2rem; 104 | text-transform: uppercase; 105 | font-style: italic; 106 | } 107 | .card-details { 108 | grid-area: details; 109 | position: relative; 110 | padding: 1.5rem 1rem; 111 | display: flex; 112 | flex-direction: column; 113 | gap: 0.5rem; 114 | } 115 | 116 | .card-details h3 { 117 | margin: 0.9rem auto; 118 | } 119 | 120 | .card-details p { 121 | font-style: italic; 122 | font-size: 0.9rem; 123 | } 124 | 125 | .icon { 126 | position: absolute; 127 | width: 50px; 128 | height: 50px; 129 | border-radius: 100%; 130 | top: -25px; 131 | right: 20px; 132 | display: grid; 133 | place-content: center; 134 | color: #fff; 135 | box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9); 136 | } 137 | .user-bg { 138 | background-color: tomato; 139 | } 140 | .user-text { 141 | color: tomato; 142 | } 143 | -------------------------------------------------------------------------------- /AkshatKumar/README.md: -------------------------------------------------------------------------------- 1 | ![alt text](./img/Screenshot%202022-10-06%20224731.png?raw=true "Profile") -------------------------------------------------------------------------------- /AkshatKumar/img/Screenshot 2022-10-06 224731.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/AkshatKumar/img/Screenshot 2022-10-06 224731.png -------------------------------------------------------------------------------- /AkshatKumar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 16 | 17 | 18 |
19 |
20 | 23 |
24 |
25 |

Akshat Kumar

26 |

MERN Developer | Problem Solving | Student at LNCT, Bhopal

27 |
28 |
29 | 32 | 35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /AkshatKumar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | height: 100vh; 7 | background: url("https://images.unsplash.com/photo-1510906594845-bc082582c8cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1144&q=80"); 8 | background-size: cover; 9 | overflow: hidden; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | color: #fff; 14 | font-family: sans-serif; 15 | } 16 | 17 | .container { 18 | width: 30rem; 19 | height: 28rem; 20 | box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); 21 | background: rgba(255, 255, 255, 0.2); 22 | backdrop-filter: blur(5px); 23 | border-radius: 5px; 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .container .image { 29 | width: 100%; 30 | padding-top: 2rem; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | } 35 | 36 | .container img { 37 | border-radius: 50%; 38 | width: 10rem; 39 | height: 10rem; 40 | } 41 | 42 | .text { 43 | padding: 2rem; 44 | letter-spacing: 1.5px; 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | h2 { 52 | margin: 0; 53 | } 54 | 55 | p { 56 | letter-spacing: 1.5px; 57 | } 58 | 59 | a { 60 | color: #fff; 61 | font-size: 1.5rem; 62 | } 63 | 64 | .footer { 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | } 69 | 70 | .footer a { 71 | margin: 1rem; 72 | } 73 | -------------------------------------------------------------------------------- /Amit/README.md: -------------------------------------------------------------------------------- 1 | ![](./amit.png) -------------------------------------------------------------------------------- /Amit/amit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Amit/amit.png -------------------------------------------------------------------------------- /Amit/dhgfb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Amit/dhgfb.jpg -------------------------------------------------------------------------------- /Amit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 10 | 11 | 65 | 66 | -------------------------------------------------------------------------------- /Amit/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | overflow: hidden; 7 | background: #bcdee7 url("../img/bg.jpg") no-repeat center center fixed; 8 | background-size: cover; 9 | position: fixed; 10 | padding: 0px; 11 | margin: 0px; 12 | width: 100%; 13 | height: 100%; 14 | font: normal 14px/1.618em "Roboto", sans-serif; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | body:before { 19 | content: ""; 20 | height: 0px; 21 | padding: 0px; 22 | border: 130em solid #313440; 23 | position: absolute; 24 | left: 50%; 25 | top: 100%; 26 | z-index: 2; 27 | display: block; 28 | -webkit-border-radius: 50%; 29 | border-radius: 50%; 30 | -webkit-transform: translate(-50%, -50%); 31 | transform: translate(-50%, -50%); 32 | -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards; 33 | animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards; 34 | } 35 | 36 | h1, 37 | h2 { 38 | font-weight: 500; 39 | margin: 0px 0px 5px 0px; 40 | } 41 | 42 | h1 { 43 | font-size: 24px; 44 | } 45 | 46 | h2 { 47 | font-size: 16px; 48 | } 49 | 50 | p { 51 | margin: 0px; 52 | } 53 | 54 | .profile-card { 55 | background: #FFB300; 56 | width: 56px; 57 | height: 56px; 58 | position: absolute; 59 | left: 50%; 60 | top: 50%; 61 | z-index: 2; 62 | overflow: hidden; 63 | opacity: 0; 64 | margin-top: 70px; 65 | -webkit-transform: translate(-50%, -50%); 66 | transform: translate(-50%, -50%); 67 | -webkit-border-radius: 50%; 68 | border-radius: 50%; 69 | -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); 70 | box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); 71 | -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards; 72 | animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards; 73 | } 74 | 75 | .profile-card header { 76 | width: 179px; 77 | height: 280px; 78 | padding: 40px 20px 30px 20px; 79 | display: inline-block; 80 | float: left; 81 | border-right: 2px dashed #EEEEEE; 82 | background: #FFFFFF; 83 | color: #000000; 84 | margin-top: 50px; 85 | opacity: 0; 86 | text-align: center; 87 | -webkit-animation: moveIn 1s 3.1s ease forwards; 88 | animation: moveIn 1s 3.1s ease forwards; 89 | } 90 | 91 | .profile-card header h1 { 92 | color: #FF5722; 93 | } 94 | 95 | .profile-card header a { 96 | display: inline-block; 97 | text-align: center; 98 | position: relative; 99 | margin: 25px 30px; 100 | } 101 | 102 | .profile-card header a:after { 103 | position: absolute; 104 | content: ""; 105 | bottom: 3px; 106 | right: 3px; 107 | width: 20px; 108 | height: 20px; 109 | border: 4px solid #FFFFFF; 110 | -webkit-transform: scale(0); 111 | transform: scale(0); 112 | background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%); 113 | background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%); 114 | -webkit-border-radius: 50%; 115 | border-radius: 50%; 116 | -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 117 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 118 | -webkit-animation: scaleIn 0.3s 3.5s ease forwards; 119 | animation: scaleIn 0.3s 3.5s ease forwards; 120 | } 121 | 122 | .profile-card header a>img { 123 | width: 120px; 124 | max-width: 100%; 125 | -webkit-border-radius: 50%; 126 | border-radius: 50%; 127 | -webkit-transition: -webkit-box-shadow 0.3s ease; 128 | transition: box-shadow 0.3s ease; 129 | -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06); 130 | box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06); 131 | } 132 | 133 | .profile-card header a:hover>img { 134 | -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1); 135 | box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1); 136 | } 137 | 138 | .profile-card .profile-bio { 139 | width: 175px; 140 | height: 180px; 141 | display: inline-block; 142 | float: right; 143 | padding: 50px 20px 30px 20px; 144 | background: #FFFFFF; 145 | color: #333333; 146 | margin-top: 50px; 147 | text-align: center; 148 | opacity: 0; 149 | -webkit-animation: moveIn 1s 3.1s ease forwards; 150 | animation: moveIn 1s 3.1s ease forwards; 151 | } 152 | 153 | .profile-social-links { 154 | width: 218px; 155 | display: inline-block; 156 | float: right; 157 | margin: 0px; 158 | padding: 15px 20px; 159 | background: #FFFFFF; 160 | margin-top: 50px; 161 | text-align: center; 162 | opacity: 0; 163 | -webkit-box-sizing: border-box; 164 | box-sizing: border-box; 165 | -webkit-animation: moveIn 1s 3.1s ease forwards; 166 | animation: moveIn 1s 3.1s ease forwards; 167 | } 168 | 169 | .profile-social-links li { 170 | list-style: none; 171 | margin: -5px 0px 0px 0px; 172 | padding: 0px; 173 | float: left; 174 | width: 25%; 175 | text-align: center; 176 | } 177 | 178 | .profile-social-links li a { 179 | display: inline-block; 180 | color: red; 181 | width: 24px; 182 | height: 24px; 183 | padding: 6px; 184 | position: relative; 185 | overflow: hidden !important; 186 | -webkit-border-radius: 50%; 187 | border-radius: 50%; 188 | } 189 | 190 | .profile-social-links li a i { 191 | position: relative; 192 | z-index: 1; 193 | } 194 | 195 | .profile-social-links li a img, 196 | .profile-social-links li a svg { 197 | width: 24px; 198 | } 199 | 200 | @-webkit-keyframes init { 201 | 0% { 202 | width: 0px; 203 | height: 0px; 204 | } 205 | 206 | 100% { 207 | width: 56px; 208 | height: 56px; 209 | margin-top: 0px; 210 | opacity: 1; 211 | } 212 | } 213 | 214 | @keyframes init { 215 | 0% { 216 | width: 0px; 217 | height: 0px; 218 | } 219 | 220 | 100% { 221 | width: 56px; 222 | height: 56px; 223 | margin-top: 0px; 224 | opacity: 1; 225 | } 226 | } 227 | 228 | @-webkit-keyframes puff { 229 | 0% { 230 | top: 100%; 231 | height: 0px; 232 | padding: 0px; 233 | } 234 | 235 | 100% { 236 | top: 50%; 237 | height: 100%; 238 | padding: 0px 100%; 239 | } 240 | } 241 | 242 | @keyframes puff { 243 | 0% { 244 | top: 100%; 245 | height: 0px; 246 | padding: 0px; 247 | } 248 | 249 | 100% { 250 | top: 50%; 251 | height: 100%; 252 | padding: 0px 100%; 253 | } 254 | } 255 | 256 | @-webkit-keyframes borderRadius { 257 | 0% { 258 | -webkit-border-radius: 50%; 259 | } 260 | 261 | 100% { 262 | -webkit-border-radius: 0px; 263 | } 264 | } 265 | 266 | @keyframes borderRadius { 267 | 0% { 268 | -webkit-border-radius: 50%; 269 | } 270 | 271 | 100% { 272 | border-radius: 0px; 273 | } 274 | } 275 | 276 | @-webkit-keyframes moveDown { 277 | 0% { 278 | top: 50%; 279 | } 280 | 281 | 50% { 282 | top: 40%; 283 | } 284 | 285 | 100% { 286 | top: 100%; 287 | } 288 | } 289 | 290 | @keyframes moveDown { 291 | 0% { 292 | top: 50%; 293 | } 294 | 295 | 50% { 296 | top: 40%; 297 | } 298 | 299 | 100% { 300 | top: 100%; 301 | } 302 | } 303 | 304 | @-webkit-keyframes moveUp { 305 | 0% { 306 | background: #FFB300; 307 | top: 100%; 308 | } 309 | 310 | 50% { 311 | top: 40%; 312 | } 313 | 314 | 100% { 315 | top: 50%; 316 | background: #E0E0E0; 317 | } 318 | } 319 | 320 | @keyframes moveUp { 321 | 0% { 322 | background: #FFB300; 323 | top: 100%; 324 | } 325 | 326 | 50% { 327 | top: 40%; 328 | } 329 | 330 | 100% { 331 | top: 50%; 332 | background: #E0E0E0; 333 | } 334 | } 335 | 336 | @-webkit-keyframes materia { 337 | 0% { 338 | background: #E0E0E0; 339 | } 340 | 341 | 50% { 342 | -webkit-border-radius: 4px; 343 | } 344 | 345 | 100% { 346 | width: 440px; 347 | height: 280px; 348 | background: #FFFFFF; 349 | -webkit-border-radius: 4px; 350 | } 351 | } 352 | 353 | @keyframes materia { 354 | 0% { 355 | background: #E0E0E0; 356 | } 357 | 358 | 50% { 359 | border-radius: 4px; 360 | } 361 | 362 | 100% { 363 | width: 440px; 364 | height: 280px; 365 | background: #FFFFFF; 366 | border-radius: 4px; 367 | } 368 | } 369 | 370 | @-webkit-keyframes moveIn { 371 | 0% { 372 | margin-top: 50px; 373 | opacity: 0; 374 | } 375 | 376 | 100% { 377 | opacity: 1; 378 | margin-top: -20px; 379 | } 380 | } 381 | 382 | @keyframes moveIn { 383 | 0% { 384 | margin-top: 50px; 385 | opacity: 0; 386 | } 387 | 388 | 100% { 389 | opacity: 1; 390 | margin-top: -20px; 391 | } 392 | } 393 | 394 | @-webkit-keyframes scaleIn { 395 | 0% { 396 | -webkit-transform: scale(0); 397 | } 398 | 399 | 100% { 400 | -webkit-transform: scale(1); 401 | } 402 | } 403 | 404 | @keyframes scaleIn { 405 | 0% { 406 | transform: scale(0); 407 | } 408 | 409 | 100% { 410 | transform: scale(1); 411 | } 412 | } 413 | 414 | @-webkit-keyframes ripple { 415 | 0% { 416 | transform: scale3d(0, 0, 0); 417 | } 418 | 419 | 50%, 420 | 100% { 421 | -webkit-transform: scale3d(1, 1, 1); 422 | } 423 | 424 | 100% { 425 | opacity: 0; 426 | } 427 | } 428 | 429 | @keyframes ripple { 430 | 0% { 431 | transform: scale3d(0, 0, 0); 432 | } 433 | 434 | 50%, 435 | 100% { 436 | transform: scale3d(1, 1, 1); 437 | } 438 | 439 | 100% { 440 | opacity: 0; 441 | } 442 | } 443 | 444 | @media screen and (min-aspect-ratio: 4/3) { 445 | body { 446 | background-size: cover; 447 | } 448 | 449 | body:before { 450 | width: 0px; 451 | } 452 | 453 | @-webkit-keyframes puff { 454 | 0% { 455 | top: 100%; 456 | width: 0px; 457 | padding-bottom: 0px; 458 | } 459 | 460 | 100% { 461 | top: 50%; 462 | width: 100%; 463 | padding-bottom: 100%; 464 | } 465 | } 466 | 467 | @keyframes puff { 468 | 0% { 469 | top: 100%; 470 | width: 0px; 471 | padding-bottom: 0px; 472 | } 473 | 474 | 100% { 475 | top: 50%; 476 | width: 100%; 477 | padding-bottom: 100%; 478 | } 479 | } 480 | } 481 | 482 | @media screen and (min-height: 480px) { 483 | .profile-card header { 484 | width: auto; 485 | height: auto; 486 | padding: 30px 20px; 487 | display: block; 488 | float: none; 489 | border-right: none; 490 | } 491 | 492 | .profile-card .profile-bio { 493 | width: auto; 494 | height: auto; 495 | padding: 15px 20px 30px 20px; 496 | display: block; 497 | float: none; 498 | } 499 | 500 | .profile-social-links { 501 | width: 100%; 502 | display: block; 503 | float: none; 504 | } 505 | 506 | @-webkit-keyframes materia { 507 | 0% { 508 | background: #E0E0E0; 509 | } 510 | 511 | 50% { 512 | -webkit-border-radius: 4px; 513 | } 514 | 515 | 100% { 516 | width: 280px; 517 | height: 440px; 518 | background: #FFFFFF; 519 | -webkit-border-radius: 4px; 520 | } 521 | } 522 | 523 | @keyframes materia { 524 | 0% { 525 | background: #E0E0E0; 526 | } 527 | 528 | 50% { 529 | border-radius: 4px; 530 | } 531 | 532 | 100% { 533 | width: 280px; 534 | height: 440px; 535 | background: #FFFFFF; 536 | border-radius: 4px; 537 | } 538 | } 539 | } -------------------------------------------------------------------------------- /Atul/README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot (773)](https://user-images.githubusercontent.com/73711346/194623544-1107b35e-57ec-4913-a14f-2a5a989dc978.png) 2 | -------------------------------------------------------------------------------- /Atul/atul.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url(https://media3.giphy.com/media/26tn33aiTi1jkl6H6/giphy.gif); 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 400px; 22 | color: aquamarine; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: sepia(15px); 30 | box-shadow: 15px 10px 18px coral; 31 | } 32 | 33 | .card img{ 34 | width: 140px; 35 | border-radius: 50%; 36 | font-weight: 600; 37 | margin-top: 20px; 38 | } 39 | 40 | .card p{ 41 | font-size: 18px; 42 | margin: 10px auto; 43 | max-width: 330px; 44 | } 45 | 46 | .card .links img{ 47 | width: 40px; 48 | border-radius: 50%; 49 | margin: 10px 5px; 50 | transition: background 0.1s; 51 | } 52 | 53 | .card .links img:hover{ 54 | background: #ffffff; 55 | box-shadow: 0 0 10px rgb(169, 205, 235); 56 | } 57 | .skills { 58 | box-shadow: 0 0 10px rgb(169, 205, 235); 59 | border-radius: 10px; 60 | text-align: left; 61 | color:bisque; 62 | font-size: 18px; 63 | padding: 15px; 64 | margin-top: 30px; 65 | } 66 | .skills ul { 67 | list-style-type: none; 68 | margin: 0; 69 | padding: 0; 70 | } 71 | 72 | .skills ul li { 73 | border: 1px solid white; 74 | border-radius: 2px; 75 | display: inline-block; 76 | font-size: 12px; 77 | margin: 0 7px 7px 0; 78 | padding: 7px; 79 | } 80 | 81 | .btn{ 82 | text-decoration: none; 83 | display: inline-block; 84 | font-size: 18px; 85 | font-weight: 500; 86 | background-color: transparent; 87 | border: 1px solid white; 88 | color: #fff; 89 | padding: 10px 30px; 90 | border-radius: 30px; 91 | margin: 30px 0 10px; 92 | } 93 | 94 | .btn:hover{ 95 | cursor: pointer; 96 | background-color: green; 97 | font-weight: medium; 98 | box-shadow: 0 0 10px rgb(169, 205, 235); 99 | color: black; 100 | } -------------------------------------------------------------------------------- /Atul/atul.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |

Atul Narayan

15 |

Computer Science Student

16 |

Siksha 'O' Anusandan University, Bhubaneswar

17 |
18 | 19 | 20 | 21 |
22 |
23 |
Skills
24 |
    25 |
  • Front End Development
    • 26 |
  • HTML
    • 27 |
  • CSS
    • 28 |
  • JavaScript
    • 29 |
  • Python
    • 30 |
  • Flutter
    • 31 |
32 |
33 | Contact me 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting/derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | 36 | ### Attribution 37 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 38 | 39 | For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq 40 | -------------------------------------------------------------------------------- /CONTRIBUTING-GUIDELINE.md: -------------------------------------------------------------------------------- 1 | ## Contribution Guidelines 2 | 3 | - Write clear meaningful git commit messages (Do read [this](http://chris.beams.io/posts/git-commit/)). 4 | 5 | - Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (Check [this](https://github.com/blog/1506-closing-issues-via-pull-requests) for more info) 6 | 7 | - When you make very very minor changes to a PR of yours (like for example fixing a text in button, minor changes requested by reviewers) make sure you squash your commits afterward so that you don't have an absurd number of commits for a very small fix. (Learn how to squash at [here](https://davidwalsh.name/squash-commits-git)) 8 | 9 | - When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. It makes it very easy for the reviewers and you'll also get reviews quicker. 10 | 11 | 12 | - Always create PR to `develop` branch. 13 | 14 | - Please read our [Code of Conduct](./CODE_OF_CONDUCT.md). 15 | 16 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributers 2 | 3 | - [Mital](https://github.com/mitalrs) 4 | - [Harsh](https://github.com/Harsh-Singh-Rajput) 5 | - [Raunak](https://github.com/raunak-dev-edu) 6 | - [Pratap Parui](https://github.com/pratap360) 7 | - [Atul Narayan](https://github.com/atulnarayan16) 8 | - [raj-hero](https://github.com/raj-hero) 9 | - [NwekeGoddy](https://github.com/NwekeGoddy) 10 | - [Aaditya Mishra](https://github.com/Aaditya-Mishra) 11 | - [Piyush](https://github.com/piyushkdas0611) 12 | - [FabianCristancho](https://github.com/FabianCristancho) 13 | - [Divya](https://github.com/deevya) 14 | - [Shreeyash Garde](https://github.com/ShreeyashGarde) 15 | - [Adaeze](https://github.com/vermilion4) 16 | - [Swadesh](https://github.com/Swadeshit27) 17 | - [bajajharsha](https://github.com/bajajharsha) 18 | - [Gagan](https://github.com/gagan-gv) 19 | - [Rahul Sehgal](https://github.com/itsrahulsehgal/) 20 | - [Akshat](https://github.com/akshat-kumar2109) 21 | - [shital-09](https://github.com/shital-09) 22 | - [naman](https://github.com/na-ma-na723) 23 | - [AbhishekKumarRay](https://github.com/AbhishekKumarRay) 24 | - [Lokesh](https://github.com/Lokesh-Rathore) 25 | - [sujit](https://github.com/mnamesujit) 26 | 27 | -------------------------------------------------------------------------------- /Divya/README.md: -------------------------------------------------------------------------------- 1 | 2 | ##Screenshot 3 | 4 | ![](readme.png) 5 | 6 | ![](readme1.png) -------------------------------------------------------------------------------- /Divya/divya.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background: linear-gradient(135deg, rgb(239, 239, 234), grey, rgb(152, 58, 58), blue, rgb(0, 255,153), aqua, yellow ); 14 | animation:bgAnimate 15s ease infinite ; 15 | background-size: 400% 400%; 16 | } 17 | 18 | 19 | 20 | .cont{ 21 | width: 100%; 22 | height: 100vh; 23 | background-position: center; 24 | background-size: cover; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .cards{ 31 | width: 90%; 32 | max-width: 440px; 33 | color: #fff; 34 | text-align: center; 35 | padding: 50px 35px; 36 | border: 1px solid rgba(255, 255, 255, 0.3); 37 | background: rgba(255,255,255,0.2); 38 | border-radius: 16px; 39 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 40 | backdrop-filter: blur(5px); 41 | } 42 | 43 | .cards img{ 44 | width: 140px; 45 | border-radius: 50%; 46 | font-weight: 600; 47 | margin-top: 20px; 48 | } 49 | 50 | .cards p{ 51 | font-size: 18px; 52 | margin: 10px auto; 53 | max-width: 330px; 54 | } 55 | 56 | .cards .links img{ 57 | width: 40px; 58 | border-radius: 50%; 59 | margin: 10px 5px; 60 | transition: background 0.5s; 61 | } 62 | 63 | .cards .links img:hover{ 64 | background: #ffffff; 65 | box-shadow: 0 0 10px rgb(169, 205, 235); 66 | } 67 | 68 | .button{ 69 | text-decoration: none; 70 | display: inline-block; 71 | font-size: 18px; 72 | font-weight: 500; 73 | background-color: transparent; 74 | border: 1px solid white; 75 | color: #fff; 76 | padding: 10px 30px; 77 | border-radius: 30px; 78 | margin: 30px 0 10px; 79 | } 80 | 81 | .button:hover{ 82 | cursor: pointer; 83 | background-color: white; 84 | font-weight: medium; 85 | box-shadow: 0 0 10px rgb(169, 205, 235); 86 | color: #137570; 87 | } 88 | 89 | @keyframes bgAnimate { 90 | 0% { 91 | background-position: 0% 50%; 92 | } 93 | 25% { 94 | background-position: 50% 100%; 95 | } 96 | 75% { 97 | background-position: 100% 50%; 98 | } 99 | 100%{ 100 | background-position: 50% 0%; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /Divya/divya.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |

Divya Kirad

14 |

Softwate Developer | AWS Enthusiast

15 |
16 | 17 | 18 |
19 | Contact me 20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Divya/divya.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Divya/divya.jpeg -------------------------------------------------------------------------------- /Divya/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Divya/readme.png -------------------------------------------------------------------------------- /Divya/readme1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Divya/readme1.png -------------------------------------------------------------------------------- /FabianCristancho/README.md: -------------------------------------------------------------------------------- 1 | # Profile Preview 2 | ![screenshot](./images/design.png) -------------------------------------------------------------------------------- /FabianCristancho/images/bg-pattern-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /FabianCristancho/images/bg-pattern-card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /FabianCristancho/images/bg-pattern-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /FabianCristancho/images/design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/FabianCristancho/images/design.png -------------------------------------------------------------------------------- /FabianCristancho/images/fabian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/FabianCristancho/images/fabian.jpg -------------------------------------------------------------------------------- /FabianCristancho/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/FabianCristancho/images/icon.png -------------------------------------------------------------------------------- /FabianCristancho/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Fabian Cristancho's Profile Card 13 | 14 | 15 | 16 | 17 |
18 | bg-pattern-top 19 |
20 |
21 | bg-pattern-top 22 |
23 |
24 |
25 |
26 | Pattern Card 27 |
28 |
29 |
30 | Fabian 31 |
32 |

Fabian Cristancho   23

33 |

Computer and systems Engineer

34 |

Colombia

35 |
36 |
37 |
38 | 55 |
56 |
57 |
58 |
59 | Coded by Fabian Cristancho. 60 |
61 | 62 | -------------------------------------------------------------------------------- /FabianCristancho/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(25, 161, 173); 3 | padding: 0%; 4 | margin: 0%; 5 | } 6 | 7 | .container { 8 | height: 90vh; 9 | position: relative; 10 | padding: 0%; 11 | margin: 0%; 12 | } 13 | 14 | .card { 15 | background-color: white; 16 | text-align: center; 17 | width: 22%; 18 | margin: 0; 19 | position: absolute; 20 | top: 50%; 21 | left: 50%; 22 | -ms-transform: translate(-50%, -50%); 23 | transform: translate(-50%, -50%); 24 | border-radius: 5%; 25 | } 26 | 27 | .top-profile img{ 28 | width: 100%; 29 | border-radius: 1em 1em 0 0; 30 | } 31 | 32 | .info { 33 | margin-bottom: -5%; 34 | } 35 | 36 | .info img { 37 | margin: 0%; 38 | padding: 0%; 39 | margin: auto; 40 | border-radius: 100%; 41 | border: white solid 5px; 42 | -ms-transform: translate(0%, -50%); 43 | transform: translate(0%, -50%); 44 | width: 25%; 45 | } 46 | 47 | .info .personal-data{ 48 | margin: auto; 49 | padding: 0%; 50 | -ms-transform: translate(0%, -50%); 51 | transform: translate(0%, -50%); 52 | } 53 | 54 | .personal-data p { 55 | font-family: 'Kumbh Sans', sans-serif; 56 | margin: 0; 57 | padding: 0; 58 | } 59 | 60 | .personal-data .name { 61 | font-size: 5wh; 62 | font-weight: 700; 63 | color: hsl(229, 23%, 23%) 64 | } 65 | 66 | .personal-data .age { 67 | font-weight: 400; 68 | color: gray; 69 | } 70 | 71 | .personal-data .colombia { 72 | font-size: 0.7em; 73 | font-weight: 400; 74 | margin-top: 4%; 75 | color: gray; 76 | } 77 | 78 | .social { 79 | display: grid; 80 | grid-template-areas: "linkedin instagram photos"; 81 | margin-bottom: 3%; 82 | padding: 15px 10px; 83 | background-color: rgb(221, 214, 214); 84 | } 85 | 86 | .fa-linkedin { 87 | color: #007bb5; 88 | } 89 | 90 | .fa-square-instagram { 91 | color: #FF5341; 92 | } 93 | 94 | .fa-square-twitter { 95 | color: #55ACEE; 96 | } 97 | 98 | .social p { 99 | font-family: 'Kumbh Sans', sans-serif; 100 | color: hsl(229, 23%, 23%); 101 | } 102 | 103 | .social .number { 104 | font-weight: 700; 105 | margin-bottom: 0%; 106 | font-size: 2.5vh; 107 | } 108 | 109 | .social .items { 110 | margin-top: 5%; 111 | font-size: 1.5vh; 112 | } 113 | 114 | .linkedin{ 115 | grid-area: "linkedin"; 116 | } 117 | 118 | .icon { 119 | font-size: 35px; 120 | } 121 | 122 | .instagram { 123 | grid-area: "instagram"; 124 | } 125 | 126 | .photos { 127 | grid-area: "photos"; 128 | } 129 | 130 | .bg-pattern-top { 131 | position: fixed; 132 | z-index: -1; 133 | -ms-transform: translate(-20%, -50%); 134 | transform: translate(-20%, -50%); 135 | width: 100%; 136 | } 137 | 138 | .bg-pattern-bottom { 139 | position: fixed; 140 | z-index: -1; 141 | -ms-transform: translate(50%, 30%); 142 | transform: translate(50%, 30%); 143 | width: 100%; 144 | } 145 | 146 | .attribution { 147 | text-align: center; 148 | font-family: 'Kumbh Sans', sans-serif; 149 | height: 10vh; 150 | line-height: 10vh; 151 | background-color: rgba(255, 255, 255, 0.5); 152 | color: #2158AD; 153 | font-size: 1em; 154 | } 155 | 156 | .attribution a { 157 | color: #2158AD; 158 | text-decoration: none; 159 | font-weight: 700; 160 | } 161 | 162 | .attribution a:hover { 163 | text-decoration: underline; 164 | } 165 | 166 | 167 | /* Pantallas de tamaño máximo de 1160 píxeles */ 168 | @media screen and (max-width: 1160px) { 169 | .bg-pattern-top { 170 | position: fixed; 171 | z-index: -1; 172 | -ms-transform: translate(-30%, -50%); 173 | transform: translate(-30%, -50%); 174 | width: 100%; 175 | } 176 | 177 | .bg-pattern-bottom { 178 | position: fixed; 179 | z-index: -1; 180 | -ms-transform: translate(50%, 30%); 181 | transform: translate(50%, 30%); 182 | width: 100%; 183 | } 184 | } 185 | 186 | /* Pantallas de tamaño máximo de 1080 píxeles */ 187 | @media screen and (max-width: 1080px) { 188 | .card { 189 | width: 30%; 190 | } 191 | } 192 | 193 | /* Pantallas de tamaño máximo de 830 píxeles */ 194 | @media screen and (max-width: 830px) { 195 | .card { 196 | width: 50%; 197 | } 198 | 199 | .bg-pattern-top { 200 | position: fixed; 201 | z-index: -1; 202 | -ms-transform: translate(-80%, -50%); 203 | transform: translate(-80%, -50%); 204 | width: 100%; 205 | } 206 | 207 | .bg-pattern-bottom { 208 | position: fixed; 209 | z-index: -1; 210 | -ms-transform: translate(50%, 30%); 211 | transform: translate(50%, 30%); 212 | width: 100%; 213 | } 214 | } 215 | 216 | /* Pantallas de tamaño máximo de 620 píxeles */ 217 | @media screen and (max-width: 620px) { 218 | .bg-pattern-top { 219 | position: fixed; 220 | z-index: -1; 221 | -ms-transform: translate(-113%, -50%); 222 | transform: translate(-113%, -50%); 223 | width: 100%; 224 | } 225 | } 226 | 227 | /* Pantallas de tamaño máximo de 470 píxeles */ 228 | @media screen and (max-width: 470px) { 229 | .card { 230 | width: 90%; 231 | } 232 | 233 | .bg-pattern-top { 234 | position: fixed; 235 | z-index: -1; 236 | -ms-transform: translate(-180%, -50%); 237 | transform: translate(-180%, -50%); 238 | width: 100%; 239 | } 240 | 241 | .attribution { 242 | font-size: 15px; 243 | } 244 | } 245 | 246 | /* Pantallas de tamaño máximo de 470 píxeles */ 247 | @media screen and (max-width: 440px) { 248 | .attribution { 249 | font-size: 10px; 250 | } 251 | } 252 | 253 | /* Pantallas de tamaño máximo de 375 píxeles */ 254 | @media screen and (max-width: 375px) { 255 | .container{ 256 | margin: auto; 257 | width: 98%; 258 | } 259 | 260 | .bg-pattern-top { 261 | -ms-transform: translate(-210%, -50%); 262 | transform: translate(-210%, -50%); 263 | width: 100%; 264 | } 265 | 266 | .bg-pattern-bottom { 267 | -ms-transform: translate(50%, 15%); 268 | transform: translate(50%, 15%); 269 | width: 100%; 270 | } 271 | } 272 | 273 | /* Pantallas de tamaño máximo de 375 píxeles */ 274 | @media screen and (max-height: 300px) { 275 | .card { 276 | width: 50vw; 277 | height: 50vh; 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /Gagan/README.md: -------------------------------------------------------------------------------- 1 | ![](./gaganpf.png) -------------------------------------------------------------------------------- /Gagan/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Noto Sans', sans-serif; 5 | } 6 | 7 | body { 8 | background: linear-gradient(to right, #9966cb, #a3a2db); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | } 16 | 17 | main { 18 | height: 500px; 19 | width: 500px; 20 | text-align: center; 21 | background-color: #f5f5f5; 22 | border-radius: 25px; 23 | filter: drop-shadow(0 0 20px #d9d9d9); 24 | } 25 | 26 | main img { 27 | width: 300px; 28 | height: 300px; 29 | border-radius: 50%; 30 | border: 2px solid #333; 31 | padding: 5px 0; 32 | margin: 15px 0; 33 | } 34 | 35 | main p { 36 | margin: 15px 0; 37 | } 38 | 39 | main p a, 40 | main p a:visited, 41 | main p a:active, 42 | main p a:hover { 43 | background: linear-gradient(to right, #9966cb, #a3a2db); 44 | color: #f5f5f5; 45 | border-radius: 50%; 46 | padding: 10px; 47 | font-size: 20px; 48 | margin: 7px 5px; 49 | } -------------------------------------------------------------------------------- /Gagan/gaganpf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Gagan/gaganpf.png -------------------------------------------------------------------------------- /Gagan/images/gagan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Gagan/images/gagan.png -------------------------------------------------------------------------------- /Gagan/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Gagan Chordia 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | My Image 19 |

Gagan Chordia

20 |

21 |

22 | 23 | 24 | 25 |

26 |
27 | 35 | 36 | -------------------------------------------------------------------------------- /Harsh/README.md: -------------------------------------------------------------------------------- 1 | image.png -------------------------------------------------------------------------------- /Harsh/harsh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Harsh 8 | 9 | 10 | 11 |
12 |
13 | profile 14 |
15 |
16 |

Harsh

17 |

Software Enginner || Tech Enthusiast

18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /Harsh/img/harsh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Harsh/img/harsh.png -------------------------------------------------------------------------------- /Harsh/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | height: 100vh; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | background: linear-gradient(45deg, white, gray, black, rgb(152, 58, 58), blue, yellow); 12 | animation:bgAnimate 15s ease infinite ; 13 | background-size: 400% 400%; 14 | } 15 | 16 | @keyframes bgAnimate { 17 | 0% { 18 | background-position: 0% 50%; 19 | } 20 | 25% { 21 | background-position: 50% 100%; 22 | } 23 | 75% { 24 | background-position: 100% 50%; 25 | } 26 | 100%{ 27 | background-position: 50% 0%; 28 | } 29 | } 30 | 31 | img{ 32 | width: 150px; 33 | height: 150px; 34 | border-radius: 50%; 35 | } 36 | .img-container{ 37 | height: 200px; 38 | width: 200px; 39 | border-radius: 10px; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | /* box-shadow: 5px 10px 18px #888888; */ 44 | box-shadow: 5px 10px 18px #57cc99; 45 | } 46 | .main{ 47 | width: 500px; 48 | height: 500px; 49 | background-image: url('https://media.istockphoto.com/photos/abstract-futuristic-background-with-a-pedestal-picture-id1311473275?b=1&k=20&m=1311473275&s=170667a&w=0&h=TQrpH65THptzwZHrMLx6Z5ItaG3aG2rCIYNt8l59NQk='); 50 | border-radius: 10px; 51 | display: flex; 52 | justify-content: space-between; 53 | align-items: center; 54 | gap: 70px; 55 | flex-direction: column; 56 | box-shadow: 5px 10px 18px #ccc7c7; 57 | } 58 | .text{ 59 | width: 400px; 60 | height: 100px; 61 | background-color: #38a3a5; 62 | border-radius: 10px; 63 | color: #ffffff; 64 | font-weight: 500; 65 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | flex-direction: column; 70 | gap: 15px; 71 | margin-bottom: 20px; 72 | font-size: 20px; 73 | /* box-shadow: 5px 10px 18px #57cc99; */ 74 | } 75 | -------------------------------------------------------------------------------- /Harsha-Bajaj/README.md: -------------------------------------------------------------------------------- 1 | ![](./bajaj.png) -------------------------------------------------------------------------------- /Harsha-Bajaj/bajaj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Harsha-Bajaj/bajaj.png -------------------------------------------------------------------------------- /Harsha-Bajaj/img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Harsha-Bajaj/img.jpeg -------------------------------------------------------------------------------- /Harsha-Bajaj/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Harsha Bajaj 9 | 10 | 11 | 12 |
13 |

Harsha Bajaj

14 |
15 | 16 |
17 |
18 |

Front End Developer | Student | Learner

19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /Harsha-Bajaj/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | html,body { 7 | background-color: #6E7889; 8 | font-family: tahoma, sans-serif; 9 | color: #E6EBEE; 10 | } 11 | 12 | #card { 13 | background-color: #393B45; 14 | height: auto; 15 | width: 350px; 16 | margin: 10vh auto; 17 | border-radius: 25px; 18 | padding-bottom: 1px; 19 | box-shadow: 2px 2px 5px #4069E2; 20 | } 21 | 22 | h1 { 23 | color: white; 24 | text-align: center; 25 | width: 100%; 26 | background-color: #E6EBEE; 27 | border-radius: 25px 25px 0 0; 28 | color: #393B45; 29 | padding: 30px 0; 30 | font-weight: 800; 31 | margin: 0; 32 | } 33 | 34 | .image-crop { 35 | display: block; 36 | position: relative; 37 | background-color: #E6EBEE; 38 | width: 150px; 39 | height: 150px; 40 | margin: 0 auto; 41 | margin-top: 30px; 42 | overflow: hidden; 43 | border-radius: 50%; 44 | box-shadow: 1px 1px 5px #4069E2; 45 | } 46 | .image-crop img{ 47 | position: relative; 48 | bottom: 50px; 49 | left: 20px; 50 | } 51 | #avatar { 52 | display: inline; 53 | height: 230px; 54 | width: auto; 55 | margin-left: -34px; 56 | } 57 | 58 | #bio { 59 | display: block; 60 | margin: 30px auto; 61 | width: 280px; 62 | height: auto; 63 | text-align: center; 64 | } 65 | 66 | .stat { 67 | font-size: 25px; 68 | margin: 0; 69 | } 70 | 71 | .label { 72 | margin: 0; 73 | } 74 | 75 | #buttons { 76 | display: flex; 77 | margin: 0 auto; 78 | justify-content: space-between; 79 | width: 280px; 80 | } 81 | #buttons a{ 82 | color: white; 83 | } 84 | #buttons a:active{ 85 | color: white; 86 | } 87 | button { 88 | display: block; 89 | position: relative; 90 | padding: 10px 0; 91 | width: 100px; 92 | margin: 30px 5px; 93 | border-radius: 25px; 94 | border: none; 95 | font-size: 20px; 96 | letter-spacing: 0.2px; 97 | font-weight: 500; 98 | background-color: #4069E2; 99 | color: #E6EBEE; 100 | } 101 | 102 | button:focus { 103 | display: none; 104 | } 105 | 106 | button:hover { 107 | transform: scale(1.03); 108 | cursor: pointer; 109 | transition: all 0.2s ease-in-out; 110 | } 111 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Buddhadeb Chhetri 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Lokesh/README.md: -------------------------------------------------------------------------------- 1 | image.png -------------------------------------------------------------------------------- /Lokesh/lokesh.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url(https://media3.giphy.com/media/26tn33aiTi1jkl6H6/giphy.gif); 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 400px; 22 | color: aquamarine; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: sepia(15px); 30 | box-shadow: 15px 10px 18px coral; 31 | } 32 | 33 | .card img{ 34 | width: 140px; 35 | border-radius: 50%; 36 | font-weight: 600; 37 | margin-top: 20px; 38 | } 39 | 40 | .card p{ 41 | font-size: 18px; 42 | margin: 10px auto; 43 | max-width: 330px; 44 | } 45 | 46 | .card .links img{ 47 | width: 40px; 48 | border-radius: 50%; 49 | margin: 10px 5px; 50 | transition: background 0.1s; 51 | } 52 | 53 | .card .links img:hover{ 54 | background: #ffffff; 55 | box-shadow: 0 0 10px rgb(169, 205, 235); 56 | } 57 | .skills { 58 | box-shadow: 0 0 10px rgb(169, 205, 235); 59 | border-radius: 10px; 60 | text-align: left; 61 | color:bisque; 62 | font-size: 18px; 63 | padding: 15px; 64 | margin-top: 30px; 65 | } 66 | .skills ul { 67 | list-style-type: none; 68 | margin: 0; 69 | padding: 0; 70 | } 71 | 72 | .skills ul li { 73 | border: 1px solid white; 74 | border-radius: 2px; 75 | display: inline-block; 76 | font-size: 12px; 77 | margin: 0 7px 7px 0; 78 | padding: 7px; 79 | } 80 | 81 | .btn{ 82 | text-decoration: none; 83 | display: inline-block; 84 | font-size: 18px; 85 | font-weight: 500; 86 | background-color: transparent; 87 | border: 1px solid white; 88 | color: #fff; 89 | padding: 10px 30px; 90 | border-radius: 30px; 91 | margin: 30px 0 10px; 92 | } 93 | 94 | .btn:hover{ 95 | cursor: pointer; 96 | background-color: green; 97 | font-weight: medium; 98 | box-shadow: 0 0 10px rgb(169, 205, 235); 99 | color: black; 100 | } -------------------------------------------------------------------------------- /Lokesh/lokesh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |

Loeksh Rathore

15 |

Computer Science Student

16 |

Vellore Institute of Technology

17 |
18 | 19 | 20 |
21 |
22 |
Skills
23 |
    24 |
  • Full Stack development
    • 25 |
  • Data Structures
    • 26 |
  • Algorithms
    • 27 |
  • C++
    • 28 |
29 |
30 | Contact me 31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /MitalSapkale/img/SquareQuick_202012416910400.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/MitalSapkale/img/SquareQuick_202012416910400.jpg -------------------------------------------------------------------------------- /MitalSapkale/img/profileTamplete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/MitalSapkale/img/profileTamplete.png -------------------------------------------------------------------------------- /MitalSapkale/mital.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | height: 100vh; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | img{ 13 | width: 150px; 14 | height: 150px; 15 | border-radius: 50%; 16 | } 17 | .img-container{ 18 | height: 200px; 19 | width: 200px; 20 | background-color: #80ed99; 21 | border-radius: 10px; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | /* box-shadow: 5px 10px 18px #888888; */ 26 | box-shadow: 5px 10px 18px #57cc99; 27 | } 28 | .main{ 29 | width: 500px; 30 | height: 500px; 31 | background-color: #c7f9cc; 32 | border-radius: 10px; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | gap: 70px; 37 | flex-direction: column; 38 | box-shadow: 5px 10px 18px #ccc7c7; 39 | } 40 | .text{ 41 | width: 450px; 42 | height: 100px; 43 | background-color: #38a3a5; 44 | border-radius: 10px; 45 | color: #ffffff; 46 | font-weight: 500; 47 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | flex-direction: column; 52 | gap: 15px; 53 | font-size: 20px; 54 | box-shadow: 5px 10px 18px #57cc99; 55 | } 56 | -------------------------------------------------------------------------------- /MitalSapkale/mital.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mital Sapkale 8 | 9 | 10 | 11 |
12 |
13 | profile 14 |
15 |
16 |

Mital Sapkale

17 |

frontEnd devlopment || Linux enthusiasm

18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /NwekeGoddy/images/Hacktoberfest1111.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/NwekeGoddy/images/Hacktoberfest1111.PNG -------------------------------------------------------------------------------- /NwekeGoddy/images/Nweke_chidi_pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/NwekeGoddy/images/Nweke_chidi_pic.png -------------------------------------------------------------------------------- /NwekeGoddy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chidi's Profile Card 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 |

Nweke Chidi

21 |
22 | 26 | 27 |
28 | Frontend Developer 29 |
30 | 31 |
32 | 38 | 39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /NwekeGoddy/readme.md: -------------------------------------------------------------------------------- 1 | # Profile Preview 2 | ![Hacktoberfest1111](https://user-images.githubusercontent.com/95291101/194708014-e9e1d416-4416-448a-bf2d-63046ffa0e9f.PNG) 3 | -------------------------------------------------------------------------------- /NwekeGoddy/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap"); 2 | 3 | 4 | *{ 5 | padding: 0px; 6 | margin: 0px; 7 | height: 100%; 8 | } 9 | 10 | body{ 11 | height: 100%; 12 | background-color: #e5e5f7; 13 | /* opacity: 0.2; */ 14 | background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #e5e5f7 10px ), repeating-linear-gradient( #444cf755, #444cf7 ); 15 | } 16 | 17 | .container { 18 | 19 | width: 100%; 20 | height: 100%; 21 | 22 | /* opacity: 0.8; */ 23 | /* background: transparent; */ 24 | 25 | 26 | 27 | font-family: 'Baloo Paaji 2', cursive; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | justify-content: center; 32 | } 33 | 34 | .card { 35 | padding: 30px; 36 | background-color: #222831; 37 | height: 37rem; 38 | border-radius: 5px; 39 | display: flex; 40 | flex-direction: column; 41 | align-items: center; 42 | justify-content: center; 43 | box-shadow: rgba(0, 0, 0, 0.7); 44 | color: white; 45 | } 46 | 47 | .card__name { 48 | margin-top: 15px; 49 | font-size: 1.5em; 50 | } 51 | 52 | .card img{ 53 | height: 160px; 54 | width: 160px; 55 | border-radius: 50%; 56 | border: 5px solid #272133; 57 | margin-top: 20px; 58 | box-shadow: 0 10px 50px rgba(235, 25, 110, 1); 59 | object-fit: cover; 60 | } 61 | 62 | 63 | .draw-border { 64 | box-shadow: inset 0 0 0 4px #58cdd1; 65 | color: #58afd1; 66 | -webkit-transition: color 0.25s 0.0833333333s; 67 | transition: color 0.25s 0.0833333333s; 68 | position: relative; 69 | } 70 | 71 | .draw-border::before, 72 | .draw-border::after { 73 | border: 0 solid transparent; 74 | box-sizing: border-box; 75 | content: ''; 76 | pointer-events: none; 77 | position: absolute; 78 | width: 0rem; 79 | height: 0; 80 | bottom: 0; 81 | right: 0; 82 | } 83 | 84 | .draw-border::before { 85 | border-bottom-width: 4px; 86 | border-left-width: 4px; 87 | } 88 | 89 | .draw-border::after { 90 | border-top-width: 4px; 91 | border-right-width: 4px; 92 | } 93 | 94 | .draw-border:hover { 95 | color: #ffe593; 96 | } 97 | 98 | .draw-border:hover::before, 99 | .draw-border:hover::after { 100 | border-color: #eb196e; 101 | -webkit-transition: border-color 0s, width 0.25s, height 0.25s; 102 | transition: border-color 0s, width 0.25s, height 0.25s; 103 | width: 100%; 104 | height: 100%; 105 | } 106 | 107 | .draw-border:hover::before { 108 | -webkit-transition-delay: 0s, 0s, 0.25s; 109 | transition-delay: 0s, 0s, 0.25s; 110 | } 111 | 112 | .draw-border:hover::after { 113 | -webkit-transition-delay: 0s, 0.25s, 0s; 114 | transition-delay: 0s, 0.25s, 0s; 115 | } 116 | 117 | .btn{ 118 | background: none; 119 | border: none; 120 | cursor: pointer; 121 | line-height: 1.5; 122 | font: 700 1.2rem 'Roboto Slab', sans-serif; 123 | padding: 0.75em 2em; 124 | letter-spacing: 0.05rem; 125 | margin: 1em; 126 | width: 13rem; 127 | } 128 | 129 | .btn a{ 130 | text-decoration: none; 131 | color: #fffff3; 132 | } 133 | .btn:focus { 134 | outline: 2px dotted #55d7dc; 135 | } 136 | 137 | 138 | .social-icons { 139 | padding: 0; 140 | list-style: none; 141 | margin: 1em; 142 | } 143 | 144 | .social-icons li { 145 | display: inline-block; 146 | margin: 0.15em; 147 | position: relative; 148 | font-size: 1em; 149 | } 150 | 151 | .social-icons i { 152 | color: #fff; 153 | position: absolute; 154 | top: 0.95em; 155 | left: 0.96em; 156 | transition: all 265ms ease-out; 157 | } 158 | 159 | .social-icons a { 160 | display: inline-block; 161 | } 162 | 163 | .social-icons a:before { 164 | transform: scale(1); 165 | -ms-transform: scale(1); 166 | -webkit-transform: scale(1); 167 | content: " "; 168 | width: 45px; 169 | height: 45px; 170 | border-radius: 100%; 171 | display: block; 172 | background: linear-gradient(45deg, #ff003c, #c648c8); 173 | transition: all 265ms ease-out; 174 | } 175 | 176 | .social-icons a:hover:before { 177 | transform: scale(0); 178 | transition: all 265ms ease-in; 179 | } 180 | 181 | .social-icons a:hover i { 182 | transform: scale(2.2); 183 | -ms-transform: scale(2.2); 184 | -webkit-transform: scale(2.2); 185 | color: #ff003c; 186 | background: -webkit-linear-gradient(45deg, #ff003c, #c648c8); 187 | -webkit-background-clip: text; 188 | -webkit-text-fill-color: transparent; 189 | transition: all 265ms ease-in; 190 | } 191 | 192 | .grid-container { 193 | display: grid; 194 | grid-template-columns: 1fr; 195 | grid-gap: 20px; 196 | font-size: 1.2em; 197 | } 198 | 199 | .grid-child-followers{ 200 | display: flex; 201 | flex-direction: row; 202 | align-items: center; 203 | justify-content: center; 204 | } 205 | -------------------------------------------------------------------------------- /Piyush/README.md: -------------------------------------------------------------------------------- 1 | ![screenshot](https://user-images.githubusercontent.com/96428820/194603832-0642e3e5-5235-4d0a-b6ea-5fd89ae9b875.png) 2 | -------------------------------------------------------------------------------- /Piyush/images/IMG_20220506_021038_424.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Piyush/images/IMG_20220506_021038_424.jpg -------------------------------------------------------------------------------- /Piyush/images/Screenshot at 2022-10-07 21-56-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Piyush/images/Screenshot at 2022-10-07 21-56-57.png -------------------------------------------------------------------------------- /Piyush/piyush.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-color: rgb(0, 0, 0); 12 | background-image: url(https://media.giphy.com/media/AOSwwqVjNZlDO/giphy.gif); 13 | background-repeat: repeat; 14 | background-position: center; 15 | background-size: cover; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .card{ 22 | width: 90%; 23 | max-width: 440px; 24 | color: #fff; 25 | text-align: center; 26 | padding: 50px 35px; 27 | border: 1px solid rgba(255, 255, 255, 0.3); 28 | background: rgba(255,255,255,0.2); 29 | border-radius: 16px; 30 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 31 | backdrop-filter: blur(5px); 32 | } 33 | 34 | .card img{ 35 | width: 140px; 36 | border-radius: 50%; 37 | font-weight: 600; 38 | margin-top: 20px; 39 | } 40 | 41 | .card p{ 42 | font-size: 18px; 43 | margin: 10px auto; 44 | max-width: 330px; 45 | } 46 | 47 | .card .links img{ 48 | width: 40px; 49 | border-radius: 50%; 50 | margin: 10px 5px; 51 | transition: background 0.5s; 52 | } 53 | 54 | .card .links img:hover{ 55 | background: #ffffff; 56 | box-shadow: 0 0 10px rgb(169, 205, 235); 57 | } 58 | 59 | .btn{ 60 | text-decoration: none; 61 | display: inline-block; 62 | font-size: 18px; 63 | font-weight: 500; 64 | background-color: transparent; 65 | border: 1px solid white; 66 | color: #fff; 67 | padding: 10px 30px; 68 | border-radius: 30px; 69 | margin: 30px 0 10px; 70 | } 71 | 72 | .btn:hover{ 73 | cursor: pointer; 74 | background-color: white; 75 | font-weight: medium; 76 | box-shadow: 0 0 10px rgb(169, 205, 235); 77 | color: #137570; 78 | } -------------------------------------------------------------------------------- /Piyush/piyush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | image 13 |

Piyush Kumar Das

14 |

Information Technology | Student at ITER Bhubaneshwar | Goal set for Cybersecurity

15 |
16 | 17 | 18 | 19 |
20 | Contact me 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Pratap360/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Short profile with HTML, CSS. 3 | 4 | ## Screenshots: 5 | 6 | ![Screenshot](https://github.com/pratap360/Short-Profile-With-HTML-CSS/blob/main/Pratap360/img/ss%20of%20profile.jpg) 7 | -------------------------------------------------------------------------------- /Pratap360/img/github profile img.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Pratap360/img/github profile img.jfif -------------------------------------------------------------------------------- /Pratap360/img/ss of profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Pratap360/img/ss of profile.jpg -------------------------------------------------------------------------------- /Pratap360/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pratap Parui 8 | 9 | 10 | 11 |
12 |
13 | profile 14 |
15 |
16 |

Pratap Parui

17 |

FrontEnd Devloper , UI/UX , Blogger & Cloud Computing Enthusiast

18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /Pratap360/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | height: 100vh; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | img{ 13 | width: 150px; 14 | height: 150px; 15 | border-radius: 50%; 16 | } 17 | .img-container{ 18 | height: 200px; 19 | width: 200px; 20 | background-color: #8090ed; 21 | border-radius: 10px; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | /* box-shadow: 5px 10px 18px #888888; */ 26 | box-shadow: 5px 10px 18px #5ab2ecf3; 27 | } 28 | .main{ 29 | width: 500px; 30 | height: 500px; 31 | background-color: #c7f9cc; 32 | border-radius: 10px; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | gap: 70px; 37 | flex-direction: column; 38 | box-shadow: 5px 10px 18px #ccc7c7; 39 | } 40 | .text{ 41 | width: 450px; 42 | height: 140px; 43 | background-color: #38a3a5; 44 | border-radius: 10px; 45 | color: #ffffff; 46 | font-weight: 500; 47 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | flex-direction: column; 52 | gap: 15px; 53 | font-size: 21px; 54 | box-shadow: 5px 10px 18px #577ccc; 55 | } 56 | p.short-info{ 57 | margin: 10px; 58 | text-align: center; 59 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shorted-Profile-With-HTML-CSS 2 | 3 | Make unique and Short profile tamplete using HTML-CSS 4 | 5 |

Start Contributing

6 |
7 | 8 |
9 | 10 | ![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103) 11 | 12 |
13 | 14 |
15 | hacktoberfest22 16 |
17 | 18 |

Table of Contents

19 |
    20 |
  1. Tamplete
    2. 21 |
  2. HTML
    3. 22 |
  3. CSS
    4. 23 |
  4. Pull Requests
    5. 24 |
  5. Design
    6. 25 |
26 | 27 | 28 | ## **Getting Started** 29 | 30 | For the quick start, you can follow the steps below: 31 | 32 | 1. Star this repository. 33 | 2. Fork this repository. 34 | 3. Clone the **forked** repository. 35 | 36 | ```yml 37 | git clone git@github.com:mitalrs/Short-Profile-With-HTML-CSS.git 38 | ``` 39 | 3. Navigate to the project directory. 40 | 41 | ```yml 42 | cd Shorted-Profile-With-HTML-CSS 43 | ``` 44 | 45 | 4. Create a new branch. 46 | 47 | ```yml 48 | git checkout -b 49 | ``` 50 | 51 | Run the following command to install the required dependencies. 52 | 53 | 1. Create your profile as u wish using HTML-CSS 54 | 2. Example: 55 | 56 | profile-tamplete 57 | 58 | 3. Stage your changes and commit 59 | 60 | ```css 61 | git add -a 62 | 63 | git commit -m "" 64 | ``` 65 | 66 | 4. Push your local commits to the remote repo. 67 | 68 | ```yml 69 | git push -u origin 70 | ``` 71 | 72 | 5. Create a Pull-Request to `main`. 73 | 74 | 6. Wait for merge!! 75 | 76 | 77 | ## How to contribute in this repositories? 78 | 79 | - Create Folder with `Your Name` 80 | - In Your Flolder Name Create a file `.html` and `.css` and `README.md` create a profile-tamplete 81 | - Take screenshort of Your Profile-Tamplete and add into your `README.md` file. 82 | - If you want to demo profile-tamplete 83 | - Also add your name into CONTRIBUTING.md 84 | 85 | ##### Note:
do not change any folder except your folder!
do not add any extra folder!
do not create a multiple pull request, done your work in only one pull request! 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /Rahul Sehgal/README.md: -------------------------------------------------------------------------------- 1 | ![](./rahulsingle.png) -------------------------------------------------------------------------------- /Rahul Sehgal/images/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Rahul Sehgal/images/github.jpg -------------------------------------------------------------------------------- /Rahul Sehgal/images/instagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Rahul Sehgal/images/instagram.jpg -------------------------------------------------------------------------------- /Rahul Sehgal/images/linkedin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Rahul Sehgal/images/linkedin.jpg -------------------------------------------------------------------------------- /Rahul Sehgal/images/profile_image_crowninn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Rahul Sehgal/images/profile_image_crowninn.jpg -------------------------------------------------------------------------------- /Rahul Sehgal/rahul.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rahul Sehgal 9 | 10 | 11 | 12 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |

HI THERE !

27 |

I am Rahul Sehgal

28 |

29 | Sophomore at NIT Kurukshetra, Information Technology 30 |

31 |
32 |
33 | 34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |

Reach me via

43 |
44 | Github 45 | linkedin 46 | instagram 47 | 48 |
49 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /Rahul Sehgal/rahulsingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Rahul Sehgal/rahulsingle.png -------------------------------------------------------------------------------- /Rahul Sehgal/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Urbanist:wght@400;600;700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Urbanist", sans-serif; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | li { 14 | list-style: none; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | } 20 | .header { 21 | background: black; 22 | } 23 | 24 | .navbar { 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | padding: 1rem 2rem; 29 | width: 100%; 30 | background: #000; 31 | position: fixed; 32 | z-index: 5; 33 | transition: 00.3s; 34 | } 35 | .navbar a { 36 | color: white; 37 | } 38 | .hamburger { 39 | display: none; 40 | } 41 | 42 | .bar { 43 | display: block; 44 | width: 25px; 45 | height: 3px; 46 | margin: 5px auto; 47 | -webkit-transition: all 0.3s ease-in-out; 48 | transition: all 0.3s ease-in-out; 49 | background-color: white; 50 | } 51 | .nav-menu { 52 | display: flex; 53 | justify-content: space-between; 54 | align-items: center; 55 | padding: 0 3%; 56 | } 57 | 58 | .nav-item { 59 | margin-left: 5rem; 60 | } 61 | 62 | .nav-link { 63 | font-size: 1.3rem; 64 | font-weight: 400; 65 | } 66 | 67 | .nav-link:hover { 68 | color: #f1770f; 69 | } 70 | .nav-logo { 71 | font-size: 2.1rem; 72 | font-weight: 500; 73 | } 74 | 75 | .active { 76 | text-decoration: underline; 77 | text-decoration-color: #f1770f; 78 | } 79 | .landing { 80 | height: 91vh; 81 | color: white; 82 | background-color: black; 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | } 87 | .container { 88 | display: flex; 89 | padding: 50px; 90 | justify-content: space-around; 91 | align-items: center; 92 | width: 100%; 93 | } 94 | .photo { 95 | min-width: 340px; 96 | min-height: 340px; 97 | background-color: #f1770f; 98 | border-radius: 100%; 99 | position: relative; 100 | display: flex; 101 | justify-content: center; 102 | align-items: center; 103 | } 104 | .image{ 105 | min-width: 340px; 106 | min-height: 150px; 107 | /* background-color: #f1770f; */ 108 | border-radius: 100%; 109 | position: relative; 110 | /* display: flex; */ 111 | justify-content: center; 112 | align-items: center; 113 | } 114 | .photo::before { 115 | position: absolute; 116 | content: ""; 117 | left: 0; 118 | top: 0; 119 | right: 0; 120 | bottom: 0; 121 | border: 5px solid #f1770f; 122 | border-radius: 50%; 123 | animation: animate 2s linear infinite; 124 | } 125 | .photo img { 126 | max-width: 250px; 127 | } 128 | .info p:nth-child(1) { 129 | font-size: 1.8rem; 130 | } 131 | .info h2 { 132 | font-size: 3rem; 133 | } 134 | .info span { 135 | color: #f1770f; 136 | } 137 | .details { 138 | font-size: 1.2rem; 139 | margin-top: 10px; 140 | } 141 | 142 | @keyframes animate { 143 | 100% { 144 | transform: scale(1.2); 145 | opacity: 0; 146 | } 147 | } 148 | 149 | @media (max-width: 700px) { 150 | .container { 151 | flex-direction: column-reverse; 152 | } 153 | .photo { 154 | min-width: 300px; 155 | min-height: 300px; 156 | } 157 | .photo img { 158 | max-width: 220px; 159 | } 160 | } 161 | @media only screen and (max-width: 768px) { 162 | .nav-menu { 163 | position: fixed; 164 | left: -100%; 165 | top: 5rem; 166 | flex-direction: column; 167 | background-color: #fff; 168 | width: 100%; 169 | border-radius: 10px; 170 | text-align: center; 171 | transition: 0.3s; 172 | box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); 173 | text-decoration: none; 174 | } 175 | 176 | .nav-menu.active { 177 | left: 0; 178 | background: black; 179 | z-index: 100; 180 | } 181 | 182 | .nav-item { 183 | margin: 2.5rem 0; 184 | } 185 | 186 | .hamburger { 187 | display: block; 188 | cursor: pointer; 189 | } 190 | .hamburger.active .bar:nth-child(2) { 191 | opacity: 0; 192 | } 193 | 194 | .hamburger.active .bar:nth-child(1) { 195 | transform: translateY(8px) rotate(45deg); 196 | } 197 | 198 | .hamburger.active .bar:nth-child(3) { 199 | transform: translateY(-8px) rotate(-45deg); 200 | } 201 | .switch { 202 | margin-top: 15px; 203 | margin-left: 0px; 204 | } 205 | .landing{ 206 | padding-top: 8rem; 207 | } 208 | } 209 | 210 | .skills { 211 | width: 100%; 212 | min-height: 100vh; 213 | background-color: black; 214 | color: white; 215 | display: flex; 216 | align-items: center; 217 | justify-content: center; 218 | flex-direction: column; 219 | } 220 | .skills h1 { 221 | font-size: 40px; 222 | } 223 | .skills_card_container { 224 | width: 100%; 225 | display: flex; 226 | align-items: center; 227 | justify-content: space-evenly; 228 | padding: 30px; 229 | flex-wrap: wrap; 230 | } 231 | .skill_card { 232 | width: 100%; 233 | max-width: 400px; 234 | margin: 20px; 235 | padding: 60px 40px; 236 | text-align: center; 237 | min-height: 40vh; 238 | display: flex; 239 | align-items: center; 240 | justify-content: center; 241 | flex-direction: column; 242 | text-overflow: ellipsis; 243 | background-color: rgb(22, 22, 22); 244 | cursor: pointer; 245 | transition: all 0.5s ease; 246 | } 247 | .skill_card h3 { 248 | font-size: 30px; 249 | } 250 | .skill_card p { 251 | font-weight: 100; 252 | } 253 | .skill_card:hover { 254 | transition: all 0.5s ease; 255 | background-color: #ff8e2b; 256 | box-shadow: 2px 5px 10px #a74e00; 257 | color: black; 258 | } 259 | .experiences { 260 | width: 100%; 261 | min-height: 100vh; 262 | background-color: black; 263 | color: white; 264 | display: flex; 265 | align-items: center; 266 | justify-content: center; 267 | flex-direction: column; 268 | } 269 | .exp h1 { 270 | font-size: 40px; 271 | } 272 | .exp_card_container { 273 | width: 100%; 274 | display: flex; 275 | align-items: center; 276 | justify-content: space-evenly; 277 | padding: 30px; 278 | flex-wrap: wrap; 279 | } 280 | .exp_card { 281 | width: 100%; 282 | max-width: 400px; 283 | margin: 20px; 284 | padding: 60px 40px; 285 | text-align: center; 286 | min-height: 40vh; 287 | display: flex; 288 | align-items: center; 289 | justify-content: center; 290 | flex-direction: column; 291 | text-overflow: ellipsis; 292 | background-color: rgb(22, 22, 22); 293 | cursor: pointer; 294 | transition: all 0.5s ease; 295 | } 296 | .exp_card h3 { 297 | font-size: 30px; 298 | } 299 | .exp_card p { 300 | font-weight: 100; 301 | } 302 | .exp_card:hover { 303 | transition: all 0.5s ease; 304 | background-color: #ff8e2b; 305 | box-shadow: 2px 5px 10px #a74e00; 306 | color: black; 307 | } 308 | 309 | footer { 310 | background-color: #f1770f; 311 | display: flex; 312 | justify-content: center; 313 | align-items: center; 314 | flex-direction: column; 315 | gap: 1em; 316 | padding: 1.5em 0; 317 | } 318 | 319 | .Contact-text { 320 | font-size: 1.5em; 321 | font-weight: 800; 322 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 323 | } 324 | 325 | .img-container a img { 326 | height: 35px; 327 | color: black; 328 | padding: 0 0.8em; 329 | } 330 | 331 | .terms { 332 | color: rgb(62, 62, 62); 333 | } 334 | 335 | @media (max-width: 530px) { 336 | .skill_card { 337 | width: 100%; 338 | max-width: auto; 339 | margin: 20px 0; 340 | } 341 | .skills_card_container { 342 | padding: 20px 0; 343 | } 344 | } -------------------------------------------------------------------------------- /Raunak/README.md: -------------------------------------------------------------------------------- 1 | Screenshot (166).png![Screenshot (166)](https://user-images.githubusercontent.com/95216822/194227266-7e69ef2e-e8ca-49ae-90fb-35b3eef6ed1b.png) 2 | -------------------------------------------------------------------------------- /Raunak/Raunak.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url(https://1.bp.blogspot.com/-fyF-OXXEBBY/X1altgmlwQI/AAAAAAAA66s/KVb5Fjlb_f41xu_pEjq5VpDhRWr2QbJFACLcBGAsYHQ/s2560/hexagon-blender-4k-22-3840x2160.jpg); /* You can change background here*/ 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 440px; 22 | color: #fff; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: blur(5px); 30 | } 31 | 32 | .card img{ 33 | width: 140px; 34 | border-radius: 50%; 35 | font-weight: 600; 36 | margin-top: 20px; 37 | } 38 | 39 | .card p{ 40 | font-size: 18px; 41 | margin: 10px auto; 42 | max-width: 330px; 43 | } 44 | 45 | .card .links img{ 46 | width: 40px; 47 | border-radius: 50%; 48 | margin: 10px 5px; 49 | transition: background 0.5s; 50 | } 51 | 52 | .card .links img:hover{ 53 | background: #ffffff; 54 | box-shadow: 0 0 10px rgb(169, 205, 235); 55 | } 56 | 57 | .btn{ 58 | text-decoration: none; 59 | display: inline-block; 60 | font-size: 18px; 61 | font-weight: 500; 62 | background-color: transparent; 63 | border: 1px solid white; 64 | color: #fff; 65 | padding: 10px 30px; 66 | border-radius: 30px; 67 | margin: 30px 0 10px; 68 | } 69 | 70 | .btn:hover{ 71 | cursor: pointer; 72 | background-color: white; 73 | font-weight: medium; 74 | box-shadow: 0 0 10px rgb(169, 205, 235); 75 | color: #137570; 76 | } -------------------------------------------------------------------------------- /Raunak/Raunak.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |

Raunak Kumar Gupta

14 |

Full Stack Web Developer | Sophomore at IIT Patna | Tech Lead at GDSC, IIT Patna

15 |
16 | 17 | 18 | 19 |
20 | Contact me 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Shital/Img/Facebook.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shital/Img/Facebook.PNG -------------------------------------------------------------------------------- /Shital/Img/Github.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shital/Img/Github.PNG -------------------------------------------------------------------------------- /Shital/Img/Instagram.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shital/Img/Instagram.PNG -------------------------------------------------------------------------------- /Shital/Img/Twitter.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shital/Img/Twitter.PNG -------------------------------------------------------------------------------- /Shital/Img/profilephoto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shital/Img/profilephoto.jpg -------------------------------------------------------------------------------- /Shital/Readme.md: -------------------------------------------------------------------------------- 1 | # Short profile with HTML, CSS. 2 | 3 | ## Screenshots: 4 | 5 | (![Screenshot](https://user-images.githubusercontent.com/78207465/196002489-bc0152ee-158b-4b08-84ec-f6f90091fdf4.PNG)) -------------------------------------------------------------------------------- /Shital/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Shital Punde

15 |

My name is Shital Punde.I'm a Full Time Web Developer.

16 | 17 |
18 | 19 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /Shital/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | background-color: rgb(21, 21, 20); 10 | } 11 | .container{ 12 | padding:30px; 13 | width:350px; 14 | height: 500px; 15 | background-color: rgb(70, 68, 68); 16 | position: absolute; 17 | top:5%; 18 | left:35%; 19 | box-shadow: rgba(105, 103, 103, 0.35) 0px 5px 15px; 20 | } 21 | .container::before { 22 | position: absolute; 23 | content: ""; 24 | width: calc(100% + 4px); 25 | height: calc(100% + 4px); 26 | left: -2px; 27 | top: -2px; 28 | background: linear-gradient( 29 | 124deg, 30 | #ff2400, 31 | #e81d1d, 32 | #e8b71d, 33 | #e3e81d, 34 | #1de840, 35 | #1ddde8, 36 | #2b1de8, 37 | #dd00f3, 38 | #dd00f3 39 | ); 40 | background-size: 400%; 41 | z-index: -1; 42 | filter: blur(5px); 43 | animation: move 20s linear infinite; 44 | opacity: 0; 45 | transition: opacity 0.3s ease-in-out; 46 | border-radius: 10px; 47 | } 48 | 49 | .container:hover::before { 50 | opacity: 1; 51 | } 52 | 53 | .container::after { 54 | z-index: -1; 55 | content: ""; 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | background: #555273; 60 | left: 0; 61 | top: 0; 62 | border-radius: 10px; 63 | } 64 | 65 | @keyframes move { 66 | 0% { 67 | background-position: 0 0; 68 | } 69 | 50% { 70 | background-position: 400% 0; 71 | } 72 | 100% { 73 | background-position: 0 0; 74 | } 75 | } 76 | 77 | .container .content img{ 78 | width:150px; 79 | height: 150px; 80 | border-radius: 50%; 81 | margin-left: 65px; 82 | } 83 | .container h2{ 84 | text-align: center; 85 | text-transform: uppercase; 86 | color: white; 87 | } 88 | .container .content p{ 89 | text-align: center; 90 | font-size: 17px; 91 | line-height: 30px; 92 | margin-bottom: 20px; 93 | color: white; 94 | } 95 | .container button{ 96 | padding: 10px 50px; 97 | margin-left: 70px; 98 | cursor: pointer; 99 | font-size: 15px; 100 | border: none; 101 | border-radius: 40px; 102 | /* color: white; */ 103 | } 104 | .container button:hover{ 105 | background-color: rgb(251, 251, 249); 106 | border: none; 107 | } 108 | .social_media{ 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | margin: 20px; 113 | 114 | } 115 | .social_media .links{ 116 | text-align: center; 117 | margin:0 10px; 118 | } 119 | .social_media .links h5{ 120 | font-size: 12px; 121 | color: white; 122 | } 123 | .social_media .links p{ 124 | font-size: 12px; 125 | color: white; 126 | } 127 | .social_media .links img{ 128 | width:45px; 129 | height:45px; 130 | border-radius: 50%; 131 | } -------------------------------------------------------------------------------- /Shreeyash Garde/css/styles.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100%; 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | background-image: linear-gradient(to right, #8360c3, #2ebf91); 9 | } 10 | .box{ 11 | height:425px; 12 | width: 285px; 13 | background-image: linear-gradient(to right, #fc5c7d, #6a82fb); 14 | border-radius: 15px; 15 | } 16 | .image{ 17 | height: 220px; 18 | width: 220px; 19 | border-radius: 5px; 20 | margin-left: 30px; 21 | margin-top: 15px; 22 | margin-right: 15px; 23 | } 24 | p{ 25 | font-size: 15px; 26 | font-weight: bolder; 27 | margin-left: 35px; 28 | color: white; 29 | font-family: sans-serif; 30 | 31 | } 32 | .para{ 33 | font-weight: lighter; 34 | font-size: 20px; 35 | margin-left: 60px; 36 | font-family: "Outfit",sans-serif; 37 | } 38 | .footer-link{ 39 | margin-left: 30px; 40 | color:purple; 41 | } 42 | .P{ 43 | margin-left: 50PX; 44 | } 45 | -------------------------------------------------------------------------------- /Shreeyash Garde/images/Shreeyash photo-modified2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shreeyash Garde/images/Shreeyash photo-modified2.png -------------------------------------------------------------------------------- /Shreeyash Garde/images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Shreeyash Garde/images/preview.png -------------------------------------------------------------------------------- /Shreeyash Garde/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nft preview card 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | equilibrium 15 |

16 |
17 |

Shreeyash Garde

18 |

Student at PCET'S NMIET

19 |

Aspiring Java , Web Developer

20 |
21 | LinkedIn 22 | Twitter 23 | Github 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Shreeyash Garde/readme.md: -------------------------------------------------------------------------------- 1 | # Profile Preview 2 | ![screenshot](./images/preview.png) -------------------------------------------------------------------------------- /Sujit is Back/Panda_Archigraphs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Sujit is Back/Panda_Archigraphs.png -------------------------------------------------------------------------------- /Sujit is Back/Readme.md: -------------------------------------------------------------------------------- 1 | ![image](https://user-images.githubusercontent.com/77682733/194758623-33c5d661-0bf0-42e8-b40a-612a9392a95d.png) 2 | -------------------------------------------------------------------------------- /Sujit is Back/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #28223F; 9 | font-family: Montserrat, sans-serif; 10 | 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | flex-direction: column; 15 | 16 | min-height: 100vh; 17 | margin: 0; 18 | } 19 | 20 | h3 { 21 | margin: 10px 0; 22 | } 23 | 24 | h6 { 25 | margin: 5px 0; 26 | text-transform: uppercase; 27 | } 28 | 29 | p { 30 | font-size: 14px; 31 | line-height: 21px; 32 | } 33 | 34 | .card-container { 35 | background-color: #231E39; 36 | border-radius: 5px; 37 | box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); 38 | color: #B3B8CD; 39 | padding-top: 30px; 40 | position: relative; 41 | width: 350px; 42 | max-width: 100%; 43 | text-align: center; 44 | } 45 | 46 | .card-container .pro { 47 | color: #231E39; 48 | background-color: #FEBB0B; 49 | border-radius: 3px; 50 | font-size: 14px; 51 | font-weight: bold; 52 | padding: 3px 7px; 53 | position: absolute; 54 | top: 30px; 55 | left: 30px; 56 | } 57 | 58 | .card-container .round { 59 | border: 1px solid #03BFCB; 60 | border-radius: 50%; 61 | padding: 7px; 62 | } 63 | 64 | button.primary { 65 | background-color: #03BFCB; 66 | border: 1px solid #03BFCB; 67 | border-radius: 3px; 68 | color: #231E39; 69 | font-family: Montserrat, sans-serif; 70 | font-weight: 500; 71 | padding: 10px 25px; 72 | } 73 | 74 | button.primary.ghost { 75 | background-color: transparent; 76 | color: #02899C; 77 | } 78 | 79 | .skills { 80 | background-color: #1F1A36; 81 | text-align: left; 82 | padding: 15px; 83 | margin-top: 30px; 84 | } 85 | 86 | .skills ul { 87 | list-style-type: none; 88 | margin: 0; 89 | padding: 0; 90 | } 91 | 92 | .skills ul li { 93 | border: 1px solid #2D2747; 94 | border-radius: 2px; 95 | display: inline-block; 96 | font-size: 12px; 97 | margin: 0 7px 7px 0; 98 | padding: 7px; 99 | } 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Sujit is Back/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 10 | 11 | 12 | 13 |
14 | user 15 |

Ricky Park

16 |
New York
17 |

User interface designer and
front-end developer

18 |
19 | 22 | 25 |
26 |
27 |
Skills
28 |
    29 |
  • UI / UX
    • 30 |
  • Front End Development
    • 31 |
  • HTML
    • 32 |
  • CSS
    • 33 |
  • JavaScript
    • 34 |
  • React
    • 35 |
  • Node
    • 36 |
37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /Swadesh/Profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Swadesh/Profile.png -------------------------------------------------------------------------------- /Swadesh/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 | Swadesh Pal's Photo 13 |

Swadesh Pal

14 |

Competitive programmer || FrontEnd Developer || IT Undergrad @JGEC

15 |
16 | 17 | 18 | 19 | 20 |
21 | Contact me 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Swadesh/my photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/Swadesh/my photo.jpg -------------------------------------------------------------------------------- /Swadesh/readme.md: -------------------------------------------------------------------------------- 1 | # Short-Profile-With-HTML-CSS for gtihub profile Swadesh Pal 2 | ![profile-ss](./Profile.png) -------------------------------------------------------------------------------- /Swadesh/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url(https://img.freepik.com/premium-photo/business-digital-data-network-connecting-with-number-line-abstract-background-blue-theme_222260-730.jpg?w=1380); /* You can change background here*/ 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 440px; 22 | color: #fff; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: blur(5px); 30 | } 31 | 32 | .card img{ 33 | width: 140px; 34 | border-radius: 50%; 35 | font-weight: 600; 36 | margin-top: 20px; 37 | } 38 | 39 | .card p{ 40 | font-size: 18px; 41 | margin: 10px auto; 42 | max-width: 330px; 43 | } 44 | 45 | .card .links img{ 46 | width: 40px; 47 | border-radius: 50%; 48 | margin: 10px 5px; 49 | transition: background 0.5s; 50 | } 51 | 52 | .card .links img:hover{ 53 | background: #ffffff; 54 | box-shadow: 0 0 10px rgb(169, 205, 235); 55 | } 56 | 57 | .btn{ 58 | text-decoration: none; 59 | display: inline-block; 60 | font-size: 18px; 61 | font-weight: 500; 62 | background-color: transparent; 63 | border: 1px solid white; 64 | color: #fff; 65 | padding: 10px 30px; 66 | border-radius: 30px; 67 | margin: 30px 0 10px; 68 | } 69 | 70 | .btn:hover{ 71 | cursor: pointer; 72 | background-color: white; 73 | font-weight: medium; 74 | box-shadow: 0 0 10px rgb(169, 205, 235); 75 | color: #137570; 76 | } -------------------------------------------------------------------------------- /naman/README.md: -------------------------------------------------------------------------------- 1 | ![](assests/card.png) 2 | -------------------------------------------------------------------------------- /naman/assests/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/card.png -------------------------------------------------------------------------------- /naman/assests/hater_fr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/hater_fr.png -------------------------------------------------------------------------------- /naman/assests/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/instagram.png -------------------------------------------------------------------------------- /naman/assests/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/linkedin.png -------------------------------------------------------------------------------- /naman/assests/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/profile.png -------------------------------------------------------------------------------- /naman/assests/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/naman/assests/twitter.png -------------------------------------------------------------------------------- /naman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 |
18 | avatar 19 |
20 | 21 | 25 | 26 |
27 | portfolio 28 | instagram 29 | linkedin 30 | twitter 31 | 32 | 33 | 34 | 35 | 39 |
40 | 41 |
42 |

43 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nulla labore soluta saepe illum harum delectus modi vitae, accusamus ad libero. Quibusdam a optio libero! 44 |

45 |
46 | 47 |
48 |
49 | 50 | -------------------------------------------------------------------------------- /naman/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 700px; 6 | background-color: black; 7 | /* background: rgb(0,0,0); 8 | background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(187,187,187,1) 42%, rgba(0,0,0,1) 99%); */ 9 | } 10 | 11 | #box{ 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | width: 370px; 16 | height: 570px; 17 | border-radius: 30px; 18 | background-color: gray; 19 | } 20 | 21 | #card{ 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | border: 2px solid white; 26 | border-radius: 30px; 27 | width: 300px; 28 | height: 500px; 29 | padding: 20px; 30 | background-color: gray; 31 | /* background: rgb(0,0,0); 32 | background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(157,157,157,1) 41%, rgba(187,187,187,1) 70%, rgba(0,0,0,1) 99%); */ 33 | } 34 | 35 | #avatar{ 36 | display: flex; 37 | justify-content: center; 38 | padding: 0% 0px 0% 0px; 39 | width: 100%; 40 | height: 30%; 41 | } 42 | 43 | #avatar img{ 44 | border: 2px solid white; 45 | border-radius: 50%; 46 | height: 100%; 47 | } 48 | 49 | .icon{ 50 | color: white; 51 | font-size: 40px; 52 | } 53 | 54 | #header{ 55 | display: flex; 56 | flex-direction: column; 57 | align-items: center; 58 | font-family: Georgia, serif; 59 | } 60 | 61 | #header h2{ 62 | margin-top: 25px; 63 | margin-bottom: 5px; 64 | } 65 | #header h4{ 66 | margin-top: 8px; 67 | } 68 | 69 | #social{ 70 | display: flex; 71 | flex-direction: row; 72 | justify-content: space-evenly; 73 | width: 100%; 74 | } 75 | 76 | #social img{ 77 | width: 40px; 78 | } 79 | 80 | #info{ 81 | word-wrap: break-word; 82 | } 83 | 84 | #info p{ 85 | font-size: 20px; 86 | text-align: center; 87 | } 88 | -------------------------------------------------------------------------------- /raj-hero/README.md: -------------------------------------------------------------------------------- 1 | # Short-Profile-With-HTML-CSS for gtihub profile raj-hero 2 | ![profile-ss](./raj-hro-prf-ss.png) 3 | -------------------------------------------------------------------------------- /raj-hero/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/raj-hero/android-chrome-192x192.png -------------------------------------------------------------------------------- /raj-hero/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | raj-hero 10 | 11 | 16 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | profile-img 24 | 25 |
26 |
27 |

raj-hero

28 |

Full Stack Developer | Engineer | Competitive Programmer

29 |
30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /raj-hero/particles.json: -------------------------------------------------------------------------------- 1 | { 2 | "particles": { 3 | "number": { 4 | "value": 30, 5 | "density": { 6 | "enable": true, 7 | "value_area": 800 8 | } 9 | }, 10 | "color": { 11 | "value": "#ffffff" 12 | }, 13 | "shape": { 14 | "type": "circle", 15 | "stroke": { 16 | "width": 0, 17 | "color": "#000000" 18 | }, 19 | "polygon": { 20 | "nb_sides": 5 21 | }, 22 | "image": { 23 | "src": "img/github.svg", 24 | "width": 100, 25 | "height": 100 26 | } 27 | }, 28 | "opacity": { 29 | "value": 0.5, 30 | "random": false, 31 | "anim": { 32 | "enable": false, 33 | "speed": 1, 34 | "opacity_min": 0.1, 35 | "sync": false 36 | } 37 | }, 38 | "size": { 39 | "value": 10, 40 | "random": true, 41 | "anim": { 42 | "enable": false, 43 | "speed": 80, 44 | "size_min": 0.1, 45 | "sync": false 46 | } 47 | }, 48 | "line_linked": { 49 | "enable": true, 50 | "distance": 300, 51 | "color": "#ffffff", 52 | "opacity": 0.4, 53 | "width": 2 54 | }, 55 | "move": { 56 | "enable": true, 57 | "speed": 12, 58 | "direction": "none", 59 | "random": false, 60 | "straight": false, 61 | "out_mode": "out", 62 | "bounce": false, 63 | "attract": { 64 | "enable": false, 65 | "rotateX": 600, 66 | "rotateY": 1200 67 | } 68 | } 69 | }, 70 | "interactivity": { 71 | "detect_on": "canvas", 72 | "events": { 73 | "onhover": { 74 | "enable": true, 75 | "mode": "repulse" 76 | }, 77 | "onclick": { 78 | "enable": true, 79 | "mode": "push" 80 | }, 81 | "resize": true 82 | }, 83 | "modes": { 84 | "grab": { 85 | "distance": 800, 86 | "line_linked": { 87 | "opacity": 1 88 | } 89 | }, 90 | "bubble": { 91 | "distance": 800, 92 | "size": 80, 93 | "duration": 2, 94 | "opacity": 0.8, 95 | "speed": 3 96 | }, 97 | "repulse": { 98 | "distance": 400, 99 | "duration": 0.4 100 | }, 101 | "push": { 102 | "particles_nb": 4 103 | }, 104 | "remove": { 105 | "particles_nb": 2 106 | } 107 | } 108 | }, 109 | "retina_detect": true 110 | } -------------------------------------------------------------------------------- /raj-hero/raj-hro-prf-ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mitalrs/Short-Profile-With-HTML-CSS/c178be1113513c06f89003530ab4c387f7e59bec/raj-hero/raj-hro-prf-ss.png -------------------------------------------------------------------------------- /raj-hero/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | height: 100vh; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | background:rgb(71, 99, 211); 12 | } 13 | 14 | #particles-js{ 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | .container{ 21 | width: 500px; 22 | height: 500px; 23 | background-color: #c7cff9; 24 | box-shadow: 6px 15px 20px #2f50e3; 25 | border-radius: 50px; 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | align-items: center; 30 | gap: 70px; 31 | } 32 | 33 | .prf-img{ 34 | height: 210px; 35 | width: 210px; 36 | background-color: rgb(218, 223, 238); 37 | box-shadow: 6px 15px 20px #5275e0f3; 38 | border-radius: 100px; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | 44 | .txt{ 45 | width: 400px; 46 | height: 140px; 47 | background-color: #5258cc; 48 | border-radius: 10px; 49 | color: #ffffff; 50 | font-weight: 500; 51 | text-shadow:2px 2px #2f50e3; 52 | font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | flex-direction: column; 57 | gap: 10px; 58 | font-size: 23px; 59 | box-shadow: 6px 15px 20px #577ccc; 60 | } 61 | p{ 62 | text-align: center; 63 | } -------------------------------------------------------------------------------- /satwik/readme.md: -------------------------------------------------------------------------------- 1 | ## Screenshots: 2 | ![Screenshot](https://i.postimg.cc/dQSvy0xj/satprofile.png) 3 | 4 | -------------------------------------------------------------------------------- /satwik/satwik.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .card { 7 | box-shadow: rgb(144 129 129 / 20%) 0px 4px 8px 0px; 8 | max-width: 327px; 9 | margin: 8rem auto auto; 10 | text-align: center; 11 | height: 64vh; 12 | border: 5px solid black; 13 | background-color: white; 14 | } 15 | .card:hover{ 16 | transform: scale(1.05); 17 | } 18 | h1{ 19 | color: rgb(34 79 75); 20 | font-size: 2.5rem; 21 | margin: auto; 22 | margin-top: 0.5rem; 23 | 24 | } 25 | .hob{ 26 | font-size: 31px; 27 | font-weight: bold; 28 | margin-top: 0.5rem; 29 | margin-bottom: 1rem; 30 | text-decoration: underline; 31 | color: #03035e; 32 | } 33 | a{ 34 | font-size: 1.4rem; 35 | cursor: pointer; 36 | } 37 | .git{ 38 | color: black; 39 | margin-left:6px; 40 | } 41 | .link{ 42 | color: blue; 43 | margin-left:6px; 44 | } 45 | .insta{ 46 | color: red; 47 | margin-left:6px; 48 | } 49 | .git:hover{ 50 | font-size:1.6rem; 51 | } 52 | .link:hover{ 53 | font-size:1.6rem; 54 | } 55 | .insta:hover{ 56 | font-size:1.6rem; 57 | } 58 | 59 | @media(max-width:400px) { 60 | .card{ 61 | max-width: 200px; 62 | max-height: 48vh; 63 | } 64 | .hob{ 65 | font-size: 20px; 66 | } 67 | h1{ 68 | font-size: 2rem; 69 | } 70 | } 71 | @media(max-width:1250px) { 72 | .card{ 73 | height: 65vh; 74 | } 75 | 76 | } -------------------------------------------------------------------------------- /satwik/satwik.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Profile 11 | 12 | 13 |
14 | Satwik 15 |

Satwik rai

16 |

Front End Developer

17 | 18 | 19 | 20 |
21 | 22 | --------------------------------------------------------------------------------