Skip to content

Commit

Permalink
Removed redundancies on index.css and user-page.css. Additionally, I …
Browse files Browse the repository at this point in the history 
…finished standardizing index.html.
  • Loading branch information
@jonathannnty
jonathannnty committed Sep 16, 2024
1 parent cbeb603 commit e51611c
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 83 deletions.
124 changes: 76 additions & 48 deletions source/css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,100 @@
.sign-up{
background-color: rgba(254, 153, 32, 0.80);
padding: 7.5px;
padding-bottom: 50px;

font-size: 200%;

padding-left: 30px;

.sign-up {
background-color: #fe9920cc;
padding: 1em;
font-size: 200%;
padding-left: 30px;
}

.header-links{
padding-left: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 50px;

font-size: 165%
.header-container p {
margin: 0 0 2em 0;
}

.info-splurge{
font-size: 200%;
.header-container h1 {
margin: 0.5em 0 0 0;
}

.grid{
display: grid;
grid-template-columns: 1fr 1fr;
.interface-button {
flex-grow: 0.75;
height: auto;
border: none;
border-radius: 1.5em;
white-space: nowrap;
background: #fe9920;
flex-grow: 0.75;
height: auto;
text-align: center;
border: none;
color: #000000;
font-size: 70%;
margin: 0;
text-decoration: none;
text-align: center;
padding: 1em 7.5em;
}

.interface-button:hover {
background-color: #fe910b;
}

.info-splurge{
padding-left: 25px;
.interface-button:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}

#sign-up-button{
background: #FE9920;
padding-top:5px;
padding-bottom:5px;
padding-left: 20px;
padding-right: 20px;
width:300px;
height:50px;
.interface-button:focus {
box-shadow: #f48701 0 0 3px;
outline: none;
}

font-size: 70%;
.interface-button:disabled {
border-color: #1b1f231a;
color: #ffffffcc;
cursor: default;
}

border-radius: 10px;
.interface-button:active {
background-color: #df7b01;
box-shadow: #14462033 0 1px 0 inset;
}

.info-splurge {
padding: 0 2em;
}
.info-splurge h2 {
font-size: 2.5em;
padding: 0;
margin-bottom: 0;
}

#wholefoods-icon{
border-radius: 50px;
.info-splurge p {
font-size: 1.75em;
margin-top: 0;
}

#walmart-icon{
border-radius: 50px;
.header-links {
padding-left: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 50px;
font-size: 165%;
}

#costco-icon{
border-radius: 50px;
.grid {
display: grid;
grid-auto-columns: auto;
grid-template-columns: 1fr 1fr;
}

.column{
display: flex;
align-items: center;
justify-content: center;
.brand-images {
display: flex;
flex-direction: column;
align-self: center;
height: auto;
width: auto;
}

.brand-images{
display: flex;
flex-direction: column;
align-self: center;
}
.image {
height: 6em;
width: 6em;
border-radius: 5em;
}
2 changes: 2 additions & 0 deletions source/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ body {
/* Prevents tiling of background gradients or images */
max-width: 100vw;
/* Gets rid of unnecessary scroll bar that appeared on some screens */
background-image: url(../assets/images/gradient-bg-img.png);
background-size: cover;
}

body {
Expand Down
34 changes: 18 additions & 16 deletions source/css/user-page.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#user-page {
body {
background-image: url(../assets/images/gradient-bg-img.png);
background-size: cover;
}
Expand All @@ -7,7 +7,7 @@
display: flex;
flex-direction: row;
align-content: space-between;
background-color: #fe9920;
background-color: #fe9920cc;
width: 100vw;
padding-bottom: 8em;
}
Expand All @@ -23,11 +23,11 @@
color: #000000;
font-size: 1.5em;
font-weight: 600;
margin: 0em 1em;
margin: 0;
text-decoration: none;
text-align: center;
height: 15rem;
padding: 3em 0;
padding: 1em;
}

.user-greeting {
Expand Down Expand Up @@ -92,43 +92,45 @@
.green-box {
display: flex;
flex-direction: column;
margin: 0em;
padding: 0;
margin: 0 1em;
padding: 0em;
background-color: #7c9e57;
border-radius: 2em;
width: auto;
}

.interface-button {
flex-grow: 0.75;
height: auto;
background-color: #7c9e57;
text-align: center;
border: none;
border-radius: 2em;
}

.user-links button:hover {
.interface-button:hover {
background-color: #719150;
}

.user-links button:focus:not(:focus-visible):not(.focus-visible) {
.interface-button:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}

.user-links button:focus {
box-shadow: rgb(102, 132, 72) 0 0 3px;
.interface-button:focus {
box-shadow: #668448 0 0 3px;
outline: none;
}

.user-links button:disabled {
border-color: rgba(27, 31, 35, 0.1);
color: rgba(255, 255, 255, 0.8);
.interface-button:disabled {
border-color: #1b1f231a;
color: #ffffffcc;
cursor: default;
}

.user-links button:active {
background-color: rgb(102, 132, 72);
box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
.interface-button:active {
background-color: #668448;
box-shadow: #14462033 0 1px 0 inset;
}

.fade-out {
Expand Down
30 changes: 12 additions & 18 deletions source/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/index.css">
<title>Go Go Grocery!</title>
</head>

<body>
<!--Formatting for the header - CONSISTENT ACROSS HTML FILES-->
<header>
Expand All @@ -29,44 +27,40 @@ <h1>Go Go Grocery</h1>
</div>
</div>
</header>

<br>
<br>

<!--Holds orange segment of webpage with logos and sign-up button-->
<main class="info">
<section class="sign-up">
<div class="grid">
<div class="header-container">
<h1>Start Comparing Today!</h1>
<p>Shop Smart, Save Smart!</p>
<button id="sign-up-button">Sign Up!</button>
<button id="sign-up-button" class="interface-button" >Sign Up!</button>
</div>
<div class="brand-images">
<div class="row">
<img id="amazon-icon" src="./assets/images/amazon-icon.png" width="80" height="80">
<img id="grocery-outlet-icon" src="./assets/images/grocery-outlet-icon.png" width="80" height="80">
<img id="walmart-icon" src="./assets/images/walmart-icon.png" width="80" height="80">
<img id="target-icon" src="./assets/images/target-icon.png" width="80" height="80">
<img id="amazon-icon" class="image" src="./assets/images/amazon-icon.png" width="80" height="80">
<img id="grocery-outlet-icon" class="image" src="./assets/images/grocery-outlet-icon.png" width="80" height="80">
<img id="walmart-icon" class="image" src="./assets/images/walmart-icon.png" width="80" height="80">
<img id="target-icon" class="image" src="./assets/images/target-icon.png" width="80" height="80">
</div>
<div class="row">
<img id="wholefoods-icon" src="./assets/images/wholefoods-icon.png" width="80" height="80">
<img id="ralphs-icon" src="./assets/images/ralphs-icon.png" width="80" height="80">
<img id="costco-icon" src="./assets/images/costco-icon.png" width="80" height="80">
<img id="traderjoes-icon" src="./assets/images/traderjoes-icon.png" width="80" height="80">
<img id="wholefoods-icon" class="image" src="./assets/images/wholefoods-icon.png" width="80" height="80">
<img id="ralphs-icon" class="image" src="./assets/images/ralphs-icon.png" width="80" height="80">
<img id="costco-icon" class="image" src="./assets/images/costco-icon.png" width="80" height="80">
<img id="traderjoes-icon" class="image" src="./assets/images/traderjoes-icon.png" width="80" height="80">
</div>
</div>
</div>
</section>

<!--Website's Info-->
<section class="info-splurge">
<h2>Who Are We?</h2>
<p> <b>Save</b> The ultimate destination for comparing prices on groceries and other daily essentials. We’ll make it easy for you to find the best deals and save money on your everyday purchases. Whether it’s fresh produce, household items, or pantry staples, our platform provides real-time price comparisons from your favorite grocery stores. Join our community and make every dollar count today!</p>
<p> <b>Share</b> Once you’ve created your grocery list, we make it easy for you to share your list to others through SMS, email, or social media. All to make your eventual trip to the grocery store all the more worth it!</p>
<p> <b>Strength</b> Healthy wallet, healthy mind! We’ve integrated nutritional facts for users to be more conscientious of their choices while shopping.</p>
<p> <b>Save.</b> The ultimate destination for comparing prices on groceries and other daily essentials. We’ll make it easy for you to find the best deals and save money on your everyday purchases. Whether it’s fresh produce, household items, or pantry staples, our platform provides real-time price comparisons from your favorite grocery stores. Join our community and make every dollar count today!</p>
<p> <b>Share.</b> Once you’ve created your grocery list, we make it easy for you to share your list to others through SMS, email, or social media. All to make your eventual trip to the grocery store all the more worth it!</p>
<p> <b>Strength.</b> Healthy wallet, healthy mind! We’ve integrated nutritional facts for users to be more conscientious of their choices while shopping.</p>
</section>

</main>
</body>

Expand Down
2 changes: 1 addition & 1 deletion source/user-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<title>Go Go Grocery!</title>
</head>

<body id="user-page">
<body>
<header>
<img id="home-button-logo" src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E" onclick="location.href='./index.html';">
<h1>Go Go Grocery</h1>
Expand Down

0 comments on commit e51611c

Please sign in to comment.