CodeYourFuture · Millena28 · Oct 26, 2024 · Oct 26, 2024 · Oct 26, 2024 · Oct 26, 2024
diff --git a/.https:/github.com/Millena28/Module-User-Focused-Data/tree/Form-control b/.https:/github.com/Millena28/Module-User-Focused-Data/tree/Form-control
diff --git a/README.md b/README.md
@@ -26,6 +26,6 @@ Every module, you will _iterate_ on your portfolio, adding a new project and imp
 
 ## Resources
 
-- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec)
-- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/)
-- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/)
+Google searches
+Searching different tutorial websites
+Some Tutorial videos on youtube
diff --git a/index.html b/index.html
@@ -38,48 +38,74 @@
   </head>
   <body>
     <header>
-      <h1>My Name</h1>
+      <h1>Millena Mesfin</h1>
       <nav>
-        <ul>
-          <li><a href="#about">About Me</a></li>
-          <li><a href="#projects">Projects</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
+
       </nav>
     </header>
     <main tabindex="0">
       <section id="about">
         <header><h2>About Me</h2></header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
-        </p>
+          Millena is a dedicated software engineer who has developed strong expertise
+          through the Code Your Future (CYF) program. During this time, I have gained 
+          valuable skills in HTML, CSS, JavaScript, and SQL, which have equipped me 
+          to build dynamic, responsive websites and manage databases efficiently.
+          With a keen eye for detail, I excel at creating clean, well-structured code
+          that ensures optimal user experience.My passion for learning and 
+          problem-solving continues to drive my growth as a software engineer,
+           making me a valuable asset to any development team
+         </p>
       </section>
-      <section id="projects">
-        <header><h2>Projects Showcase</h2></header>
+      <header><h2>My Hometown Project</h2></header>
+        <p>
+          My hometown page typically provides an overview of Asmara capital city of Eritrea,
+          highlighting its history, key landmarks, and community features and  serves as a 
+          resource for people looking to explore or connect with Asmara's culture and offerings.  
+        </p>
+        <header><h2>My Form control Project</h2></header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
+          My form is to collect customer information for purchasing shirts and includes fields 
+          for customer personal information, such as name, Email, and delivery date.
         </p>
       </section>
       <section id="contact">
         <header><h2>Contact me</h2></header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
+          Email= [email protected]
         </p>
+        <p>
+          Github= Millena28
+         </p>
+
       </section>
+      <h2>Explore the Project</h2>
+
+      <ul>
+        <li>
+          <a
+            href="https://github.com/CodeYourFuture/Module-User-Focused-Data/pull/273"
+            target="_blank"
+            >T-shirt form</a
+          >
+        </li>
+        <li>
+          <a href="file:///Users/nahom/Downloads/Mili%20Hometown%20/index.html"
+          target="_blank"
+
+            >Hometown</a
+          >
+        </li>
+      </ul>
+
+
+      </ul>
+    </section>
     </main>
     <footer>
       <h3>
-        <a href="https://github.com/CodeYourFuture/Portfolio"
-          ><svg
+        <a href="https://github.com/CodeYourFuture/Portfolio"</a>
+          <svg
             focusable="false"
             role="presentation"
             viewbox="0 0 98 96"
@@ -94,7 +120,7 @@ <h3>
               fill="currentColor"
             />
           </svg>
-          Read me</a
+          Read Me</a
         >
       </h3>
     </footer>

diff --git a/style.css b/style.css
@@ -1,57 +1,70 @@
-/* Design tokens */
-:root {
-  --paper: hsla(251, 28%, 88%, 0.99);
-  --ink: hsla(244, 16%, 17%, 0.95);
-  --brand: hsla(0, 79%, 63%, 0.9);
-  --font: "Raleway", system-ui, sans-serif;
-  --gap: 20px;
-  --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px);
+* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
+
 /* General Styles */
-html,
 body {
-  scroll-behavior: smooth;
-  background: var(--paper);
-  color: var(--ink);
-  font-family: var(--font);
+  font-family: 'Raleway', sans-serif;
+  background-color: #f4f4f9;
+  color: #333;
+  line-height: 1.6;
 }
-body {
-  display: grid;
-  margin: auto;
-  min-height: 100vh;
-  gap: var(--gap);
-  max-width: var(--container);
-}
-a,
-a:any-link {
-  color: currentColor;
-  text-decoration: none;
-  border-bottom: 2px solid transparent;
-  transition: border-color ease-in-out 0.3s;
-}
-a:hover,
-a:focus {
-  color: var(--brand);
-  border-color: currentColor;
+
+header,
+footer {
+  background-color:rgba(133, 47, 133, 0.563);
+  color:black;
+  padding: 1.5em;
+  text-align: center;
 }
-/* Site header and navigation */
-body > header {
-  background: var(--paper);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 1;
+
+header h1 {
+  font-weight: 800;
+  font-size: 2em;
+  margin-bottom: 0.5em;
 }
+
 nav ul {
-  display: flex;
   list-style: none;
-  gap: var(--gap);
+  display: flex;
+  justify-content: center;
+  gap: 1.5em;
 }
 
-/* Text readability */
-section p {
-  line-height: 1.5;
-  max-width: 55ch;
+nav  {
+  color:black;
+  text-decoration: none;
+  font-weight: 30;
+  font-size: 1.1em;
+}
+
+nav a:hover {
+  color:black;
+}
+
+main {
+  max-width: 800px;
+  margin: 2em auto;
+  padding: 1em;
+}
+
+section {
+  margin-bottom: 1em;
+}
+
+section header h2 {
+  font-size: 1.8em;
+  font-weight: 800;
+  margin-bottom: 0.5em;
+  color: black;
+}
+section header h2 {
+  font-size: 1.8em;
+  font-weight: 800;
+  margin-bottom: 0.5em;
+  color: bkack;
 }
+