Skip to content

Fix: names conventions in html file added footer #103

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

Merged
merged 1 commit into from
Oct 12, 2022
+1,905 −1,686
Merged

Fix: names conventions in html file added footer #103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets


# Local History for Visual Studio Code
.history/
@@ -31,4 +27,6 @@ trash

# Logs
logs
*.log
*.log

*.bak
125 changes: 119 additions & 6 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -10,6 +10,9 @@
--forground-main-color: rgb(255 255 255 / 1);
--background-main-color: rgb(0, 0, 0);
--card-border-radius: 30px;
--default-color:rgba(156, 163, 175);
--link-hover-color: rgb(129 120 255 / 1);
--default-link-color: rgb(129 120 255 / 1);
}

body {
@@ -36,6 +39,10 @@ main {
align-items: center;
}

a {
text-decoration: none;
}

.navbar {
display: flex;
flex-direction: column;
@@ -98,12 +105,118 @@ main {
margin-top: 20px;
}

footer {
padding-top: 3rem;
text-align: center;

/* footer stat here */
.footer-main{
margin-top: 2rem;
}

.footer-container {
width: 100%;
display: flex;
align-items: center;
margin: 0 auto;
padding: 2rem 1.25rem;
flex-direction: column;
}


@media (min-width: 1280px) {
.footer-container {
max-width: 1280px;
}
}

@media (min-width: 1024px) {
.footer-container {
max-width: 1024px;
}
}

@media (min-width: 768px) {
.footer-container {
max-width: 768px;
}
}

@media (min-width: 640px) {
.footer-container {
flex-direction: row;
max-width: 640px;
}
}

footer>a {



.footer-title {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
color: white;
font-weight: 700;
}
}

@media (min-width: 768px) {
.footer-title {
justify-content: flex-start;
}
}

.footer-copyright {
margin-top: 1rem;
font-size: .875rem;
line-height: 1.25rem;
color: var(--default-color)
}

@media (min-width: 640px) {
.footer-copyright {
padding: 0.5rem 0 0.5rem 1rem;
margin-left: 1rem;
margin: 0 0 0 1rem;
border-left-width: 2px;
border-color: rgba(31, 41, 55);
}
}

.footer-copyright>a {
color: rgb(129 120 255 / 1)
}

.socials-span {
margin-top: 1rem;
justify-content: center;
display: inline-flex;
}

@media (min-width: 640px) {
.socials-span {
margin-left: auto;
margin-top: 0;
justify-content: flex-start;
}
}


.socials-span>a {
color: var(--default-color);
}

.socials-span>a:hover {
color: var(--link-hover-color);
transform: scale(1.4);
transition: all 0.3s ease-in-out;
}

.socials-span>a:not(:first-child) {
margin-left: 0.75rem;
}

.socials-span>a>svg {
width: 1.25rem;
height: 1.25rem;
}


/* footer ends here */
3,263 changes: 1,664 additions & 1,599 deletions buttons/buttons.css
View file

Large diffs are not rendered by default.

193 changes: 118 additions & 75 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -99,7 +99,7 @@
<button class="button-1.. button--example"><span>example</span></button>
</div> -->
<div class="button-container flex align-items-center justify-content-center">
<button class="button button--shiny-gradient">
<button class="button jackwebdev-button-1">
<span>Hover Me</span>
</button>
<div class="createdby-section">
@@ -112,7 +112,7 @@

<!-- button starts here -->
<div class="button-container">
<button class="button-8">
<button class="RhyshaKachari-button-1">
<span>HOVER ME, THEN CLICK ME!</span>
</button>
<div class="createdby-section">
@@ -122,23 +122,23 @@
</div>

<div class="button-container">
<button class="button-101">Button</button>
<button class="AmitSahoo45-button-1">Button</button>
<div class="createdby-section">
Created by
<a href="https://github.com/AmitSahoo45">Amit Sahoo</a>
</div>
</div>

<div class="button-container">
<button class="button-102"><span>Hover Me</span></button>
<button class="AmitSahoo45-button-2"><span>Hover Me</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/AmitSahoo45">Amit Sahoo</a>
</div>
</div>

<div class="button-container">
<button class="button-103">Hover Me</button>
<button class="AmitSahoo45-button-3">Hover Me</button>
<div class="createdby-section">
Created by
<a href="https://github.com/AmitSahoo45">Amit Sahoo</a>
@@ -149,7 +149,7 @@
<!-- button 9 -->
<!-- button starts here -->
<div class="button-container">
<button class="Mahekjain-button-9">Hover Me</button>
<button class="Mahekjain-button-1">Hover Me</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mahekjain2706">Mahek jain</a>
@@ -160,7 +160,7 @@
<!-- button 10 -->
<!-- button starts here -->
<div class="button-container">
<div class="Mahekjain-btn-10">
<div class="Mahekjain-btn-2">
<a href="#">
<span></span>
<span></span>
@@ -178,7 +178,7 @@

<!-- button starts here -->
<div class="button-container flex align-items-center justify-content-center">
<button class="ingrzs-button-11"><span>Button</span></button>
<button class="ingrzs-button-1"><span>Button</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Ingrzs">Ingrzs</a>
@@ -188,31 +188,31 @@

<!-- mahi-btn starts -->
<div class="button-container">
<button class="mahi-btn-1 button-def">Bright</button>
<button class="Mahich123-button-1 button-def">Bright</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mahich123">Mahi Chowdhury</a>
</div>
</div>

<div class="button-container">
<button class="mahi-btn-2 button-def">Bright 2</button>
<button class="Mahich123-button-2 button-def">Bright 2</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mahich123">Mahi Chowdhury</a>
</div>
</div>

<div class="button-container">
<button class="mahi-btn-3 button-def">Bright 3</button>
<button class="Mahich123-button-3 button-def">Bright 3</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mahich123">Mahi Chowdhury</a>
</div>
</div>

<div class="button-container">
<button class="mahi-btn-4 button-def">Bright 4</button>
<button class="Mahich123-button-4 button-def">Bright 4</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mahich123">Mahi Chowdhury</a>
@@ -222,7 +222,7 @@

<!-- Button 9 -->
<div class="button-container">
<button class="button-9"><span>HOVER ME</span></button>
<button class="AjayMaheshwari23-button-1"><span>HOVER ME</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/AjayMaheshwari23">AjayMaheshwari</a>
@@ -243,15 +243,15 @@
<!-- ImOnlyYisus btn end -->

<div class="button-container">
<button class="manas-btn-10 button-def">Hover Me</button>
<button class="mjmanas54-button-1 button-def">Hover Me</button>
<div class="createdby-section">
Created by
<a href="https://github.com/mjmanas54">mjmanas</a>
</div>
</div>

<div class="button-container">
<button class="button-Anurag" role="button"><span class="text">Hover Me</span></button>
<button class="akashyap25-button-1" role="button"><span class="text">Hover Me</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/akashyap25">Anurag</a>
@@ -260,7 +260,7 @@

<!-- raulwwq0 btn start -->
<div class="button-container">
<button class="raulwwq0-btn"><span>Hover me</span></button>
<button class="raulwwq0-button-1-1"><span>Hover me</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/raulwwq0">raulwwq0</a>
@@ -271,7 +271,7 @@

<!-- Mayank1170 btn start -->
<div class="button-container">
<button class="Mayank1170 color-10"><span>Hover me</span></button>
<button class="Mayank1170-button-1"><span>Hover me</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Mayank1170">Mayank1170</a>
@@ -290,7 +290,7 @@

<!-- Ola's btn start -->
<div class="button-container">
<button class="ola-btn-11">Hover me</button>
<button class="Olamilekan-button-1">Hover me</button>
<div class="createdby-section">
Created by
<a href="https://github.com/Keith-Web3">Olamilekan</a>
@@ -311,10 +311,9 @@

<!-- *Swaroop's btn start -->
<div class="button-container">
<!-- <button class="{yourname-button-index}"><span> Example Button </span></button> -->
<span class="noob-span">
<img src="https://i.imgur.com/KDVctd4.png" alt=" " srcset=" " class="noob-img">
<button class="button-noob">hover me</button>
<span class="noob-button-1-span">
<img src="https://i.imgur.com/KDVctd4.png" alt=" " class="noob-button-1-img">
<button class="noob-button-1">hover me</button>
</span>
<div class="createdby-section">
Created by
@@ -325,7 +324,7 @@

<!-- blurry brush's btn start -->
<div class="button-container">
<button class="blurry-brush-btn"> Hover me </button>
<button class="blurry-brush-button-1"> Hover me </button>
<div class="createdby-section">
Created by
<a href="https://github.com/Blurry-Brush">Blurry Brush</a>
@@ -410,8 +409,8 @@
</div>
</div>
<!-- Harsh Jain's btn 2 end -->
<!-- Nitish's btn start -->

<!-- Nitish's btn start -->
<div class="button-container">
<button class="Nitish-btn-26"><span>Button</span></button>
<div class="createdby-section">
@@ -420,18 +419,18 @@
</div>
</div>
<!-- Nitish's btn end -->
<!-- Thiago's btn start -->
<!-- Thiago's btn start -->
<div class="button-container">
<button class="Okan-btn-1"><span>Button</span></button>
<button class="tjbass2021-button-1"><span>Button</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/tjbass2021">Thiago Souza</a>
</div>
</div>
<!-- Thiago's btn end -->
<!-- cyphers 2nd button start -->
<div class="button-container">
<!-- Thiago's btn end -->

<!-- cyphers 2nd button start -->
<div class="button-container">
<button class="cypher-2-btn"> Hover me </button>
<div class="createdby-section">
Created by
@@ -453,19 +452,19 @@


<!--Deepak Kumar btn start-->
<div class = "button-container">
<button class = "DeepakKumar-button-31"><span> Hover Me</span></button>
<div class = "createdby-section">
Created by<a href = "https://github.com/deepak0byte"> Deepak Kumar</a>
</div>
<div class="button-container">
<button class="DeepakKumar-button-31"><span> Hover Me</span></button>
<div class="createdby-section">
Created by<a href="https://github.com/deepak0byte"> Deepak Kumar</a>
</div>
</div>
<!--Deepak Kumar btn end-->

<!-- Shridhar's button start -->
<div class="button-container">
<div class="shridhar-btn">
<button class="shridhar-btn-youtube">Yt</button>
<button class="shridhar-btn-twitter">Tw</button>
<div class="shridhar-button-1">
<button class="shridhar-button-1-youtube">Yt</button>
<button class="shridhar-button-1-twitter">Tw</button>
</div>
<div class="createdby-section">
Created by
@@ -485,78 +484,122 @@
</div>
</div>
<!-- haldaranup 1st button ends -->


<!-- button-shani starts -->

<!-- shiningshani-button-1 starts -->
<div class="button-container">
<button class="button-Shani">Hover Me!</button>
<button class="shiningshani-button-1">Hover Me!</button>
<div class="createdby-section">Created by <a href="https://github.com/shiningshani">Shani</a></div>
</div>
<!-- button-shani ends -->
<!-- Nitish's btn start -->
<div class="button-container">
<!-- shiningshani-button-1 ends -->

<!-- Nitish's btn start -->
<div class="button-container">
<button class="Nitish-btn-2"><span>Button</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Singh26Nitish">Nitish Singh</a>
</div>
</div>
</div>
<!-- Nitish's btn end -->
<!-- Sumit1 btn start -->
<div class="button-container">
<button class="Sumit-btn-1"><span>Button</span></button>

<!-- Sumit1 btn start -->
<div class="button-container">
<button class="Sumit-14Singh-btn-1"><span>Button</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Sumit-14Singh">Sumit</a>
</div>
</div>
</div>
<!-- Sumit1 btn end -->
<!-- Sumit2 btn start -->

<!-- Sumit2 btn start -->
<div class="button-container">
<button class="Sumit-btn-2"><span>Button</span></button>
<button class="Sumit-14Singh-btn-2"><span>Button</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Sumit-14Singh">Sumit</a>
</div>
</div>
</div>
<!-- Sumit2 btn end -->
<!-- Sumit3 btn start -->

<!-- Sumit3 btn start -->
<div class="button-container">
<button class="Sumit-btn-3"><span>Sumit</span></button>
<button class="Sumit-14Singh-btn-3"><span>Sumit</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/Sumit-14Singh">Sumit</a>
</div>
</div>
</div>
<!-- Sumit3 btn end -->

<!-- dilshad360 button start -->
<div class="button-container">
<!-- dilshad360 button start -->
<div class="button-container">
<button class="dilshad360-btn-1"><span>Hover Me</span></button>
<div class="createdby-section">
Created by
<a href="https://github.com/dilshad360">dilshad360</a>
</div>
</div>
<!-- dilshad360 button end -->
</div>








</div>
</main>
<footer>
Created By
<a href="https://www.designandcode.us/" target="_">Design and Code </a>

<footer class="footer-main">
<div class="footer-container">
<a href="/" class="footer-title">
<span class="ml-3 text-xl">CSS Buttons</span>
</a>
<p class="footer-copyright">© 2022 CSS Buttons —
<a href="https://designandcode.us/" class="text-gray-600 ml-1" rel="noopener noreferrer"
target="_blank">@designandcode</a>
</p>
<span class="socials-span">
<a href="https://github.com/Design-and-Code">
<svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
className="w-5 h-5" viewBox="0 0 24 24">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
</a>
<a href="https://twitter.com/DesignandCode3">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a href="https://www.instagram.com/designandcode.community/">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a href="https://www.linkedin.com/company/designandcode/">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</footer>



</body>

</html>
</html>