Code-the-Dream-School · yuliaLopa · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/images/myPhoto.png b/images/myPhoto.png
diff --git a/images/tom-nora.jpg b/images/tom-nora.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,185 @@
+body {
+  background-image: url(/images/tom-nora.jpg);
+  color:rgb(80, 25, 4);
+  font-family: 'Poppins';
+  font-size: 40px;
+  margin: 5px;
+  padding: 5px;
+}
+
+section {
+  margin: 5px;
+  padding: 2px;
+}
+
+h1 {
+  font-size: 4rem;
+  font-family: 'Poppins';
+  font-weight: bold
+}
+
+h2 {
+  font-family: 'Poppins';
+  font-weight: bold;
+}
+
+.experience  li{
+text-align: center;
+border: 5px solid bisque;
+border-radius: 10px;
+margin-top: 10px;
+padding: 5px;
+background-color: lemonchiffon;
+list-style-type: none;
+border-radius: 500px;
+max-width: fit-content;
+}
+
+#skills ul {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  justify-content: center;
+}
+
+#skills li {
+  text-align: center;
+  border: 1px dashed brown;
+  margin: 20px 0;
+  padding: 20px;
+  list-style-type: none;
+  border-radius: 400px;
+  max-width: fit-content;
+}
+#skills li:hover {
+  background-color: rgb(200, 138, 216);
+  color:cornsilk;
+  cursor: pointer;
+}
+
+#pic {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  box-shadow: none;
+}
+
+label {
+  color: rgb(80, 25, 4);;
+}
+
+input {
+  width: 30%;
+  height: 50% auto;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+
+
+.button {
+  padding: 25px;
+  margin-top: 10px;
+  background-color: rgb(126, 24, 24);
+  color: white;
+  font-size: 2rem;
+}
+
+button:hover {
+  background-color: rgb(200, 138, 216);
+  color: rgb(126, 24, 24);
+}
+
+button: {
+  color: white;
+  font-size: 1rem;
+}
+
+footer {
+  background-color: rgb(126, 24, 24);
+  width: 100%;
+  color: white;
+  margin-top: 20px;
+  padding: 20px;
+}
+
+#my_photo {
+  border: 5px sold powderblue;
+  border-style: inset;
+  border-radius: 15px;
+  box-shadow: 20px 15px rgb(134, 75, 73);
+}
+
+a {
+  text-decoration: none;
+}
+
+.nava{
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  position: sticky ;
+  margin-top: 30px;
+}
+
+.nav-item {
+  font-family: 'Poppins';
+  list-style-type: none;
+}
+
+.message-list {
+  display: flex;
+  justify-content: space-between;
+
+}
+
+textarea {
+  padding: 20px;
+}
+@media all and (max-width: 800px) {
+  body {
+    font-size: 20px;
+  }
+  .nava {
+    display:flex ; 
+    Flex-direction : column;
+    }
+  .nav-item {
+    padding: 20px;
+    font-size: 35px;
+  }
+  h1 {
+    margin-left: 10px;
+    font-size: 35px;
+  }
+
+  #skills li {
+    padding: 5px;
+
+  }
+
+  #pic {
+    display:flex ; 
+    Flex-direction : column
+  }
+
+
+
+  #skills ul {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media all and (max-width: 500px) {
+  .nav-item {
+    padding: 5px;
+    font-size: 20px;
+  }
+
+  .nava {
+    display:flex ; 
+    Flex-direction : column;
+
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./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=Edu+NSW+ACT+Foundation:wght@600;700&family=Poppins&family=Roboto:ital,wght@0,100;0,400;1,400&display=swap" rel="stylesheet">
+  <title>My Portfolio</title>
+
+</head>
+  <body>
+    <nav>
+      <ul class="nava">
+        <li class="nav-item">
+          <a href="#about">About</a>
+        </li class="nav-item">
+        <li class="nav-item">
+          <a href="#experience">Experience</a>
+        </li class="nav-item">
+        <li class="nav-item">
+          <a href="#connect">Connect</a>
+        </li class="nav-item">
+        <li class="nav-item">
+          <a href="#messages">Messages</a>
+        </li>
+        <li class="nav-item">
+          <a href="#skills">Skills</a>
+        </li>
+      </ul>
+    </nav>
+
+    <h1>Yulia Lopatko</h1>
+
+    <img id="my_photo"
+        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS__tnmEofX-OLK_5A3SX0s5buJlglbhxe4PQ&usqp=CAU/400/400"
+        alt="cuddly"
+        title="Look at this"
+      />
+
+    <section>
+      <h2 id="about">About</h2> 
+        <ul>
+          <li>
+            In the near future, I am a front-end programmer and feature developer with a focus on React, JavaScript, TypeScript, and Material-UI.
+          </li>
+          <li>
+            I am passionate about bringing people and communities together through innovative, engaging technologies.
+          </li>
+
+        </ul>
+      </section>
+
+    <section class="experience"> 
+      <h2 id="experience">Experience</h2>
+      <p> Before starting a development career, I earned over a decade of proven mastery in web content management.  </p>
+    </section>
+
+    <section id="skills">
+      <h2>Skills</h2>
+      <ul></ul>
+    </section>
+
+    <section id="projects"> 
+      <h2>Projects</h2>
+      <ul></ul>
+
+    </section>
+
+    <section>
+      <h2 id="connect">Connect</h2>
+        <div id="pic">
+          <a href="[email protected]" target="_blank"><img src="data:image/png;base64,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"></a>;
+          <a href="https://www.linkedin.com/in/yulia-l-20781a1a7/" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5DqRLvX8oZr7fHfMcNGQOikeiosgjS9jtHw&usqp=CAU"></a>;
+          <a href="https://github.com/engineeryulia" target="_blank"><img src="data:image/png;base64,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"></a>;
+        </div>  
+    </section>
+    <section >
+      <h2>Leave a Message</h2>
+      <form name="leave_message">
+          <label for="usersName">Your Name</label>
+          <input type="text" name="usersName" placeholder='name' required="true">
+          <br>
+          <label for="usersEmail">Your Email</label>
+          <input type="email" name="usersEmail"  placeholder='email' required="true">
+          <br>
+          <label for="usersMessage">Your Message</label>
+              <textarea name="usersMessage"  placeholder="message" required="true"></textarea>
+              <br>
+              <button type="submit" class="button">Submit</button>
+      </form>
+  </section>
+
+  <section id="messages">
+      <h2>Messages</h2>
+      <ul class="message-list"></ul>
+  </section>
+
+  <footer></footer>
+
+  <script src="index.js"></script> 
+  </body>
+</html>