Code-the-Dream-School · dreamlala2023 · Oct 25, 2023 · Oct 31, 2023 · Nov 1, 2023 · Nov 9, 2023
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,141 @@
+
+
+.navcontainer {
+    display:flex;
+    flex:1 1 50px;
+    column-gap: 20px;
+    justify-content: center;
+    color:blueviolet;
+
+}
+
+
+
+#leaveMessage {
+    display:flex;
+    flex-direction: column;
+    column-gap: 20px;    
+}
+
+
+
+header {
+    position: sticky;
+    top:0;
+    z-index: 1000; 
+    text-align: center;
+    color:blueviolet;
+    background-color: white;
+}
+ * {
+    /*color:darkkhaki;*/
+    font-family: 'Oswald', sans-serif;
+ }
+
+ h1 {
+    font: size 1.5rem;
+    font-weight: 120%;
+    color:blueviolet;
+ }
+
+ h2 {
+    font: size 1.3rem;
+    font-weight: 120%;
+    color:blueviolet;
+ }
+
+ section {
+    margin-bottom: 20px;
+    color:darkkhaki;
+    padding-top: 100px; 
+    margin-top: -110px;
+ }
+
+ /**#experience li {
+    color:darkkhaki;
+    border: 50px black;
+    margin-top:5px;
+}
+**/
+
+.experience-item {
+    background-color: #f7f5f9;
+    color:darkkhaki;
+    border-radius: 50px black(--rounded);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 1rem;
+    margin-bottom: 10px;
+  }
+
+
+
+#skills .skills-buttons button {
+    color: darkkhaki;
+    background-color: white;
+    border: 1px solid darkkhaki;
+    margin-top: 5px;
+    margin-right: 10px;
+    padding: 8px 12px; /* Adjust padding for button size */
+
+}
+
+/*#skills .skill-buttons button:hover {
+    background-color: darkkhaki;
+    color: black;
+}
+*/
+
+
+#connect li {
+    color:darkkhaki;
+    border: 50px black;
+    margin-top:5px;
+}
+
+#leaveMessage label {
+    Color:blueviolet; 
+    font-size:1.2rem;
+
+}
+
+#leaveMessage input {
+    Color:blueviolet; 
+    font-size:1.2rem;
+    border: 2px dashed blueviolet; 
+
+}
+
+#leaveMessage textarea {
+    Color:blueviolet; 
+    font-size:1.2rem;
+    border: 2px dashed blueviolet; 
+
+}
+
+#leaveMessage button {
+    background-color:blueviolet;
+    color:white;
+    font-size:1.2rem;
+}
+
+#message ul{
+    color:blueviolet;
+    font-size:3rem
+
+}
+footer {
+    background-color: #f7f5f9;
+
+}
+
+@media (max-width:400px){
+
+.navcontainer {
+    flex-wrap:wrap;
+
+}
+
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Shu Hu's profile</title> 
+  <link rel="stylesheet" href="css/index.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
+ </head>
+
+ <body>
+  <header>
+    <h1>Shu Hu</h1>
+    <nav class="navcontainer">
+        <div><a href="#about">About</a></div>
+        <div><a href="#experience">Experience</a></div>
+        <div><a href="#skills">Skills</a></div>
+        <div><a href="#projects">Projects</a></div>
+        <div><a href="#connect">Connect</a></div>
+        <div><a href="#leaveMessage">Leave_Message</a></div>
+        <div><a href="#message">Message</a></div>
+    </nav>
+  </header>
+
+  <section id="about">
+    <h1>About</h1>
+    <p>An experienced PR/communication/project management professional in tech industry. Passionate about ethical tech/digital equality.</p>
+  </section>
+
+  <!--
+  <section id="experience">
+    <h1>Experience</h1>
+       <div class="experience-item">Public Relations and Content Manager, Volkswagen Mobvoi, 2018-2022</div>
+       <div class="experience-item">Public Relations Manager, Tencent, 2018</div>
+       <div class="experience-item">Senior Account Manager, BlueFocus Marketing Agency, 2014-2018</div>
+       <div class="experience-item">International Business Development Specialist, Rare Media, 2012-2013 </div>
+  </section> -->
+
+  <section id="experience">
+    <h1>Experience</h1>
+       <div class="experience-item">
+        <span><strong>Public Relations and Content Manager</strong> &mdash; Volkswagen-Mobvoi</span>
+        <span> Nov.2018- Aug.2022</span>
+       </div>
+       <div class="experience-item">
+        <span><strong>Public Relations Manager</strong> &mdash; Tencent</span>
+        <span>Feb.2018-Aug.2018</span>
+       </div>
+       <div class="experience-item">
+        <span><strong>Senior Account Manager</strong> &mdash; BlueFocus Marketing Agency</span>
+        <span>Sep.2014-Jan.2018</span>
+       </div>
+       <div class="experience-item">
+        <span><strong>International Business Development Specialist</strong> &mdash; Rare Media</span>
+        <span>Nov.2012-Nov.2013</span>
+       </div>
+
+  </section>
+
+
+  <section id="skills">
+    <h2>Skills</h2>
+    <div class="skills-buttons">
+
+    </div>
+
+  </section>
+
+  <section id="projects">
+    <h2>Projects</h2>
+    <p>
+      <ul>
+
+      </ul>
+     </p>
+
+  </section>
+
+  <section id="connect">
+   <h1>Connect</h1>
+   <p>
+    <ul>
+     <li>Email: [email protected]</li>
+     <li>Github: https://github.com/dreamlala2023</li>
+    </ul>
+   </p>
+  </section>
+
+  <section id='leaveMessage' class="leaveMessage_container">
+    <h2>Leave a Message</h2>
+    <form name="leave_message">
+      <div class="leaveMessage_item">
+        <label for="usersName">Name:</label><br>
+        <input type="text" name="usersName" required><br>
+      </div>
+
+      <div class="leaveMessage_item">
+        <label for="usersEmail">Email Address:</label><br>
+        <input type="email" name="usersEmail" required><br> 
+      </div>
+
+      <div class="leaveMessage_item">
+        <label for="usersMessage">Message:</label><br>
+        <textarea name="usersMessage" required> </textarea><br>
+      </div>
+
+      <div class="leaveMessage_item">
+      <button type="submit">Submit</button>
+      </div>
+    </form>
+
+  </section>
+
+  <section id="message">
+    <h2>Messages</h2>
+      <ul></ul>
+  </section>
+
+  <footer>
+    <script src="js/index.js"></script>
+  </footer>
+  </body>
+</html>
diff --git a/instructions/section-2/index.html b/instructions/section-2/index.html
@@ -0,0 +1,12 @@
+Shu Hu 
+About
+Hi! I am a current master's student in humanities and I used to be a PR/communications professional in tech industry.
+Experience
+Volkswagen Mobvoi, product launch planning/execution project
+Tencent, digital summit planning/organization project
+BlueFocus Marketing Agency, product launch/CEO event planning/execution project
+Rare Media, international documentary shooting project 
+Connect
+Email: [email protected]
+Github: https://github.com/dreamlala2023
+D:\codingfiles\freyr-intro\instructions\section-2\index.html
diff --git a/instructions/section-2/lesson-2-1.md b/instructions/section-2/lesson-2-1.md
@@ -46,7 +46,7 @@ Navigate to the directory you just cloned in your terminal:
     cd freyr-intro
 
 Check to be sure you've got the correct GitHub repository linked to your local folder by running the following command in your terminal
-
+\
     git remote -v
 
 After running the above command, you should see the next two lines in your terminal where `<url>` is the address of your forked copy of the repository