Upload Home CSS

HTML and CSS Files/mainHome.css

+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+
+.homeHeader {
+  background-color: rgba(40, 40, 40, 1);
+  width: 100vw;
+  display: grid;
+  grid-template-columns: repeat(4, 25vw);
+}
+.breadcrumbsHead {
+  font-family: "Roboto Bold";
+  font-size: 46px;
+  margin-left: 50px;
+  color: white;
+  grid-column: 1/2;
+}
+.sideHeader {
+  grid-column: 4/5;
+  display: grid;
+  grid-template-columns: repeat(2, 12.5vw);
+}
+.loginText {
+  grid-column: 1/2;
+  font-family: "Roboto";
+  font-size: 24px;
+  margin-top: 15px;
+  color: white;
+  text-align: center;
+}
+.signUpButton {
+  grid-column: 2/3;
+  margin: 10px;
+  background-color: rgba(140, 140, 140, 0.7);
+  transform: none;
+}
+.signUpText {
+  font-family: "Roboto Black";
+  font-size: 16px;
+  color: white;
+  margin: 10px;
+  text-align: center;
+}
+  
+.lowerPage {
+  width: 100vw;
+  display: grid;
+  grid-template-columns: repeat(4, 25vw);
+  grid-template-rows: 50vh 12.5vh 50vh;
+  background-color: white;
+}
+.frontBar {
+  grid-column: 1/5;
+  grid-row: 1/2;
+  background-color: rgba(196, 196, 196, 0.6);
+  display: grid;
+  grid-template-columns: repeat(5, 20vw);
+}
+.frontHeader {
+  grid-column: 2/5;
+  text-align: center;
+  font-family: "Roboto Medium";
+  font-size: 50px;
+  margin-top: 30px;
+}
+.frontDescription {
+  grid-column: 2/5;
+  text-align: center;
+  font-family: "Roboto Medium";
+  font-size: 20px;
+}
+.frontButton {
+  grid-column: 3/4;
+  background-color: rgba(31, 31, 31, 0.7);
+  margin: 10px;
+}
+.frontText {
+  text-align: center;
+  font-family: "Roboto Black";
+  font-size: 27px;
+  color: white;
+  margin: 10px;
+  margin-top: 30px;
+}
+
+
+.middleBar {
+  grid-column: 1/5;
+  grid-row: 2/3;
+  background-color: rgba(191, 191, 191, 1);
+  display: grid;
+  grid-template-columns: repeat(3, 33.33vw);
+}
+.sellingPoint {
+  font-family: "Roboto Slab";
+  font-size: 18px;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 8.33vw 25vw;
+}
+.one {
+  grid-column: 1/2;
+}
+.two {
+  grid-column: 2/3;
+}
+.three {
+  grid-column: 3/4;
+}
+#middleIcon {
+  grid-column: 1/2;
+  clip-path: circle();
+  background-color: grey;
+}
+.middleText {
+  grid-column: 2/3;
+  margin: 20px;
+}
+
+.featuresBar {
+  grid-column: 1/5;
+  grid-row: 3/4;
+  background-color: white;
+  display: grid;
+  grid-template-columns: repeat(3, 33.33vw);
+}
+.feature {
+  font-family: "Roboto Slab";
+  font-size: 18px;
+  text-align: center;
+  margin-top: 100px;
+  display: grid;
+}
+.fridge {
+  grid-column: 1/2;
+}
+.alerts {
+  grid-column: 2/3;
+}
+.budget {
+  grid-column: 3/4;
+}
+#fridgeIcon {
+  grid-row: 1/2;
+  background-color: grey;
+  margin-left: 100px;
+  margin-right: 100px;
+}
+#alertsIcon {
+  grid-row: 1/2;
+  background-color: grey;
+  margin-left: 100px;
+  margin-right: 100px;
+}
+#budgetIcon {
+  grid-row: 1/2;
+  background-color: grey;
+  margin-left: 100px;
+  margin-right: 100px;
+}
+.featureText {
+  grid-row: 2/3;
+  margin: 15px;
+  margin-left: 50px;
+  margin-right: 50px;
+}
+
+
+@font-face {
+  font-family: Roboto Bold;
+  src: url(Roboto-Bold.ttf);
+}
+@font-face {
+  font-family: Roboto Black;
+  src: url(Roboto-Black.ttf);
+}
+@font-face {
+  font-family: Roboto Medium;
+  src: url(Roboto-Medium.ttf);
+}
+@font-face {
+  font-family: Roboto;
+  src: url(Roboto-Regular.ttf);
+}
+@font-face {
+  font-family: Roboto Slab;
+  src: url(Roboto-Slab.ttf);
+}
+
+.signUpButton:hover {
+  background-color: rgba(140, 140, 140, 1);
+  transition: background-color .5s;
+}
+.frontButton:hover {
+  background-color: rgba(31, 31, 31, 1);
+  transition: background-color .5s;
+}
+
+a {
+	color: rgba(0,0,0,0);
+}
+
+.main{
+  margin-left: 23%;
+}
\ No newline at end of file