Device Sync

INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /* global settings */
 *,
 *::before,
@@ -300,4 +301,308 @@ a {
   .footer-name {
     float: none;
   }
+=======
+/* global settings */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+  line-height: 1.6;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  background: url(../images/squares_bg.png);
+  color: #686868;
+}
+
+li {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* Header */
+.header-logo {
+  display: block;
+  margin: 2rem auto;
+  opacity: 30%;
+  width: 50%;
+}
+
+.header-title {
+  font-family: "Dancing script";
+  font-size: 4.2rem;
+  text-align: center;
+  color: teal;
+}
+
+.header-nav {
+  background-color: #fff;
+  text-align: center;
+  border-top: 5px solid teal;
+  border-bottom: 5px solid teal;
+  padding: 0.4rem 0;
+  margin-top: 2.4rem;
+}
+
+.header-nav-list-item {
+  margin: 0.8rem 0;
+}
+
+.header-nav-list-item a:link,
+.header-nav-list-item a:visited {
+  font-size: 2.4rem;
+  color: #686868;
+}
+
+.header-nav-list-item a:hover,
+.header-nav-list-item a:active {
+  color: teal;
+  font-weight: 600;
+}
+
+/* Main */
+.recipes {
+  margin-top: 2.4rem;
+}
+
+.recipe {
+  margin: 2rem 1rem;
+  border: 1px solid grey;
+  background-color: white;
+  border-radius: 20px;
+  padding: 2.4rem 1.2rem;
+}
+
+.recipe:hover {
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(-10px);
+  /* we will learn this later. Don't worry about this line*/
+}
+
+.recipe-title {
+  font-family: "Dancing script";
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  font-size: 3.6rem;
+  color: teal;
+  margin-bottom: 2.4rem;
+}
+
+.recipe-by,
+.recipe-by strong,
+.recipe-date {
+  text-align: right;
+  font-size: 1.6rem;
+}
+
+.recipe-image {
+  width: 80%;
+  border-radius: 50%;
+  display: block;
+  margin: 1rem auto;
+}
+
+.recipe-desc {
+  font-size: 1.8rem;
+  margin-top: 2.4rem;
+  padding: 0 1.2rem;
+}
+
+/* About */
+.about {
+  padding: 2.4rem;
+  background-color: rgb(82, 82, 82);
+  opacity: 70%;
+}
+
+.about-title {
+  font-family: "Dancing script";
+  font-size: 4.8rem;
+  color: #fff;
+  margin-top: 2rem;
+  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
+}
+
+.about-text {
+  /* use white colour + opacity or grey font color to achieve this result*/
+  color: #fff;
+  opacity: 0.75;
+  font-size: 1.8rem;
+  margin: 2rem 0;
+  text-shadow: 1px 1px 0 black;
+}
+
+.about-logo {
+  display: none;
+}
+
+/* Footer */
+.footer {
+  background-color: teal;
+  color: rgb(207, 207, 207);
+  text-align: center;
+  padding: 3.6rem 0;
+  font-size: 2.4rem;
+}
+
+.footer-name {
+  color: #fff;
+  font-size: 2.4rem;
+}
+
+@media only screen and (min-width: 820px) {
+  /* Header */
+  .header {
+    position: relative;
+  }
+
+  .header-logo {
+    position: absolute;
+    left: 5%;
+    top: 33%;
+    transform: translateY(-50%);
+    width: 25%;
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  .header-title {
+    font-size: 6rem;
+  }
+
+  .header-nav {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .header-nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+    width: 100%;
+  }
+
+  /* Recipe cards */
+  .recipe {
+    position: relative;
+  }
+
+  .recipe-image {
+    display: block;
+    width: 30%;
+    border-radius: 50%;
+    margin: 0;
+    float: left;
+  }
+
+  .recipe-title {
+    font-size: 4.8rem;
+  }
+
+  .recipe-desc {
+    display: inline-block;
+    width: 65%;
+    margin-left: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 0;
+  }
+
+  /* About Sandy */
+  .about-logo {
+    display: inline;
+    float: left;
+    margin-top: 2rem;
+    margin-right: 4rem;
+    margin-bottom: 2rem;
+  }
+
+  .about-text {
+    display: inline;
+    vertical-align: top;
+    font-size: 1.8rem;
+  }
+
+  /* Footer needs no changes */
+}
+
+@media only screen and (min-width: 1200px) {
+  /* Header */
+  .header-logo {
+    width: 10%;
+  }
+
+  /* Recipe cards */
+  .recipes {
+    display: flex;
+    gap: 2rem;
+  }
+
+  .recipe-image {
+    width: 100%;
+    margin: auto;
+  }
+
+  .recipe-title {
+    font-size: 8rem;
+    margin: 0;
+    line-height: normal;
+  }
+
+  .recipe-by {
+    font-size: 2rem;
+  }
+
+  .recipe-date {
+    font-size: 2rem;
+  }
+  .recipe-desc {
+    width: 95%;
+    font-size: 2rem;
+  }
+
+  /* About Sandy */
+  .about-title {
+    font-size: 8rem;
+  }
+
+  .about-logo {
+    width: 300px;
+  }
+
+  .about-text {
+    font-size: 2.2rem;
+  }
+
+  /* Footer */
+  .footer {
+    margin-top: 0.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3.6rem 2rem;
+  }
+
+  .footer p {
+    margin: 0;
+  }
+
+  .footer-name {
+    float: none;
+  }
+>>>>>>> a2ad5843006c62096be10203d3f91faa39f365fb
 }