Code-the-Dream-School · leipei92 · Jul 10, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 11, 2023
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,240 @@
+ /*New version*/
+
+ /* header,footer,body,section {
+
+  margin: 8px;
+
+} */
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+header {
+
+  padding: 10px 15px;
+  margin:2%;
+  border: 12px solid #e3ddd6;
+  color:ghostwhite;
+  text-align:center;
+  overflow: hidden;
+  background-color: #f1f1f1;
+
+
+}
+.header a {
+/* float: left; */
+color: black;
+text-align: center;
+padding: 12px;
+text-decoration: none;
+font-size: 20px; 
+line-height: 25px;
+border-radius: 4px;
+}
+
+.header a.logo {
+font-size: 25px;
+font-weight: bold;
+}
+
+
+
+.header-right{
+float: right;
+}
+
+
+
+body {
+
+    color:black;
+    text-align:left;
+    font-size:20px;
+
+    font-family: 'Lato', sans-serif;
+    font-family: 'Ysabeau Office', sans-serif;
+    font-family: 'Cinzel', serif;
+    padding:10;
+    line-height: 1.5rem;
+    background-color: #A9C9FF;
+    background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 50%, #d5df6f 100%);
+
+
+
+}
+
+section {
+  margin-bottom:15px;
+  padding:20px;
+
+}
+
+.heading {
+  font-weight: 800;
+  color:rgb(0, 0, 0);
+  margin: auto;
+
+}
+
+
+/*  {
+  font-size: 20px;
+  color:rgb(0, 0, 0);
+  writing-mode: horizontal-tb;
+  margin-bottom:60px;
+}  */
+
+#about {
+  /*background-color: rgb(236, 236, 236);*/
+  font-family: 'Cinzel', serif;
+  font-size: 20px;
+  text-align:center;
+  padding-bottom: 30px;;
+}
+
+#bio{
+
+  padding-left: 50px;
+  font-size: 1.5rem ;
+}
+
+
+footer {
+
+width:100%;
+color:#010810;
+font-size: 1.5rem;
+font-style:italic;
+font-weight: bold;
+text-align:left;
+
+}
+
+#footer {
+
+  background-color: rgb(197, 186, 132);
+}
+
+#skillsList{
+
+
+  display:flex;
+  flex-direction:row;
+  list-style-type:none;
+
+}
+
+.skillSpan {
+  border: 2px solid rgb(82, 73, 119);
+  margin-right:20px;
+
+}
+
+
+
+#message {
+writing-mode: horizontal-tb;
+}
+.questions {
+
+  font-size: 25px;
+  font-style:oblique;
+  color:rgb(0, 0, 0);
+  padding:10;
+  writing-mode: horizontal-tb;
+}
+
+
+
+#bioContainer {
+    display:flex;
+    flex-direction: row;
+
+
+}
+
+
+.card {
+  background-color: #efedf1;
+  display: flex;
+  flex-direction: row;
+  padding: 1.3%;
+  margin-bottom:2%;
+  justify-content: space-between;
+  outline: 2px solid #c6c4c8; 
+  border-radius: 10px; 
+}
+
+
+
+a:link{
+
+color:rgb(4, 4, 12);
+text-decoration:none;
+}
+
+a:visited {
+color:rgb(130, 21, 185);
+
+}
+
+a:hover{
+text-decoration:underline;
+}
+
+a:focus {
+color:white;
+background-color:orange;
+}
+
+.header a.logo {
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.header a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+
+.header-right {
+  float: right;
+}
+
+
+
+
+
+@media screen and (min-width: 700px){
+  .card {
+      display:flex;
+      flex-direction: row;
+
+  }
+
+  .skillSpan{
+     display:flex;
+     flex-direction: column
+
+
+  }
+
+  }
+
+
+  @media screen and (max-width: 480px) {
+
+    #grid-container , #experienceContainer {
+
+      display:flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      grid-template-columns: 1fr;
+
+
+    }
+}
+
diff --git a/img/Aysa.jpg b/img/Aysa.jpg
diff --git a/img/profile.jpg b/img/profile.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+
+<head <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=Cinzel&family=Lato:wght@300&family=Ysabeau+Office:wght@200&display=swap" rel="stylesheet">
+    <title>
+
+    My resume
+    </title>
+    <meta name="viewport" content="width=500, initial-scale=1" />
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/index.css">
+
+</head>
+
+<body>
+
+    <header>
+
+    <div class="header">
+        <a href="#about" class="logo">Aysa McDonald</a>
+        <div class="header-right">
+          <a href="#home">Home</a>
+          <a href="#about">About</a>
+          <a href="#experience">Experience</a>
+          <a href="#skills">Skills</a>
+          <a href="#connect">Contact</a>
+
+        </div>
+</header>
+
+
+    <section> 
+        <div id="bioContainer"> 
+            <center id="image"><img src="img/profile.jpg" width="400"></center>  
+
+            <div>
+                <h1 id="about" class="heading"><strong>About</strong></h1>
+                <p id="bio">My name is Aysa and I am a data and linguistics nerd. I love collecting data, analysing it and playing with it. I love learning new languages, forgetting them and re discovering them again. I speak Spanish, English, Russian, Kalmyk and Korean. Currently branching out to software developing as a student of the "Code the dream" school. I am very excited to learn more about the world of computers' thought process.</p>
+            </div>
+        </div>
+
+
+
+    </section>
+
+    <section >
+
+
+    <h1 id="experience" class="heading">Experience</h1>
+
+    <ul  class="list">
+        <li class="card"> <span> <strong>Payroll Specialist</strong> - DELUXE</span> 
+        <Span class="date">December 2018 - present</Span> </li>
+        <li class="card"> <span> <strong>CMM</strong>- Com2us </span>
+        <span class="date">August 2016 - November 2018 </span></li>
+        <li class="card">
+    <span><strong>Marketing Intern</strong> - Metrocity</span>
+    <span class="date">January 2015 - March 2016 </span>
+        </li>
+
+    </ul>
+
+
+    </section>
+
+    <section id="skills">
+        <h2 class="heading">Skills</h2>
+            <ul id="skillsList">
+
+            </ul>
+
+    </section>
+
+    <section id="projects">
+
+        <h2>Projects</h2>
+             <ul>
+
+             </ul>
+
+
+    </section>
+
+    <section>
+
+    <h1 class="heading" id="connect">Connect </h1>
+    <nav>
+
+        <strong>Email: </strong> <a href="mailto:[email protected]"> Email me </a> <br>
+        <strong>Instagram: </strong>aysa gabi <br>
+        <strong>Linkedin:</strong> <a href="https://www.linkedin.com/in/aysa-mcdonald-6a783ba8/"> click here</a> <br>
+        <strong>Github:</strong>leipei92 <br>
+
+    </nav>
+
+    </section>
+
+    <section>
+        <h2 class="heading"> Leave a Message</h2>
+
+        <form name="leave_message" class="questions">
+
+            <label for="name">Name</label><br>
+            <input type="text" id="name" name="usersName" required="true"> <br>
+
+            <label for="email">Email</label> <br>
+            <input type="email" id="email" name="usersEmail" required="true"><br>
+
+            <label for="message">Message</label> <br>
+            <textarea  id="message"name="usersMessage" required="true"> </textarea><br>
+            <button type="submit">Submit</button><br>
+
+
+        </form>
+
+    </section>
+
+    <section id="messages" class="heading">
+        <h2 id="messagesHeader">Messages</h2>
+        <ul>
+
+        </ul>
+
+    </section>
+
+    <section id="footer"> <footer> </footer> 
+
+    </section>
+
+
+    <script  src="js/index.js"></script>
+
+
+</body>
+
+</html>
diff --git a/instructions/section-4/lesson-4-4.md b/instructions/section-4/lesson-4-4.md
@@ -50,6 +50,8 @@ Now, open the project directory in your code editor and continue to the next sec
 
 For this assignment, there are some general requirements but the design is up to you! This is your chance to be creative and transform your webpage into a reflection of who you are.
 
+
+
 - [ ] Change the background color of the page body
 - [ ] Change the default text color
 - [ ] Customize the font family