engl-4814 · lingeringcode · Feb 19, 2024 · Feb 19, 2024 · Feb 20, 2024 · Feb 20, 2024
diff --git a/wilson/about-me.html b/wilson/about-me.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> How to stay fit </title>
+    <meta name="author" content="Elizabeth Wilson"> 
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<div class="topnav">
+    <a href="index.html">Home</a>
+    <a class="active" href="about-me.html">About Me</a>
+    <a href="workout.html">Workouts</a>
+    <a href="nutrition.html">Nutrition</a>
+  </div>
+<body>
+    <a hidden href="#main" class="skip-to-link">Skip to content</a>
+    <header role="banner" id="main">
+        <h1>About Me</h1>
+    </header>
+<main role="main" class="flex">
+    My name is Elizabeth Wilson and I am a junior studying Public Relations and minoring in Event and Experience Managment and Professional and Technical Writing at Virginia Tech.
+</main>
+    <div>
+        I love working out and wanted to dedicate a website to keep me in track as well as others. I want to reach a target of building musscle and losing weight by the time I graduate.
+    </div>
+    <div>
+        Some of my hobbies include workingout, photography, videography, traveling, trying new things, and learning more about the world.
+    </div>
+    <div>
+        If you want to check out more of my stuff check out my website
+    </div>
+    <div>
+        <a href="https://elizabethawilson567.wixsite.com/all-about-elizabeth"target="_blank">My website</a>
+    </div>
+</body>
+</html>
diff --git a/wilson/assets/css/style.css b/wilson/assets/css/style.css
@@ -0,0 +1,278 @@
+@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Inter&family=Lobster&display=swap');
+
+:root {
+  --headingFonts: "Oswald",serif;
+  --copyFonts: "Nunito", sans-serif;
+  /* --specialCaseFonts: "Lobster",cursive; */
+
+  --backgroundColor: #ffe9d7;
+  --foregroundColor: #0d242f;
+
+  --primaryColor: #c51350;
+  --primaryShade1: #ffd6b5;
+  --primaryShade2: #ffbc85;
+  --primaryShade3: #ffa053;
+  --primaryShade4: #e8751a;
+  --primaryShade5: #e46802;
+
+  --secondaryColor: #f44336;
+  --secondaryShade1: #ffdde0;
+  --secondaryShade2: #ffcdd2;
+  --secondaryShade3: #ef9a9a;
+  --secondaryShade4: #d32f2f;
+  --secondaryShade5: #b71c1c;
+
+  --accentColor: #fda403;
+  --accentShade1: #f9f1dc;
+  --accentShade2: #f4dea7;
+  --accentShade3: #f2cb69;
+  --accentShade4: #f0bb34;
+  --accentShade5: #b68300;
+
+  --accent2Color: #009688;
+  --accent2Shade1: #e0f2f1;
+  --accent2Shade2: #b2dfdb;
+  --accent2Shade3: #64babe;
+  --accent2Shade4: #429499;
+  --accent2Shade5: #1d7b80;
+
+  --accent3Color: #014980;
+  --accent3Shade1: #80c8ff;
+  --accent3Shade2: #46adfc;
+  --accent3Shade3: #2089d9;
+  --accent3Shade4: #0067b6;
+  --accent3Shade5: #02589b;
+
+  --neutralShade1: #f2f2f2;
+  --neutralShade2: #e8e9e9;
+  --neutralShade3: #d1d3d4;
+  --neutralShade4: #babdbf;
+  --neutralShade5: #808488;
+  --neutralShade6: #666a6d;
+  --neutralShade7: #4d5052;
+  --neutralShade8: #322076;
+
+  font-size: 18px;
+}
+
+/* GENERAL COLOR SCHEME
+======================*/
+body {
+  margin: 1rem;
+  background: #e0dbee;
+  color: var(--neutralShade8);
+  font-family: var(--copyFonts);
+  text-align: center;
+}
+
+  /* };
+  color: var(--neutralShade8);
+  font-family: var(--copyFonts);
+} */
+
+/* TYPOGRAPHY
+============*/
+
+/* Font Families */
+
+
+.oswald-head {
+  font-family: "Oswald", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal; 
+
+}
+
+
+
+.nunito-body {
+  font-family: "Nunito", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* Emphasis and Bolding */
+strong { font-weight: 500; }
+em { font-style: italic; }
+
+/* p,a,blockquote,cite,ul,ol,li {
+  color: var(--primaryColor);
+} */
+
+h1,h2,h3,h4 {
+  font-family: var(--headingFonts);
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--secondaryShade5);
+
+}
+
+/* Font sizing */
+h1 { font-size: clamp(36px, 10vw, 62px) }
+h2 { font-size: clamp(30px, 10vw, 48px); }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.75rem; font-style: italic;}
+
+/* Font spacing */
+h2,h4 {
+  margin: 2rem 0;
+}
+h3 { margin: 4rem 0 2rem 0; }
+p,ul,ol {
+  color: #322076;
+  font-family: var(--copyFonts);
+  margin: 2rem 0;
+  line-height: 1.5;
+}
+
+/* navbar classes */
+.topnav {
+  overflow: hidden;
+  background-color: #151751;
+}
+
+.topnav a {
+  /* float: left; */
+  /* should be using your variables here for colors */
+  color: #f2f2f2;
+  color: var(--neutralShade1);
+  /* text-align: center;
+  padding: 14px 16px; */
+  padding: 1rem;
+  text-decoration: none;
+  /* font-size: 17px; */
+}
+
+.topnav a:hover {
+  /* Again, why not use your vars? */
+  background-color: #5bbef3;
+  color: #322076;
+  background-color: var(--accent3Shade1);
+  color: var(--accent3Shade5);
+}
+
+.topnav a.active {
+  background-color: #aa0404;
+  color: white;
+}
+
+/* MEDIA
+=======*/
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+
+/* You should change this comment/heading to suite your context. */
+/* GRID WORK, YO!
+==================*/
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+/* I would refrain from centering all the text, as per the CRAP design assignment */
+/* #main {
+  text-align: center;
+ } */
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 10%;
+  padding-right: 10%;
+
+}
+.flex__main_container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem; /*use this instead of padding for uniformity*/
+
+  /* Two flex items are sections */
+  &> section {
+    flex: 1 1 250px;
+
+    .flex_item__main_img_container {
+      /* fixed height for the cover effect */
+      height: 400px;
+
+      img { object-fit: cover; }
+    }
+  }
+}
+
+/*
+
+These weren't doing much, which the inspection tool would help you see.
+
+The width 500px was tripping you pu however, because those absolute values will break out of any screen or container less than 500px
+
+*/
+/* .displayFirst{
+  width: 100%;
+}
+
+
+.displaySecond {
+  display: inline-block;
+  width: 500px;
+  position: center;
+  padding-left: 20%;
+} */
+
+
+/* In your case, I think things look pretty good until a large to larger screen size. After about 1000-1100px, the banner gets a bit too large IMO. In that case, you could create a class to put on the body tag, so all of the landmarks could become grid items to place in a different manner. */
+
+/* mobile-first design uses mainly min-width checks to scale up from the mobile sizing */
+@media screen and (min-width: 1050px) {
+  /* grid item areas */
+  .grid__large_page_layout {
+    &> nav { grid-area: nav; }
+    &> header { grid-area: hdr; }
+    &> main { grid-area: main; }
+    &> aside { grid-area: asd; }
+    &> footer { grid-area: ftr; }
+  }
+
+  .grid__large_page_layout {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-areas:
+    "nav hdr hdr hdr hdr hdr"
+    "nav hdr hdr hdr hdr hdr"
+    "nav main main main main main"
+    "nav main main main main main"
+    "nav asd asd ftr ftr ftr"
+    ;
+  }
+
+  /* Adjust the nav items to new context */
+  .topnav a {
+    display: block;
+    text-align: left;
+  }
+}
+
+/* @media screen and (max-width: 992px) {
+  .displaySecond {
+    position: center;
+    width: 400px;
+    padding-left: 10%;
+    padding-right: 15%;
+  }
+} */
+
+
+/* @media screen and (max-width: 400px) {
+  .displaySecond {
+    position: center;
+    width: 200px;
+    padding-left: 10%;
+    padding-right: 15%;
+  }
+} */
+