Skip to content

Commit

Permalink
second commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@amarealcoder
amarealcoder committed Jul 15, 2021
1 parent 506a6be commit d03e71a
Show file tree
Hide file tree
Showing 12 changed files with 322 additions and 39 deletions.
0 active-states.jpg → design/active-states.jpg
View file
File renamed without changes
0 desktop-design-completed.jpg → design/desktop-design-completed.jpg
View file
File renamed without changes
0 desktop-design-empty.jpg → design/desktop-design-empty.jpg
View file
File renamed without changes
0 desktop-preview.jpg → design/desktop-preview.jpg
View file
File renamed without changes
0 mobile-design.jpg → design/mobile-design.jpg
View file
File renamed without changes
0 favicon-32x32.png → images/favicon-32x32.png
View file
File renamed without changes
0 icon-dollar.svg → images/icon-dollar.svg
View file
File renamed without changes
0 icon-person.svg → images/icon-person.svg
View file
File renamed without changes
0 logo.svg → images/logo.svg
View file
File renamed without changes
102 changes: 63 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

<title>Frontend Mentor | Tip calculator app</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<title>Frontend Mentor | Tip calculator app</title>

Bill

Select Tip %
5%
10%
15%
25%
50%
Custom

Number of People

Tip Amount
/ person

Total
/ person

Reset

<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>SPLI<span class="h1-span">TTER</span></h1>
<div class="hero-container">
<div class="section-left">
<form class="content">
<p class="left-ptag">Bill</p>
<input type="text" class="input-field input-1" />
</form>
<div class="content">
<p class="left-ptag">Select Tip %</p>
<div class="grid-btns">
<input type="button" value="5%" class="btn" />
<input type="button" value="10%" class="btn" />
<input type="button" value="15%" class="btn" />
<input type="button" value="25%" class="btn" />
<input type="button" value="50%" class="btn" />
<input type="text" value="Custom" class="custom-btn" />
</div>
</div>
<form class="content">
<p class="left-ptag">
Number of People<span class="error">Can't be zero</span>
</p>
<input type="text" class="input-field input-2" />
</form>
</div>
<div class="section-right">
<div class="content-right">
<p class="right-ptag">
Tip Amount<span class="right-ptag-span">/ person</span>
</p>
</div>
<div>
<p class="right-ptag">
Total<span class="right-ptag-span">/ person</span>
</p>
<button class="reset-btn">Reset</button>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded with <span style="color: red">❤❤ </span>by
<a href="#">Ugorji Miracle</a>.
</div>
</body>
<script src="index.js"></script>
</html>
Empty file added index.js
View file
Empty file.
259 changes: 259 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");
:root {
--Very-dark-cyan: hsl(183, 100%, 15%);
--Darker-grayish-cyan: hsl(186, 14%, 43%);
--Dark-grayish-cyan: hsl(184, 14%, 56%);
--Light-grayish-cyan: hsl(185, 41%, 84%);
--Lighter-grayish-cyan: hsl(189, 41%, 97%);
--Dark-cyan: hsl(172, 67%, 45%);
--Darker-cyan: hsl(172, 64%, 76%);
--White: hsl(0, 0%, 100%);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 700;
font-family: "Space Mono", Montserrat, Poppins;
}
body {
height: 100vh;
background: var(--Light-grayish-cyan);
}
h1 {
text-align: center;
margin-top: 3rem;
color: var(--Darker-grayish-cyan);
letter-spacing: 2px;
font-size: 16px;
}
.h1-span {
display: block;
}
.hero-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
height: 50%;
margin: 80px auto auto auto;
border-radius: 20px;
background-color: var(--White);
}
.content {
padding-top: 1rem;
margin-top: 0.75rem;
}
.section-left,
.section-right {
width: 40%;
height: 90%;
border-radius: 15px;
}
.section-left {
margin-top: -40px;
margin-bottom: 20px;
}
.left-ptag {
font-size: 10px;
margin-bottom: 0.5rem;
color: var(--Darker-grayish-cyan);
}
.input-field {
border-radius: 5px;
width: 100%;
height: 30%;
border: none;
background-color: var(--Lighter-grayish-cyan);
background-repeat: no-repeat;
background-size: 4%;
background-position-y: 10px;
background-position-x: 10px;
text-align: right;
overflow: hidden;
font-size: 24px;
}
.input-1 {
background-image: url("images/icon-dollar.svg");
}
.input-2 {
background-image: url("images/icon-person.svg");
}
.input-field:hover {
cursor: pointer;
border: 2px solid var(--Darker-cyan);
}
.error {
visibility: hidden;
color: orangered;
float: right;

/* border: 2px solid orangered; */
}
.grid-btns {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 6px;
}
.btn {
padding: 5px 25px;
cursor: pointer;
color: var(--Lighter-grayish-cyan);
border-radius: 4px;
border: none;
outline: none;
}
.btn {
background-color: var(--Very-dark-cyan);
}
.btn:hover {
background-color: var(--Darker-cyan);
}
.btn2 {
background-color: var(--Dark-cyan);
color: var(--Very-dark-cyan);
}
.btn2:hover {
color: var(--Lighter-grayish-cyan);
background-color: var(--Very-dark-cyan);
}
.custom-btn {
border-radius: 4px;
border: none;
outline: none;
font-size: 16px;
width: 80px;
text-align: center;
color: var(--Darker-grayish-cyan);
background-color: var(--Lighter-grayish-cyan);
}
.custom-btn:hover {
cursor: pointer;
background-color: var(--Lighter-grayish-cyan);
border: 2px solid var(--Darker-cyan);
}
.section-right {
background-color: var(--Very-dark-cyan);
padding: 0 2rem 0rem 2rem;
}
.right-ptag {
font-size: 10px;
color: var(--Light-grayish-cyan);
margin-top: 2rem;
}
.right-ptag-span {
font-size: 8px;
color: var(--Dark-grayish-cyan);
display: block;
}
.reset-btn {
width: 100%;
height: 2rem;
border: none;
outline: none;
margin-top: 6rem;
background-color: var(--Dark-cyan);
text-transform: uppercase;
border-radius: 4px;
color: var(--Very-dark-cyan);
}
.reset-btn:hover {
cursor: pointer;
background: var(--Darker-cyan);
}

.attribution {
margin-top: 4rem;
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
@media (min-width: 200px) and (max-width: 500px) {
h1 {
margin-top: 3rem;
}
.hero-container {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
width: 100%;
margin: 5rem 0 0 0;
}
.grid-btns {
grid-template-columns: repeat(2, 1fr);
}
.section-left {
width: 80%;
height: 40%;
}
.custom-btn {
width: 200px;
}
.btn {
padding: 10px 25px;
}
.section-right {
margin-top: 70px;
width: 80%;
height: 30%;
}
.right-ptag {
margin-top: 1.75rem;
}
.reset-btn {
margin-top: 1.25rem;
}
}
@media (min-width: 502px) and (max-width: 1036px) {
h1 {
margin-top: 3rem;
}
.hero-container {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
width: 80%;
margin: 3rem 6rem 3rem 6rem;
}
.section-left,
.section-right {
width: 50%;
height: 40%;
}
.section-right {
margin-top: 65px;
}
.custom-btn {
width: 120px;
}
.reset-btn {
margin-top: 3rem;
}
.left-ptag {
font-size: 14px;
}
}
@media (min-width: 850px) and (max-width: 908px) {
h1 {
margin-top: 3rem;
}
.grid-btns {
grid-row-gap: 10px;
grid-column-gap: 5px;
}
.btn {
padding: 5px 15px;
}
.section-right {
padding: 0 0.75rem 0rem 0.75rem;
}
}

0 comments on commit d03e71a

Please sign in to comment.