diff --git a/participants.css b/participants.css index a39f331..0444392 100644 --- a/participants.css +++ b/participants.css @@ -32,11 +32,12 @@ p { line-height: 21px; } +/*from here lies the containers in order 0*/ .card-container { - background-color: #231e39; + background-color: #34495e; border-radius: 5px; box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75); - color: #b3b8cd; + color: #c9d1d0; position: relative; width: 100%; text-align: center; @@ -65,6 +66,79 @@ p { } button.primary { + background-color: #2f3542; + border: 1px solid #2f3542; + border-radius: 3px; + color: #c9d1d0; + font-family: Montserrat, sans-serif; + font-weight: 500; + padding: 10px 25px; +} + +button.primary.ghost { + background-color: transparent; + color: #c9d1d0; + border: 2px solid #2f3542; +} + +.skills { + background-color: #2f3542; + text-align: left; + padding: 15px; + margin-top: 30px; + border-radius: 0 0 5px 5px; +} +.skills ul { + + list-style-type: none; + margin: 0; + padding: 0; +} + +.skills ul li { + border: 1px solid #c1d9d0; + border-radius: 2px; + display: inline-block; + font-size: 12px; + margin: 0 7px 7px 0; + padding: 7px; +} + + +/*from here lies the containers in order 1*/ +.card-container-1 { + background-color: #7157e2; + border-radius: 5px; + box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75); + color: #b3b8cd; + position: relative; + width: 100%; + text-align: center; + padding-top: 40px; +} + +.card-container-1 .pro { + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 15px; + left: 15px; +} + +.card-container-1 .round { + border-radius: 50%; + padding: 7px; + margin-left:2%; +} + +.round { + height: 150px; + width: 150px; +} + +button.primary-1 { background-color: #03bfcb; border: 1px solid #03bfcb; border-radius: 3px; @@ -74,25 +148,171 @@ button.primary { padding: 10px 25px; } -button.primary.ghost { +button.primary.ghost.one { background-color: transparent; color: #02899c; } -.skills { +.skills-1 { background-color: #1f1a36; text-align: left; padding: 15px; margin-top: 30px; + border-radius: 0 0 5px 5px; } -.skills ul { +.skills-1 ul { list-style-type: none; margin: 0; padding: 0; } -.skills ul li { +.skills-1 ul li { + border: 1px solid #2d2747; + border-radius: 2px; + display: inline-block; + font-size: 12px; + margin: 0 7px 7px 0; + padding: 7px; +} + + + +/*from here lies the containers in order 2*/ +.card-container-2 { + background-color: #6F1E51; + border-radius: 5px; + box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75); + color: #b3b8cd; + position: relative; + width: 100%; + text-align: center; + padding-top: 40px; +} + +.card-container-2 .pro { + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 15px; + left: 15px; +} + +.card-container-2 .round { + border-radius: 50%; + padding: 7px; + margin-left:2%; +} + +.round { + height: 150px; + width: 150px; +} + +button.primary-2 { + background-color: rgb(80, 9, 54); + border: 1px solid rgb(80, 9, 54); + border-radius: 3px; + color: #aba9b6; + font-family: Montserrat, sans-serif; + font-weight: 500; + padding: 10px 25px; +} + +button.primary.ghost.two { + background-color: transparent; + color: #c9d1d0; + border: 2px solid rgb(80, 9, 54); +} + +.skills-2 { + background-color: rgb(80, 9, 54); + text-align: left; + padding: 15px; + margin-top: 30px; + border-radius: 0 0 5px 5px; +} +.skills-2 ul { + + list-style-type: none; + margin: 0; + padding: 0; +} + +.skills-2 ul li { + border: 1px solid #6F1E51; + border-radius: 2px; + display: inline-block; + font-size: 12px; + margin: 0 7px 7px 0; + padding: 7px; +} + +/*from here lies the containers in order 3*/ +.card-container-3 { + background-color: #231e39; + border-radius: 5px; + box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75); + color: #b3b8cd; + position: relative; + width: 100%; + text-align: center; + padding-top: 40px; +} + +.card-container-3 .pro { + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 15px; + left: 15px; +} + +.card-container-3 .round { + border-radius: 50%; + padding: 7px; + margin-left:2%; +} + +.round { + height: 150px; + width: 150px; +} + +button.primary-3 { + background-color: #03bfcb; + border: 1px solid #03bfcb; + border-radius: 3px; + color: #231e39; + font-family: Montserrat, sans-serif; + font-weight: 500; + padding: 10px 25px; +} + +button.primary.ghost.three { + background-color: transparent; + color: #02899c; +} + +.skills-3 { + background-color: #1f1a36; + text-align: left; + padding: 15px; + margin-top: 30px; + border-radius: 0 0 5px 5px; +} +.skills-3 ul { + + list-style-type: none; + margin: 0; + padding: 0; +} + +.skills-3 ul li { border: 1px solid #2d2747; border-radius: 2px; display: inline-block; @@ -101,6 +321,79 @@ button.primary.ghost { padding: 7px; } +/*from here lies the containers in order 4*/ +.card-container-4 { + background-color: #b33939; + border-radius: 5px; + box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75); + color: #c9d1d0; + position: relative; + width: 100%; + text-align: center; + padding-top: 40px; +} + +.card-container-4 .pro { + border-radius: 3px; + font-size: 14px; + font-weight: bold; + padding: 3px 7px; + position: absolute; + top: 15px; + left: 15px; +} + +.card-container-4 .round { + border-radius: 50%; + padding: 7px; + margin-left:2%; +} + +.round { + height: 150px; + width: 150px; +} + +button.primary-4 { + background-color: #8a1e1e; + border: 1px solid #8a1e1e; + border-radius: 3px; + color: #c1d9d0; + font-family: Montserrat, sans-serif; + font-weight: 500; + padding: 10px 25px; +} + +button.primary.ghost.four { + background-color: transparent; + color: #c9d1d0; + border: 2px solid #8a1e1e; +} + +.skills-4 { + background-color: #8a1e1e; + text-align: left; + padding: 15px; + margin-top: 30px; + border-radius: 0 0 5px 5px; +} +.skills-4 ul { + + list-style-type: none; + margin: 0; + padding: 0; +} + +.skills-4 ul li { + border: 2px solid #b33939; + border-radius: 2px; + display: inline-block; + font-size: 12px; + margin: 0 7px 7px 0; + padding: 7px; +} + + .h1-title { text-align: center; color: white; diff --git a/participants.js b/participants.js index 818bb0c..2f9a463 100644 --- a/participants.js +++ b/participants.js @@ -73,7 +73,7 @@ const participants = [ "name": "Ritik Bhatt", "img": "https://instagram.fdel25-1.fna.fbcdn.net/v/t51.2885-19/s150x150/92552607_253205502534768_3668440788531937280_n.jpg?_nc_ht=instagram.fdel25-1.fna.fbcdn.net&_nc_ohc=5mjq2sUkGIkAX9_qxw0&oh=d87d022a92e08aa0d0f4cbb63bd20438&oe=5FA4070F", "title": "Noobie", - "year": "SE 2020", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/in/ritik-bhatt-681266194/", "github": "https://github.com/bhattritik21", "skills":['Python','html','css'] , @@ -83,7 +83,7 @@ const participants = [ "name": "Akash Saxena", "img": "https://avatars3.githubusercontent.com/u/54790554?s=60&v=4", "title": "OSS Jt Sec", - "year": "SE - 2023", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/company/open-source-software-club/", "github": "https://github.com/aitoss", "skills": ['ReactJs','Bootstrap','JS','HTML','CS'], @@ -91,8 +91,15 @@ const participants = [ }, { "name": "Mayank Kumar", - "img": "https://drive.google.com/file/d/1PG2h6PB0G9mm4SYoiE2kwLBwNeKXOkk7/view?usp=sharing", + "img": "https://avatars3.githubusercontent.com/u/47062438?s=400&u=ab4cb37695763efe4297b2da4b7f97cd8f6f888b&v=4", "title": "Participant", + "year": "BE - 2023", + "linkedIn": "#", + "github": "https://github.com/nishu91020", + "skills": ['basic development','github','sneaking'], + "description": "A Student of AIT" + }, + { "name": "Nishu Rai", "img": "https://avatars3.githubusercontent.com/u/54761473?s=460&u=70ff584a841f0748305e405fe3db9eca5ddd2608&v=4", "title": "Participant", @@ -106,7 +113,7 @@ const participants = [ "name":"Yashaswi Mailaru", "img":"https://avatars2.githubusercontent.com/u/68941273?s=460&v=4", "title":"Participant", - "year":"BE-2023", + "year":"BE - 2023", "linkedIn":"https://www.linkedin.com/in/yashaswi-mailaru-7b9169190/", "github":"https://github.com/Nullcoder9", "skills":['C++' , 'Nodejs'], @@ -146,7 +153,7 @@ const participants = [ "name": "Amit Bhagat", "img": "https://images.unsplash.com/photo-1518933165971-611dbc9c412d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", "title": "Lets start opensource", - "year": "BE-2023", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/in/amit-bhagat-860341192/", "github": "https://github.com/AmitBhagat3301", "skills": ["a learner"], @@ -176,7 +183,7 @@ const participants = [ "name": "Harish Bajiya", "img": "https://avatars2.githubusercontent.com/u/58135353?s=460&u=9909c0f062441abaaa86bc060dc8be622d3ff405&v=4", "title": "Tech Enthusiast", - "year": "BE - 2024", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/company/open-source-software-club/", "github": "https://github.com/aitoss", "skills": ['Flutter', 'Vue.js'], @@ -286,7 +293,7 @@ const participants = [ "name":"Sachin Choudhary", "img":"https://avatars2.githubusercontent.com/u/54989437?s=460&u=b0a939329e8daa072469b228349c1e9927a29a30&v=4", "title":"Noobie", - "year":"BE-2023", + "year":"BE - 2023", "linkedIn":"https://www.linkedin.com/in/sachin-choudhary-7037381a9/", "github":"https://github.com/sachin-611", "skills":['C++','python'], @@ -326,7 +333,7 @@ const participants = [ "name": "Ankit Kumar", "img": "https://avatars0.githubusercontent.com/u/56212417?s=460&u=95a0155aade927a25bdc8d516d54c872a21ce1a0&v=4", "title": "OSS club Member", - "year": "SE 2020", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/in/ankit-kumar-706243125/", "github": "https://github.com/cnarte", "skills": ['Tensorflow' ,'GCP', 'Flask','IBM-Qiskit'], @@ -336,7 +343,7 @@ const participants = [ "name": "DeOxYs", "img": "https://avatars3.githubusercontent.com/u/47062438?s=400&u=ab4cb37695763efe4297b2da4b7f97cd8f6f888b&v=4", "title": "Rookie", - "year": "SE 2020", + "year": "BE - 2023", "linkedIn": "https://www.linkedin.com/in/saheel-kumar-47ba691b5/", "github": "https://github.com/DeOxYs24", "skills": ['Not afraid of learning new tech'], @@ -346,7 +353,7 @@ const participants = [ "name": "Meghaj Singh", "img": "https://avatars0.githubusercontent.com/u/49283403?s=400&u=228bd9e514d69021dcae34d3d929c7b87381dbff&v=4", "title": "Coping up with Tech!", - "year": "BE-2022", + "year": "BE - 2022", "linkedIn" : "https://www.linkedin.com/in/meghaj-singh-545846167/", 'github': "https://github.com/memeghaj10", "skills": ['C++','Python','NLP & NLTK','Web Development using MERN stack','Data Science'], @@ -356,7 +363,7 @@ const participants = [ "name":"Sachin Choudhary", "img":"https://avatars2.githubusercontent.com/u/54989437?s=460&u=b0a939329e8daa072469b228349c1e9927a29a30&v=4", "title":"Noobie", - "year":"BE-2023", + "year":"BE - 2023", "linkedIn":"https://www.linkedin.com/in/sachin-choudhary-7037381a9/", "github":"https://github.com/sachin-611", "skills":['C++','python'], @@ -366,7 +373,7 @@ const participants = [ "name":"Anuranjan Pandey", "img":"https://avatars0.githubusercontent.com/u/53137708?s=400&u=88f891101c0a4b62095e5b8733f7670ebd8ee73d&v=4", "title":"Participant", - "year":"BE-2023", + "year":"BE - 2023", "linkedIn":"https://www.linkedin.com/in/anuranjan-pandey-8b8623140/", "github":"https://github.com/anuranjanpandey", "skills":['C++', 'Python'], @@ -404,7 +411,7 @@ const participants = [ "name": "Saheel Kumar", "img": "", "title": "Participant", - "year": "SE - 2020", + "year": "BE - 2023", "github": "https://github.com/Saheelkumar2410", "skills": ['A noobie trying my best'], "description": "Noobie" @@ -437,8 +444,39 @@ function loadParticipants() { participant.skills.forEach((skill) => { listed += `