Skip to content

Commit

Permalink
Merge pull request #24 from ANIKETRAJ28/fix/AddYourCard
Browse files Browse the repository at this point in the history 
improved the card and added more styles
  • Loading branch information
@aparna03dubey
aparna03dubey authored Oct 20, 2023
2 parents cde7079 + 32d6f58 commit d90e465
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 92 deletions.
167 changes: 94 additions & 73 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@1,300&family=Bree+Serif&family=Domine:wght@400;500&family=EB+Garamond&family=Geologica&family=Inter:wght@200;400&family=Libre+Baskerville&family=Lora:ital@1&family=M+PLUS+Rounded+1c:wght@500&family=Nanum+Myeongjo:wght@700&family=Nunito:ital,wght@1,300&family=Roboto+Slab:wght@300&family=Rubik:wght@700&family=Signika+Negative:wght@500&family=Slabo+27px&family=Splash&family=The+Nautigal:wght@700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
Expand All @@ -20,131 +21,151 @@ <h1>Add Your Card</h1>
<div class="name">
<h2>Aparna Dubey</h2>
</div>
<div class="prof">
<a href="https://github.com/aparna03dubey" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/aparna03dubey/React-TicTacToe" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/aparna03dubey" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/aparna03dubey/React-TicTacToe" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Umar Farouk</h2>
</div>
<div class="prof">
<a href="#https://github.com/Fahass" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="#https://github.com/Fahass/AddYourCard" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="#https://github.com/Fahass" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="#https://github.com/Fahass/AddYourCard" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Mahaprasad Prusty</h2>
</div>
<div class="prof">
<a href="https://github.com/Mahapasad" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/Mahapasad/AddYourCard" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/Mahapasad" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/Mahapasad/AddYourCard" target="_blank">Project Repo</a>
</div>
</div>
</div>
</div>

<div class="cardholder">
<div class="card">
<div class="name">
<h2>Vaishnavi Gupta</h2>
</div>
<div class="prof">
<a href="https://github.com/VAISHNAVI04GUPTA" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/VAISHNAVI04GUPTA/ML_project" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/VAISHNAVI04GUPTA" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/VAISHNAVI04GUPTA/ML_project" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Nishant Jadhav</h2>
</div>
<div class="prof">
<a href="https://github.com/nisoojadhav" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/nisoojadhav" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/nisoojadhav" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/nisoojadhav" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Niraj Kumar</h2>
</div>
<div class="prof">
<a href="https://github.com/Niraj-1729" target="_blank">GitHub Proflie</a>
</div>
<div class="repo">
<a href="https://github.com/Niraj-1729/Modern-sign-in-forn.git" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/Niraj-1729" target="_blank">GitHub Proflie</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/Niraj-1729/Modern-sign-in-forn.git" target="_blank">Project Repo</a>
</div>
</div>
</div>
</div>

<div class="cardholder">
<div class="card">
<div class="name">
<h2>Atharva Sonawane</h2>
</div>
<div class="prof">
<a href="https://github.com/athu070" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/athu070/Sentiment-Analysis-with-AWS" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/athu070" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/athu070/Sentiment-Analysis-with-AWS" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Aditi Bansal</h2>
</div>
<div class="prof">
<a href="https://github.com/Aditi22Bansal" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/Aditi22Bansal/AddYourCard" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/Aditi22Bansal" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/Aditi22Bansal/AddYourCard" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Nishant Dubey</h2>
</div>
<div class="prof">
<a href="https://github.com/nishantdub37" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/nishantdub37/parallax-effect.git" target="_blank">Project Repo</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/nishantdub37" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/nishantdub37/parallax-effect.git" target="_blank">Project Repo</a>
</div>
</div>
</div>
</div>

<div class="cardholder">
<div class="card">
<div class="name">
<h2>Saqib Patel</h2>
</div>
<div class="prof">
<a href="https://github.com/Msaqibpatel" target="_blank">GitHub Profile</a>
<div class="links">
<div class="prof">
<i class="fa-brands fa-github"></i>
<a href="https://github.com/Msaqibpatel" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<i class="ri-git-repository-line"></i>
<a href="https://github.com/MrAbdude/AbdulWadood-Shaikh" target="_blank">Project Repo</a>
</div>
</div>
<div class="repo">
<a href="https://github.com/MrAbdude/AbdulWadood-Shaikh" target="_blank">Project Repo</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h2>Dineth Hesara</h2>
</div>
<div class="prof">
<a href="https://github.com/Dineth-H" target="_blank">GitHub Profile</a>
</div>
<div class="repo">
<a href="https://github.com/Dineth-H/Python-Snake-Game.git" target="_blank">Project Repo</a>
</div>
</div>
</body>
Expand Down
56 changes: 37 additions & 19 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,43 @@
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@400;600&display=swap');

body {
background: rgb(90, 2, 93);
background: linear-gradient(0deg, rgba(90, 2, 93, 1) 9%, rgba(13, 1, 32, 1) 90%, rgba(3, 1, 25, 1) 100%);
font-family: 'Roboto Slab', serif;
}

.main {
font-family: 'EB Garamond', serif;
font-size: larger;
font-weight: bolder;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playpen Sans', cursive;

}

.main h1 {
animation: color-animation 5s infinite;

font-family: 'Playpen Sans', cursive;

}

.cardholder {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}

.card {
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
width: 250px;
height: 200px;
height: 300px;
padding: 20px;
margin: 20px;
border: 6px solid rgb(58, 33, 33);
Expand All @@ -48,15 +57,23 @@ body {
}

.name {
font-family: 'Libre Baskerville', serif;
min-height: 5rem;
font-family: 'Playpen Sans', cursive;
padding: 15px;
}

i {
font-size: 25px;
margin-bottom: 1rem;
}

a {
text-decoration: none;
color: #090101;
font-weight: bolder;
font-size: large;
font-family: 'Playpen Sans', cursive;

}

.prof {
Expand All @@ -66,7 +83,7 @@ a {
.prof:hover {
text-shadow: 0.5px 0.5px 0.2px rgb(91, 1, 225);
transform: scale(1.05);
color: #FF4500;
color: #7300ff;
}

.repo {
Expand All @@ -79,57 +96,58 @@ a {
.repo:hover {
text-shadow: 0.5px 0.5px 0.2px rgb(91, 1, 225);
transform: scale(1.05);
color: #FF6347;
color: #7300ff;
}

.links {
padding-top: 5px;
height: 25%;
}

@keyframes border-animation {
0% {
border-color: rgb(160, 140, 212);
border-color: rgb(160, 140, 212);
}

20% {
border-color: rgb(114, 94, 163);
border-color: rgb(114, 94, 163);
}

40% {
border-color: rgb(83, 67, 113);
border-color: rgb(83, 67, 113);
}

60% {
border-color: rgb(139, 107, 180);
border-color: rgb(139, 107, 180);
}

80% {
border-color: rgb(255, 255, 255);
border-color: rgb(255, 255, 255);
}

100% {
border-color: rgb(182, 146, 227);
border-color: rgb(182, 146, 227);
}
}

@keyframes color-animation {
0% {
color: rgb(215, 192, 217);
color: rgb(215, 192, 217);
}

25% {
color: rgb(230, 171, 244);
color: rgb(230, 171, 244);
}

50% {
color: rgb(205, 140, 235);
color: rgb(205, 140, 235);
}

75% {
color: rgb(110, 82, 171);
color: rgb(110, 82, 171);
}

100% {
color: rgb(218, 160, 247);
color: rgb(218, 160, 247);
}
}

0 comments on commit d90e465

Please sign in to comment.