Code-the-Dream-School · tatkh21 · Feb 4, 2023 · Feb 4, 2023 · Feb 4, 2023 · Feb 4, 2023
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,182 @@
+
+* {
+    box-sizing: border-box;
+  }
+  body{
+    font-family: “Lato”, “Courier New”, Courier, monospace;
+    line-height: 1.6;
+    color: rgb(94, 19, 151);
+	  margin: 0;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  p {
+    font-size: 1em;
+    margin-bottom: 1.8em;
+  }
+  h2, a {
+    color: rgb(94, 19, 151);
+  }
+  h2{
+    margin-top: 10;
+  }
+  a {
+    text-decoration: none;
+  }
+  img {
+    max-width: 100%;
+  }
+  /* ================================= 
+  Base Layout Styles
+==================================== */
+
+/* ---- Navigation ---- */
+.name {
+	font-size: 1.35em;
+	margin: 0;
+}
+.main-nav {
+	margin-top: 5px;
+}
+.name a,
+.main-nav a {
+	text-align: center;
+  color: rgb(94, 19, 151);
+	display: block;
+	padding: 10px 15px;
+}
+.main-nav a {
+	font-size: .95em;
+	text-transform: uppercase;
+}
+.main-nav a:hover {
+	color: hsl(203, 78%, 49%);
+}
+/* ---- Layout Containers ---- */
+
+.main-header {
+	padding-top: .5em;
+	padding-bottom: .5em;
+}
+.banner,footer {
+	text-align: center;
+  background-color: rgb(225, 205, 242);
+}
+.banner {
+	color: #fff;
+	padding: 3.2em 0;
+	margin-bottom: 48px;
+}
+.col {
+	padding-right: 1em;
+	padding-left: 1em;
+}
+.col a:hover{
+    color: #1198eb;
+}
+
+
+footer {
+  margin: auto;
+  padding: 20px;
+  font-size: larger;  
+}
+/* ---- Page Elements ---- */
+
+.logo {
+	width: 190px;
+  border-radius: 100px;
+}
+.headline {
+	margin-bottom: 0;
+}
+.submit-btn {
+  background-color: rgb(213, 182, 240);
+  color: rgb(94, 19, 151);
+  padding: 15px 150px;
+  border: 2px solid rgb(94, 19, 151);
+  font-size: 22px;
+  font-weight: 900;
+  border-radius: 20px;
+  width: 30%;  
+  }
+  .submit-btn:active{
+    background-color: rgb(240, 236, 244);
+  }
+.label-form {
+  padding: 20px;
+  font-family: inherit;
+  }
+#field_label_name, #field_label_emal, #field_label_message {
+   border-color: rgb(193, 144, 239); 
+  border-radius: 10px;
+  padding: 10px;
+  width: 50%;
+  }
+  .card{
+    background-color:rgb(225, 205, 242);
+    border-radius: 0.285em;
+    box-shadow: 0 0.1em 0 0 rgba(0,0,0,0.1);
+    padding-left: 5%;
+  }
+  .grid{
+    max-width: 2000px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-rows: repeat(4,30px);
+    background:white;
+    margin: 15px auto;
+    grid-gap:15px 20px;   
+  }
+
+
+#field_label_message {
+  height: 40%;
+  size-adjust: 100%;
+  }
+  /* ================================= 
+  Media Queries with flex
+==================================== */
+
+@media (min-width: 769px) {
+  .main-header,
+	.main-nav {
+		display: flex;
+	}
+
+	.main-header{
+		flex-direction: column;
+    align-items: center; 
+	}
+
+  .main-header,
+  .row {
+    width: 80%;
+    margin: 0 auto;
+    max-width: 1150px;
+  }
+  .tagline {
+    font-size: 1.4em;
+  }
+}
+
+@media (min-width: 1025px) {
+
+	.main-header {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+}
+
+
+
+
+
+
+
+
+
diff --git a/images/Tat.jpeg b/images/Tat.jpeg
diff --git a/images/TatHI.jpeg b/images/TatHI.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" >
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/index.css">
+    <title>
+        My first website
+    </title>
+</head>
+ <body>  
+    <header class="main-header"><!--/.main header  -->
+      <h1 class="name">
+        Tatyana Khudaibergenova
+      </h1>
+      <ul class="main-nav">
+        <li class="flex-item flex-container1"><a href="#about">About</a> 
+        </li>
+        <li class="flex-item flex-container2"><a href="#skills">Skills</a>
+        </li>
+        <li class="flex-item flex-container3"><a href="#experience">Experience</a>
+        </li>
+        <li class="flex-item flex-container4"><a href="#projects">Project</a>
+        </li>
+        <li class="flex-item flex-container5"><a href="#contact">Contact</a>
+        </li>
+      </ul>    
+    </header>
+    <main>
+      <div class="banner"> <!--/.banner-->
+        <img class="logo" src="../images/TatHI.jpeg" alt="My picture" /> 
+        <h1 class="headline">Welcome to my page</h1>
+        <span class="tagline">Let me tell you about myself.</span>
+      </div>
+      <div class="row">
+        <section class="section col" id="about">
+          <h2>About me:</h2>
+          <p>
+            Meticulous, result driven and solution oriented SDET/QA Test Automation Engineer
+             with 6+ year of strong professional experience in various domains including Finances,
+             Logistics, CRM, ERP, and entertainment.
+          </p>
+        </section>
+        <section id="skills" class="section col" id="skills">
+          <h2>Skills</h2>
+          <ul id="list"></ul>
+        </section>
+        <section class="section col" id="experience">
+          <h2>Experience:</h2>
+          <ul role="list" class="grid">
+            <li class="card"><strong>QA Engeneer</strong> - ZIP Co</li>
+            <li class="card date">April 2022 - Present</li>
+            <li class="card"><strong>SDET</strong> - PSC Software Inc</li>
+            <li class="card date">November 2021 - April 2022</li>
+            <li class="card"><strong>Automation Engeneer</strong> - CRMly</li>
+            <li class="card date">May 2019 - November 2021</li>
+            <li class="card"><strong>QA Analist</strong> - Upgenix </li>
+            <li class="card date">May 2016 - May 2019</li>
+        </section>
+        <section class="section col" id="projects">
+          <h2>Projects</h2>
+          <ul class="Projects">
+          </ul>
+        </section>
+        <section class="section col" id="contact">
+          <h2>Contact me</h2>
+          <ul class="icons">
+            <li>
+              <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24"
+            >
+             <path 
+             d="M12 1.545c-6.055 0-10.957 4.877-10.957 10.883c0 4.41 2.643 8.205 6.447 9.912c.398.179.787.108 1.091-.12a1.38 1.38 0 0 0 .532-1.107v-.57l-1.357-.184a.489.489 0 0 1-.03-.005c-.748-.146-1.253-.409-1.623-.788c-.311-.319-.501-.701-.662-1.025l-.056-.113a11.645 11.645 0 0 0-.487-.91c-.135-.214-.24-.324-.344-.393c-.264-.175-.518-.472-.518-.843a.72.72 0 0 1 .26-.56a.844.844 0 0 1 .546-.182c.222 0 .431.068.605.146c.178.08.355.186.52.296c.402.268.798.585 1.133.976c.349.406.596.664.968.717c.306.044.618.045.861.034a2.558 2.558 0 0 1 .166-.56a8.347 8.347 0 0 1-.877-.256c-.654-.232-1.383-.593-1.873-1.14c-.538-.602-.871-1.139-1.057-1.767c-.181-.612-.211-1.275-.211-2.091c0-1.25.541-2.303.947-2.862a8.655 8.655 0 0 1-.335-1.501a3.515 3.515 0 0 1 .001-.968c.05-.293.175-.653.504-.87c.317-.211.689-.202.979-.148c.301.057.614.182.902.325c.469.232.935.542 1.284.805c.602-.177 1.667-.405 2.63-.426h.022c.964.021 1.981.249 2.568.425c.35-.262.815-.573 1.283-.804c.288-.143.6-.268.902-.325c.29-.054.662-.063.98.147c.328.218.454.578.503.871c.051.305.039.646 0 .968a8.661 8.661 0 0 1-.334 1.501c.406.56.947 1.613.947 2.862c0 .816-.03 1.479-.21 2.09c-.187.63-.52 1.166-1.058 1.768c-.49.547-1.219.908-1.873 1.14a8.45 8.45 0 0 1-1.062.297c.123.372.167.673.167.846v3.09c0 .47.219.871.53 1.105c.302.229.69.3 1.088.126c3.84-1.692 6.514-5.497 6.514-9.93c0-6.005-4.9-10.882-10.956-10.882ZM9.476 18.71c-.26.037-.001 0-.001 0h-.003l-.008.002l-.029.004a6.523 6.523 0 0 1-.447.037a5.782 5.782 0 0 1-1.066-.043c-.791-.112-1.272-.672-1.583-1.036l-.03-.034a3.6 3.6 0 0 0-.327-.333c.103.19.21.402.325.63l.01.02l.051.104c.175.348.29.58.481.774c.186.19.476.374 1.062.49l1.794.243a.522.522 0 0 1 .452.518v1.027c0 .8-.375 1.513-.95 1.945a2.087 2.087 0 0 1-2.143.236C2.902 21.427 0 17.27 0 12.428C0 5.836 5.377.5 12 .5s12 5.336 12 11.928c0 4.867-2.939 9.035-7.137 10.886a2.09 2.09 0 0 1-2.137-.247a2.426 2.426 0 0 1-.946-1.942v-3.09c0-.07-.049-.474-.322-1.017a.524.524 0 0 1 .408-.755a7.187 7.187 0 0 0 1.504-.356c.594-.21 1.127-.498 1.444-.852c.471-.526.706-.93.835-1.367c.134-.453.168-.98.168-1.793c0-1.141-.6-2.1-.876-2.409a.523.523 0 0 1-.104-.523a7.82 7.82 0 0 0 .375-1.554c.032-.275.034-.505.006-.671a.457.457 0 0 0-.054-.173a.486.486 0 0 0-.207.009c-.17.032-.387.112-.633.234c-.49.242-1 .6-1.316.856a.52.52 0 0 1-.505.085A9.306 9.306 0 0 0 12 7.296c-1.007.024-2.169.31-2.566.453a.52.52 0 0 1-.505-.085a7.775 7.775 0 0 0-1.316-.856a2.607 2.607 0 0 0-.634-.234a.486.486 0 0 0-.206-.009a.456.456 0 0 0-.054.173c-.028.166-.026.396.006.671A7.89 7.89 0 0 0 7.1 8.963c.063.18.024.38-.104.523c-.276.309-.876 1.268-.876 2.409c0 .812.034 1.34.168 1.793c.13.437.364.84.834 1.367c.318.354.85.642 1.445.852a7.194 7.194 0 0 0 1.503.356a.522.522 0 0 1 .246.945c-.165.118-.274.33-.335.575a1.944 1.944 0 0 0-.056.385v.019a.523.523 0 0 1-.449.523Z" clip-rule="evenodd"/>
+            </svg>
+            <a href="https://github.com/tatkh21">Github</a>
+            </li>
+            <li>
+              <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24">
+             <path d="M2 20V4h20v16H2Zm10-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v2Z"/>
+            </svg>
+            <a href="mailto:[email protected]@gmail.com subject=subject text"
+              >Email</a
+            >
+            </li>
+            <li>
+              <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24">
+             <path d="M7.5 9h-4a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5zM7 21H4V10h3v11zM18 9c-1.085 0-2.14.358-3 1.019V9.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V16a1.5 1.5 0 1 1 3 0v5.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V14a5.006 5.006 0 0 0-5-5zm4 12h-3v-5a2.5 2.5 0 1 0-5 0v5h-3V10h3v1.203a.5.5 0 0 0 .89.313A3.983 3.983 0 0 1 22 14v7zM5.868 2.002A2.73 2.73 0 0 0 5.515 2a2.74 2.74 0 0 0-2.926 2.729a2.71 2.71 0 0 0 2.869 2.728h.028a2.734 2.734 0 1 0 .382-5.455zM5.833 6.46a1.75 1.75 0 0 1-.347-.003h-.028A1.736 1.736 0 1 1 5.515 3a1.737 1.737 0 0 1 .318 3.46z"/>
+            </svg>
+            <a href="https://www.linkedin.com/in/tatyana-khudaibergenova-sqa/"
+              >LinkedIn</a
+            >
+            </li>
+          </ul> 
+        </section>
+        <section class="section col">
+          <h2>Leave a Message</h2>
+          <div class="container">
+            <form name="leave_message" action="" method="" id="leave_message_form">
+              <label for="field_label_name" class="label-form">Name</label>
+              <br />
+              <input type="text" name="name" id="field_label_name" required /> 
+          </div>
+          <div class="container">
+            <br />
+            <label for="field_label_emal"class="label-form">Email</label>
+            <br />
+            <input type="email" name="email" id="field_label_emal" required />
+          </div>
+          <div class="container">
+            <br />
+            <label for="field_label_message"class="label-form">Message</label>
+            <br />
+            <textarea name="message" id="field_label_message" required></textarea>
+          </div>
+          <div class="button-container">
+            <br />
+            <button id="btn" type="submit" class="submit-btn">Submit</button>
+          </div>  
+          </form>
+        </section>
+        <section id="messages" class="section col">
+          <h2>Messages</h2>
+          <ul></ul>
+        </section>
+      </div>
+    </main>
+
+    <footer class="footer">
+    </footer>
+    <script src="/js/index.js"></script>
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+