new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png

new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/index.html new file: INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt new file: INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css
2025-11-02 12:30:09 -05:00
parent 4bdef9e16a
commit 9e58bb20db
11 changed files with 325 additions and 0 deletions
--- a/Dev)/Labs/Lab-5/styles/main.css
+++ b/Dev)/Labs/Lab-5/styles/main.css
@@ -0,0 +1,192 @@
+/* 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 (min-width: 820px) {
+  .header {
+    position: relative;
+  }
+
+  .header-logo {
+    position: absolute;
+    left: 5%;
+    top: 33%;
+    transform: translateY(-50%);
+    width: 15%;
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  .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%;
+  }
+}
+
+@media (min-width: 1200px) {}