Front End Lab 4

2025-10-24 20:59:10 -04:00
parent d3d77666c9
commit 13c7cac19f
8 changed files with 36 additions and 12 deletions
--- a/Dev)/Labs/Lab-4/styles/styles.css
+++ b/Dev)/Labs/Lab-4/styles/styles.css
@@ -0,0 +1,126 @@
+/* Beginner elements */
+* {
+    margin: 0;
+}
+
+body {
+    background: url(../images/squares_bg.png);
+    font-family: Helvetica, sans-serif;
+    font-size: 1rem;
+}
+
+/* Header and logo */
+.logo {
+    opacity: 30%;
+    display: block;
+    margin: 2rem auto;
+}
+
+h1,
+h2 {
+    font-family: "Dancing Script", cursive;
+    color: teal;
+    font-size: 2rem;
+    text-shadow: 2px 2px 4px grey;
+    margin-left: 1.2rem;
+}
+
+.main-heading {
+    font-size: 2.2rem;
+    text-align: center;
+}
+
+/* Navbar styling */
+nav {
+    background-color: white;
+    border-top: 5px solid teal;
+    border-bottom: 5px solid teal;
+    margin: 2rem 0;
+}
+
+ul,
+a {
+    font-size: 1rem;
+    text-decoration: none;
+    list-style: none;
+    display: block;
+    text-align: center;
+    margin: 1.5rem 0;
+    color: grey;
+    font-weight: bold;
+    font-family: Helvetica, sans-serif;
+}
+
+/* Recipe card styling */
+.recipe-card {
+    margin: 2rem 1rem;
+    font-size: 1rem;
+    border: 2px solid grey;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 2px 2px 4px grey;
+}
+
+.recipe-card img {
+    display: block;
+    margin: 1.5rem auto;
+    border-radius: 60%;
+}
+
+.recipe-card p {
+    text-align: left;
+    line-height: 25px;
+    margin: 2rem;
+    color: grey;
+    font-weight: bold;
+    font-family: Helvetica, sans-serif;
+}
+
+.author {
+    text-align: right;
+    margin-right: 1rem;
+    color: grey;
+}
+
+.publish-date {
+    text-align: right;
+    color: rgba(75, 75, 75, 0.507);
+    margin-right: 1rem;
+}
+
+/* About section styling */
+.about-sandy {
+    background-color: grey;
+    background-image: url(../images/squares_bg.png);
+    padding-bottom: 1rem;
+    margin-bottom: 0.3rem;
+}
+
+.about-sandy p {
+    text-align: left;
+    line-height: 1.6rem;
+    margin: 2rem;
+    color: lightgrey;
+    font-weight: bold;
+}
+
+.about-sandy h2 {
+    color: white;
+    font-size: 3rem;
+    text-shadow: 2px 2px 4px black;
+}
+
+/* Footer styling */
+footer {
+    background: teal;
+    font-size: 1rem;
+    color: lightgrey;
+    padding: 2rem;
+    text-align: center;
+    line-height: 1.6;
+}
+
+
+footer strong {
+    color: white;
+}