Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: added border radius to search bar #1904

Merged
merged 4 commits into from Oct 8, 2022
Merged

feat: added border radius to search bar #1904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a6e6ad
added hover effect to card and border color to search btn
JayrajSingh65 Oct 6, 2022
0941861
Update style.css
JayrajSingh65 Oct 7, 2022
b6613a5
added border radius to search bar
JayrajSingh65 Oct 7, 2022
c3672f9
Merge branch 'master' into hacktober
Syknapse Oct 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions assets/style.css
View file
Open in desktop
Expand Up @@ -63,6 +63,7 @@ p {
height: 50px;
text-align: center;
border: none;
border-radius: 15px;
transition: all 1s;
box-shadow: 0px 1px 11px 2px rgb(82 81 85 / 10%);
}
Expand Down Expand Up @@ -177,6 +178,7 @@ footer {
box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.2);
transition: 0.5s;
}

.card:hover {
-webkit-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.5);
-moz-box-shadow: 1px 1px 5px 1px rgba(82, 81, 85, 0.5);
Expand Down Expand Up @@ -207,6 +209,10 @@ footer {
word-break: break-word;
}

.resources:hover {
color: var(--pink);
}

/* Night Mode Code */

.night .contact i {
Expand All @@ -225,6 +231,10 @@ footer {
border: 1px solid var(--orange);
}

.night .card:hover {
background-color: var(--orange);
}

.toggle-box-label-left:empty {
margin-left: -10px;
}
Expand Down Expand Up @@ -254,6 +264,11 @@ body.night {
background-color: var(--dark-purple);
}

.night .resources:hover {
color: var(--pink);
background-color: var(--purple);
}

.night #searchbar {
background-color: var(--dark-purple);
color: var(--light-grey1);
Expand Down
50 changes: 46 additions & 4 deletions index.html
View file
Open in desktop
Expand Up @@ -114,7 +114,45 @@ <h2>A project for first-time contributions</h2>
<!-- DO NOT modify the TEMPLATE directly, make a copy and paste it below -->
<!-- Keep one line of space above and below your card -->
<!-- ========= Paste YOUR CARD directly BELOW this line ========= -->


<!-- ________ jayrajSingh65 card START ___________ -->
<div class="card">
<p class="name">jayrajSingh65</p>
<p class="contact">
<i class="fab fa-twitter"></i>
<a href="https://twitter.com/Jayrajsingh_dev" target="_blank">jayrajSingh65</a>
</p>
<p class="about">
I am web developer learning Blockchain develeopment right now. check out my twitter handle for daily
updates!
</p>
<div class="resources">
<p>3 Useful Dev Resource</p>
<ul>
<li>
<a href="https://haikei.app/" target="_blank" title="free svg background">
Haikei.app
</a>
</li>
</ul>
<ul>
<li>
<a href="https://9elements.github.io" target="_blank" title="fancy border radius generator">
9elements.github.io
</a>
</li>
</ul>
<ul>
<li>
<a href="https://colorbox.io/" target="_blank" title="colorbox">
colorbox
</a>
</li>
</ul>
</div>
</div>
<!-- ________ jayrajSingh65 card END ___________ -->

<!-- ________ Kalpit's card START ________ -->
<div class="card">
<p class="name">Kalpit Malviya</p>
Expand All @@ -138,10 +176,14 @@ <h2>A project for first-time contributions</h2>
</a>
</li>
<li>
<a href="https://devopscube.com/" target="_blank" title="Second Resource">Kick Start your DevOps Journey</a>
<a href="https://devopscube.com/" target="_blank" title="Second Resource">
Kick Start your DevOps Journey
</a>
</li>
<li>
<a href="https://kodekloud.com/playgrounds/" target="_blank" title="Third resource">A Great Platform for learning-by-doing</a>
<a href="https://kodekloud.com/playgrounds/" target="_blank" title="Third resource">
A Great Platform for learning-by-doing
</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -569,4 +611,4 @@ <h2>A project for first-time contributions</h2>
</div>
<script type="text/javascript" src="assets/script.js"></script>
</body>
</html>
</html>
16 changes: 8 additions & 8 deletions translations/README/FRENCH.md
View file
Open in desktop
Expand Up @@ -115,17 +115,17 @@ _Temps estimé: moins de 30 minutes_.
- Une branche est un moyen de séparer vos modifications de la partie principale du projet appelée `Master`. Par exemple, si les choses tournent mal et que vous n’êtes pas satisfait de vos modifications, vous pouvez simplement supprimer la branche et le projet principal ne sera pas affecté.

| <ul><li>Clique sur _Current branch_</li><li>ensuite clique sur _New_</li></ul> | ![Créer une branche](/readme-only/branch-new.PNG "Clique sur 'Branch', et 'New'") |
| :---------------------------------------------------------------------- | ---------------------------------------------------------------------------: |
| :----------------------------------------------------------------------------- | --------------------------------------------------------------------------------: |


| <ul><li>Donnez un nom à votre branche</li><li>Clique sur `Create branch`</li></ul> | ![Nom de la branche](/readme-only/branch-name.PNG 'Nom de la branche') |
| :---------------------------------------------------------------------- | -------------------------------------------------------------: |
| :--------------------------------------------------------------------------------- | ---------------------------------------------------------------------: |


- Vous pouvez le nommer comme vous voulez, mais comme il s’agit d’une branche pour ajouter une carte avec votre nom au projet, appelez-le `your-name-card` est une bonne pratique parce qu’elle maintient l’intention de cette branche claire.

| <ul><li>Publiez votre nouvelle branche sur GitHub</li></ul> | ![Nom de la branche](/readme-only/branch-publish.PNG 'Cliquez sur Publier pour envoyer la nouvelle branche à votre référentiel distant sur GitHub') |
| :-------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------: |
| :---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------: |


- Vous avez maintenant créé une nouvelle branche distincte du maître.
Expand All @@ -142,7 +142,7 @@ _Temps estimé: moins de 30 minutes_.
- Le fichier `index.html` est directement dans le dossier `Contribute-To-This-Project`.

| <ul><li>Ouvrez votre éditeur de code (Sublime, VS Code, Atom..etc) et utilisez la commande `Open file` et trouvez le fichier the index.html dans le répertoire principal du projet</li><li>Vous pouvez également localiser le fichier sur votre disque dur, cliquer avec le bouton droit de la souris et l’ouvrir avec votre éditeur.</li></ul> | ![Ouvrir le fichier d’index](/readme-only/index-open.PNG 'Ouvrir l’index.html dans votre éditeur de texte') |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------: |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------: |


- Maintenant, vous avez le fichier que vous allez modifier ouvert dans votre éditeur et vous êtes prêt à commencer à y apporter des modifications.
Expand All @@ -154,12 +154,12 @@ _Temps estimé: moins de 30 minutes_.
- Nous allons faire une copie du modèle de carte pour commencer à travailler dessus

| <ul><li>Au début du fichier HTML, sous les sections `<head>` et `<header>` vous trouverez la section intitulée `== TEMPLATE ==`</li><li>Copiez tout ce qui se trouve dans le carré rouge de l’image, à partir du commentaire `Contributor card START` jusqu'au commentaire `Contributor card END`</li></ul> |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Copier le modèle de carte](/readme-only/card-copy.PNG 'Copier le modèle de carte') |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Copier le modèle de carte](/readme-only/card-copy.PNG 'Copier le modèle de carte') |

| <ul><li>Collez le tout directement sous le commentaire qui l’indique</li><li>Assurez-vous qu’il y a une seule ligne d’espace entre le début de votre carte et la dernière fin de la carte. C’est une bonne pratique de garder notre code aussi clair que possible</li><li>N’utilisez jamais de linters ou de formateurs de style. Le projet à une configuration plus jolie</li></ul> |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Coller le modèle de carte](/readme-only/card-paste.PNG 'Coller sous la ligne indiquée') |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Coller le modèle de carte](/readme-only/card-paste.PNG 'Coller sous la ligne indiquée') |

- C’est maintenant **votre** carte à personnaliser et à modifier.

Expand Down