diff --git a/projects/age-calculator/v2/index.html b/projects/age-calculator/v2/index.html new file mode 100644 index 0000000..3e3df3e --- /dev/null +++ b/projects/age-calculator/v2/index.html @@ -0,0 +1,22 @@ + + + + + + + + Age Calculator + + +
+

Age Calculator

+
+ + + +

Your age is 21 years old.

+
+
+ + \ No newline at end of file diff --git a/projects/age-calculator/v2/style.css b/projects/age-calculator/v2/style.css new file mode 100644 index 0000000..351561f --- /dev/null +++ b/projects/age-calculator/v2/style.css @@ -0,0 +1,62 @@ +body { + margin: 0; + padding: 20px; + font-family: "Montserrat", sans-serif; + background-color: #f7f7f7; +} + +.container { + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, .2); + padding: 20px; + max-width: 600px; + border-radius: 5px; + margin: 50px auto 0; +} + +h1 { + font-size: 36px; + text-align: center; + margin-top: 0; + margin-bottom: 20px; +} + +.form { + display: flex; + flex-direction: column; + align-items: center +} + +label { + font-weight: bold; + margin-bottom: 10px; +} + +input { + padding: 8px; + border: 1px solid #cccccc; + border-radius: 5px; + width: 100%; + max-width: 300px; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0062cc; +} + +#result { + margin-top: 20px; + font-size: 24px; + font-weight: bold; +} \ No newline at end of file diff --git a/projects/dice-roll-simulator/v2/index.html b/projects/dice-roll-simulator/v2/index.html new file mode 100644 index 0000000..d363497 --- /dev/null +++ b/projects/dice-roll-simulator/v2/index.html @@ -0,0 +1,20 @@ + + + + + + + Dice Roll Simulator + + + +

Dice Roll Simulator

+
+ + + + \ No newline at end of file diff --git a/projects/dice-roll-simulator/v2/style.css b/projects/dice-roll-simulator/v2/style.css new file mode 100644 index 0000000..48b74b4 --- /dev/null +++ b/projects/dice-roll-simulator/v2/style.css @@ -0,0 +1,56 @@ +body { + margin: 0; + text-align: center; + font-family: "Open Sans", sans-serif; +} + +h1 { + font-size: 3rem; + margin-top: 2rem; +} + +#dice { + font-size: 7rem; + margin: 5px; + animation-duration: 1s; + animation-fill-mode: forwards; +} + +#roll-dice { + background-color: #47a5c4; + color: white; + border-radius: 1rem; + border: none; + font-size: 1.5rem; + padding: 1rem 2rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#roll-dice:hover { + background-color: #2e8baf; +} + +ul { + list-style: none; + padding: 0; + max-width: 600px; + margin: 2rem auto; +} + +li { + font-size: 1.5rem; + padding: 0.5rem; + margin: 0.5rem; + background-color: #f2f2f2; + border-radius: 0.5rem; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); + display: flex; + justify-content: space-between; + align-items: center; +} + +li span { + font-size: 3rem; + margin-right: 1rem; +} \ No newline at end of file diff --git a/projects/tip-calculator/v2/index.html b/projects/tip-calculator/v2/index.html new file mode 100644 index 0000000..f496113 --- /dev/null +++ b/projects/tip-calculator/v2/index.html @@ -0,0 +1,25 @@ + + + + + + Tip Calculator + + +
+

Tip Calculator

+
+

Enter the bill amount and tip percentage to calculate the total

+ + + + + +
+ + 120 +
+
+
+ + \ No newline at end of file diff --git a/projects/tip-calculator/v2/style.css b/projects/tip-calculator/v2/style.css new file mode 100644 index 0000000..8ea9d3e --- /dev/null +++ b/projects/tip-calculator/v2/style.css @@ -0,0 +1,46 @@ +body { + margin: 0; + background-color: #f7f7f7; + padding: 20px; + font-family: "Helvetica", sans-serif; +} + +#container { + background-color: white; + max-width: 600px; + margin: 50px auto 0; + box-shadow: 0 0 10px rgba(0, 0, 0, .2); + border-radius: 5px; + padding: 20px; +} + +h1 { + font-size: 36px; + text-align: center; + margin-top: 0; + margin-bottom: 20px; +} + +#form { + display: flex; + flex-direction: column; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 10px 0; +} + +button { + background-color: #4caf50; + color: white; + padding: 10px; + border: none; + cursor: pointer; + margin: 10px 0; + width: 100%; + font-size: 18px; + text-transform: uppercase; +} \ No newline at end of file