Skip to content

Commit

Permalink
modified ecommerce site
Browse files Browse the repository at this point in the history
  • Loading branch information
Thomas Nguyen authored and Thomas Nguyen committed Apr 17, 2024
1 parent c18af5c commit caf8bbe
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 43 deletions.
Binary file modified .DS_Store
Binary file not shown.
4 changes: 2 additions & 2 deletions about2.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
<img src = "./images/hand-water.jpg" width="100%" height="auto" alt="hand-water.jpg"/>
<!-- issues with max-width -->
<section class="title-bg"> <!-- adding a background to the border-->
<div class="d-flex container justify-content-center">
<div class="container text-center">
<section class="row-fluid"><!-- added white colored text, but I want our story to be centered-->
<h1 class="display-5">OUR STORY</h1>
<h5><b>GREEN TEA HERITAGE</b></h5>
Expand All @@ -116,7 +116,7 @@ <h1>Founder</h1>
</p>
</div>
<div class="col">
<img src="./images/mingyuSmiling.jpg" width="auto" height="400">
<img src="./images/mingyuSmiling.jpg" width="auto" height="400" alt="mingyuSmiles.jpg">
</div>
</div>
</div>
Expand Down
40 changes: 28 additions & 12 deletions contact2.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,20 +81,36 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
</nav>
</header>
<body class="bg-color">
<div class="container my-5">
<h1 class="display-5"><center>Contact Us</center></h1>
<div class="container">
<h1 class="display-5 text-center">Contact Us</h1>
</div>
<div class="container-fluid center-form">
<div class="d-flex container justify-content-center text-center">
<div class="row">
<div class="col contact-form">
<form method = "get"> <!--extremely necessary for input forms-->
<label for = "name"> Name: </label> <br>
<input type = "text" id = "name" name = "name"/> <br>

<label for ="Message">Message: </label><br>
<textarea rows = "4" cols = "30" id ="msg" name ="msg"></textarea> <br>
<center><input type = "Submit" value = "Submit"/></center>
</form>
<div class="col">
<div class="mb-3">
<div class="mb-3">
<form method="get">
<label for="name" class="form-label mb-2">Name: </label>
<input
type="text"
class="form-control"
name=""
id=""
aria-describedby="helpId"
placeholder=""
/>

<label for ="Message" class="mt-2">Message: </label><br>
<textarea class="mt-2"rows = "4" cols = "30" id ="msg" name ="msg"></textarea> <br>
<input class="btn btn-light mt-3" type = "Submit" value = "Submit"/>
</form>
<small id="helpId" class="form-text text-muted">Any questions, contact us!</small>


</div>

</div>

</div>
</div>
</div>
Expand Down
7 changes: 4 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,10 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
<body class="background bg-color"> <!-- setting entire background color-->
<div class="container justify-content-end text-end">
<p class="display-5" style="color: white;"> Welcome to <br> Innisfree <br> Skincare.</p>

<a class="btn btn-primary" href="./about2.html" role="button">
[add logo] Come In
</a>
</div>
<a class="btn btn-primary" href="./about2.html" role="button">
[add logo] Come In
</a>
</body>
</html>
16 changes: 8 additions & 8 deletions products2.html
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 2 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -131,7 +131,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 3 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -152,7 +152,7 @@ <h5> [insert product name] </h5>
<div class="row row-cols-sm-1
row-cols-lg-3"><!-- shows 1 cols per row in small viewport, 3 in lg viewport-->
<div class="col"><!-- product 4 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -166,7 +166,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 5 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -180,7 +180,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 6 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -201,7 +201,7 @@ <h5> [insert product name] </h5>
<div class="row row-cols-sm-1
row-cols-lg-3"><!-- shows 1 cols per row in small viewport, 3 in lg viewport-->
<div class="col"><!-- product 7 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -215,7 +215,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 8 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand All @@ -229,7 +229,7 @@ <h5> [insert product name] </h5>
</div>
</div>
<div class="col"><!-- product 9 here-->
<div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
<div class="card text-center"> <!-- need to make the text centered-->
<img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
<div class="card-body">
Expand Down
18 changes: 0 additions & 18 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,35 +35,17 @@ aside button{
}


.center {
display: block;
margin-left: auto;
margin-right: auto;
}

/* title of each product */
figure > h5{
text-align: center;
}

.center-form{
display: flex;
justify-content: center;
align-items: center;

}

.form-text{
color:black;
}


.contact-form{
background-color:rgb(115, 166, 185);
padding: 20px;
border-radius: 5px;
max-width: 100%;
}


/* all these are for products page */
Expand Down

0 comments on commit caf8bbe

Please sign in to comment.