Skip to content
This repository has been archived by the owner on Jun 18, 2023. It is now read-only.

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Slqmy
Slqmy committed Jun 7, 2023
0 parents commit 7d3a247
Show file tree
Hide file tree
Showing 32 changed files with 3,578 additions and 0 deletions.
15 changes: 15 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"cSpell.words": [
"Brownlee",
"Caet",
"Kadane's",
"Markiplier",
"Pichai",
"Shoutout",
"Sundar",
"supersimple",
"Toks",
"Veritasium",
"youtube"
]
}
336 changes: 336 additions & 0 deletions archive/button-challenges.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title>
<style>
button {
margin-bottom: 10px;
}

button.Subscribe {
background-color: rgb(204, 0, 0);
border: none;
color: white;
font-family: Arial;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
transition: opacity 0.15s;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: top;
}

button.Subscribe:hover {
opacity: 0.8;
}

button.Subscribe:active {
opacity: 0.65;
}

button.Join {
background-color: white;
border-color: rgb(41, 118, 211);
color: rgb(41, 118, 211);
border-radius: 2px;
cursor: pointer;
border-width: 1px;
border-style: solid;
margin-right: 10px;
transition: opacity 0.15s, color 0.15s;
padding-left: 15px;
padding-right: 15px;
padding-top: 9px;
padding-bottom: 9px;
vertical-align: top;
}

button.Join:hover {
background-color: rgb(41, 118, 211);
color: white;
}

button.Join:active {
opacity: 0.7;
}

button.Tweet {
background-color: rgb(21, 154, 255);
color: white;
border-radius: 15px;
border: none;
cursor: pointer;
margin-right: 10px;
font-weight: bold;
transition: box-shadow 0.15s;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: top;
}

button.Tweet:hover {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

button.TheSlimySwamp {
background-color: rgb(0, 172, 0);
color: white;
border-radius: 8px;
width: 180px;
height: 30px;
border-style: solid;
border: none;
cursor: pointer;
margin-right: 10px;
}

button.Join-Discord {
background-color: rgb(149, 0, 218);
color: white;
border-radius: 8px;
width: 70px;
height: 30px;
border-style: solid;
border: none;
cursor: pointer;
margin-right: 10px;
}

button.Request-now {
color: white;
background-color: black;
width: 110px;
height: 30px;
border: none;
margin-right: 10px;
transition: opacity 0.15s;
}

button.Request-now:hover {
opacity: 0.8;
}

button.Add-to-cart {
color: black;
background-color: rgb(255, 216, 20);
border-radius: 12px;
border: none;
width: 130px;
height: 30px;
margin-right: 10px;
transition: background-color 0.15s;
}

button.Add-to-cart:hover {
background-color: rgb(236, 197, 0);
}

button.sign-up {
color: white;
background-color: rgb(0, 164, 79);
border-radius: 4px;
border: none;
width: 90px;
height: 30px;
margin-right: 10px;
transition: box-shadow 0.15s;
}

button.sign-up:hover {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

button.Get-started {
color: white;
background-color: rgb(121, 82, 179);
border-radius: 4px;
border: none;
width: 110px;
height: 30px;
margin-right: 10px;
font-weight: bold;
transition: background-color 0.15s;
}

button.Get-started:hover {
background-color: rgb(101, 68, 151);
}

button.Download {
color: rgb(121, 82, 179);
background-color: white;
border-radius: 4px;
width: 100px;
height: 30px;
margin-right: 10px;
font-weight: bold;
border-color: rgb(121, 82, 179);
border-width: 1px;
border-style: solid;
transition: background-color 0.15s, color 0.15s;
}

button.Download:hover {
background-color: rgb(94, 94, 94);
color: white;
border-color: rgb(94, 94, 94);
}

button.Apply {
color: white;
background-color: rgb(10, 102, 194);
border-radius: 15px;
width: 210px;
height: 30px;
margin-right: 10px;
font-weight: bold;
border: none;
transition: background-color 0.15s;
}

button.Apply:hover {
background-color: rgb(10, 86, 161);
}

button.Save {
color: rgb(10, 102, 194);
background-color: white;
border-radius: 15px;
width: 60px;
height: 30px;
margin-right: 10px;
font-weight: bold;
border-color: rgb(10, 102, 194);
border-style: solid;
border-width: 1px;
transition: background-color 0.15s, border-width 0.15s;
}

button.Save:hover {
background-color: rgb(208, 231, 255);
border-width: 2px;
}

button.nav {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px;
margin-left: 10px;
margin-right: 10px;
}

p.page-click {
font-family: Arial;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
padding-bottom: 8px;
color: purple;
text-decoration: underline;
}

.container {
display: flex;
align-items: center;
}

button.stretch {
color: white;
background-color: green;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
border: none;
transition: padding-top 0.5s, padding-bottom 0.5s, padding-right 0.5s,
padding-left 0.5s;
display: box;
}

button.stretch:hover {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 23px;
padding-left: 23px;
}

button.shadow {
color: white;
background-color: green;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
border: none;
display: box;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
transition: box-shadow 0.25s;
}

button.shadow:active {
box-shadow: none;
}

.num {
color: white;
background-color: green;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
margin-left: 10px;
border: none;
display: box;
transition: padding-top 0.25s, padding-bottom 0.25s, padding-right 0.25s,
padding-left 0.25s, margin-right 0.25s, margin-left 0.25s,
margin-top 0.25s, margin-bottom 0.25s;
}

.num:hover {
padding-right: 10px;
padding-left: 10px;
margin-right: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<button class="Subscribe">SUBSCRIBE</button>
<button class="Join">JOIN</button> <button class="Tweet">Tweet</button>
<button class="TheSlimySwamp">
Support <strong>The Slimy Swamp</strong>
</button>
<button class="Join-Discord">Discord</button>
<button class="Request-now">Request now</button
><button class="Add-to-cart">Add to Cart</button>
<button class="sign-up">Sign up</button
><button class="Get-started" Get started>Get started</button
><button class="Download">Download</button
><button class="Apply">Apply on company website</button
><button class="Save">Save</button>
<div class="container">
<button class="nav">Back</button>
<p class="page-click">1</p>
<p class="page-click">2</p>
<p class="page-click">3</p>
<p class="page-click">4</p>
<p class="page-click">5</p>
<button class="nav">Next</button>
</div>
<button class="stretch">Stretch</button>
<button class="shadow">Shadow</button>
<button class="num">One</button>
<button class="num">Two</button>
<button class="num">Three</button>
</body>
</html>

0 comments on commit 7d3a247

Please sign in to comment.