+
+
+
+
+
The Chef-focused recipe site
+
Simmr offers the best experience for chefs and recipe-seekers alike.
Looking to show off your delicious work? We’ve got you. Hungry for dinner? We’ve got you, too.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/less/about-us.less b/less/about-us.less
new file mode 100644
index 0000000..51d0484
--- /dev/null
+++ b/less/about-us.less
@@ -0,0 +1,114 @@
+// *{
+// // Box-sizing:border-box;
+// // Padding: 0 ;
+// // Margin:0;
+// // Max-width:100%;
+// // Border: 1px solid red;
+// }
+
+ body{
+ background: #696969;
+ }
+
+.top-class{
+ display: flex;
+}
+
+.logo{
+ margin-top: 15px;
+ margin-left: 10px;
+}
+
+
+
+ .navigation1{
+ margin-top: 5px;
+ margin-left: 60%;
+ padding: 20px;
+ padding-left: 5px;
+
+ nav{
+
+ @media(max-width:800px){
+ display: flex;
+ margin-top: 30px;
+
+ }
+ }
+
+ nav a {
+ text-decoration: none;
+ color: white;
+ font-size: 20px;
+ margin-right: 6px;
+ margin-left: 15px;
+ }
+
+ @media(max-width:800px){
+ display: flex;
+ margin: 2px 0px 0px 200px;
+ padding: 0;
+ }
+
+ @media(max-width: 500px){
+ margin: 0;
+ }
+ }
+
+
+
+
+ #banner{
+ h1 {
+ display: flex;
+ align-items: center;
+ font-size: 60px;
+ margin: auto;
+ margin-left: 35%;
+ padding-top: 200px;
+
+ @media(max-width:800px){
+ margin: 0;
+ }
+ }
+
+
+ }
+
+
+ .boxes{
+ display:flex;
+ justify-content:space-evenly;
+ flex-wrap:wrap;
+ margin-top: 10%;
+ margin-bottom: 10px;
+ padding-top: 50px;
+ padding-bottom: 50px;
+
+ }
+
+ .box-properties{
+ padding:20px;
+ margin-bottom: 30px;
+ text-align:left;
+ background-color:#D8E7ED;
+ border-radius: 6px;
+ width: 230px;
+ height: 284px;
+ }
+
+ .box1{
+ .box-properties();
+ h2{
+ margin-top: 40%;
+ }
+ a{
+ font-size: 18px;
+ text-decoration: none;
+ color: red;
+ }
+ }
+
+ .img{
+ width: 2%;
+ }
\ No newline at end of file
diff --git a/less/global.less b/less/global.less
new file mode 100644
index 0000000..e69de29
diff --git a/less/home-page.less b/less/home-page.less
new file mode 100644
index 0000000..5d66020
--- /dev/null
+++ b/less/home-page.less
@@ -0,0 +1,174 @@
+
+.top-class{
+ display: flex;
+}
+
+.logo{
+ margin-top: 15px;
+ margin-left: 10px;
+
+
+ img{
+ @media(max-width:500px){
+ width:100%;
+ height: auto;
+ }
+
+ @media(max-width:800px){
+ margin-left: 15px;
+ }
+ }
+
+
+}
+
+// img{
+// width: 100%;
+// }
+
+nav a {
+ text-decoration: none;
+ color: gray;
+ font-size: 20px;
+ margin-right: 6px;
+ margin-left: 15px;
+
+ @media(max-width:800px){
+ text-align: center;
+ }
+ }
+
+ .navigation{
+ margin-top: 5px;
+ margin-left: 60%;
+ padding: 20px;
+ padding-left: 5px;
+ }
+
+ .navigation nav{
+
+ @media(max-width:800px){
+ display: flex;
+ }
+ }
+
+ .purpose{
+
+ h1{
+ font-size: 48px;
+ color: #42403D;
+ margin-top: 50px;
+
+ @media(max-width:800px){
+ font-size: 35px;
+ text-align: center;
+ }
+ }
+
+ p{
+ font-size: 20px;
+ margin-top: 35px;
+ @media(max-width:800px){
+ font-size: 16px;
+ text-align: center;
+ margin-right: 7%;
+
+ }
+ }
+ }
+
+
+
+ .chef-logo img{
+ width: 100%;
+ padding-bottom: 10%;
+
+ }
+
+
+ .main-page{
+ display: flex;
+ }
+
+ .buttons{
+ margin-top: 20%;
+ align-items: center;
+ @media(max-width:800px){
+ display: flex;
+ flex-direction: column;
+ }
+
+ a{
+ text-decoration: none;
+ }
+
+ .swap {
+ background: var(--bg-color);
+ color: var(--fg-color);
+ box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+ }
+
+ .swap:hover, .swap:focus {
+ background: var(--fg-color);
+ color: var(--bg-color);
+ box-shadow: 0 0 8px 2px var(--fg-color);
+ }
+
+ }
+
+
+ .sign-up{
+ --bg-color: @red;
+ --fg-color: #42403D;
+ margin-top: 20%;
+ background: @red;
+ border-radius: 12px;
+ width: 50%;
+ padding: 14px 40px;
+ font-size: 18px;
+ color: black;
+
+ @media(max-width: 800px){
+ padding: 5px 30px;
+ }
+
+ @media(max-width: 500px){
+ padding: 1px 30px;
+ }
+
+
+ }
+.learn-more{
+ --bg-color: #42403D;
+ --fg-color: @paleturquoise;
+ background: @gainsboro;
+ color: @red;
+ margin-top: 5%;
+ margin-bottom: 5%;
+ width: 50%;
+ font-size: 18px;
+ border-radius: 12px;
+ padding: 14px 40px;
+
+ @media(max-width:800px){
+ padding: 5px 30px;
+ }
+ @media(max-width: 500px){
+ padding: 1px 30px;
+ }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/less/index.less b/less/index.less
new file mode 100644
index 0000000..a9f6aa4
--- /dev/null
+++ b/less/index.less
@@ -0,0 +1,10 @@
+@import "reset";
+
+@import "mixins";
+@import "variables";
+
+// @import "about-us";
+@import "home-page";
+
+@import "navigation";
+
diff --git a/less/mixins.less b/less/mixins.less
new file mode 100644
index 0000000..8183136
--- /dev/null
+++ b/less/mixins.less
@@ -0,0 +1,5 @@
+// parametric mixin
+.design-properties(@font, @space){
+ font-size: @font;
+ padding: @space;
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
new file mode 100644
index 0000000..e69de29
diff --git a/less/reset.less b/less/reset.less
new file mode 100644
index 0000000..e59de81
--- /dev/null
+++ b/less/reset.less
@@ -0,0 +1,7 @@
+*{
+ Box-sizing:border-box;
+ Padding: 0 ;
+ Margin:0;
+ Max-width:100%;
+ // Border: 1px solid red;
+ }
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
new file mode 100644
index 0000000..905afb8
--- /dev/null
+++ b/less/variables.less
@@ -0,0 +1,7 @@
+// Mobile var
+@phone: ~"(max-width: 500px)";
+// color vars
+@shuttle-gray: #5E6164;
+@paleturquoise: #AFEEEE;
+@red: #D81E05;
+@gainsboro: #DCDCDC;
\ No newline at end of file
+