diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..e6b7094 --- /dev/null +++ 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; + } + +} + + + + + + + + + \ No newline at end of file diff --git a/images/Tat.jpeg b/images/Tat.jpeg new file mode 100644 index 0000000..c89b095 Binary files /dev/null and b/images/Tat.jpeg differ diff --git a/images/TatHI.jpeg b/images/TatHI.jpeg new file mode 100644 index 0000000..a8a5ee4 Binary files /dev/null and b/images/TatHI.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..da8efc8 --- /dev/null +++ b/index.html @@ -0,0 +1,154 @@ + + + + + + + + + My first website + + + +
+

+ Tatyana Khudaibergenova +

+ +
+
+ +
+
+

About me:

+

+ 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. +

+
+
+

Skills

+
    +
    +
    +

    Experience:

    +
      +
    • QA Engeneer - ZIP Co
      • +
    • April 2022 - Present
      • +
    • SDET - PSC Software Inc
      • +
    • November 2021 - April 2022
      • +
    • Automation Engeneer - CRMly
      • +
    • May 2019 - November 2021
      • +
    • QA Analist - Upgenix
      • +
    • May 2016 - May 2019
      • +
    +
    +

    Projects

    +
      +
    +
    +
    +

    Contact me

    + +
    +
    +

    Leave a Message

    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +

    Messages

    +
      +
      +
      +
      + + + + + + + + + + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..6dc0297 --- /dev/null +++ b/js/index.js @@ -0,0 +1,96 @@ +//Lesson-4-1 Creating a Date object +//---------------------------------- + +const today = new Date(); +const thisYear = today.getFullYear(); + + +// appending paragraff to the footer +const footer = document.querySelector('footer'); +const copyright = document.createElement('p'); +const unicode = "©"; +copyright.innerHTML = unicode + " Tatyana " + thisYear; +footer.appendChild(copyright); + + +// Lesson-4-2 adding list of skills +//---------------------------------- + + const skills = ["Java", "Java Script", "Type Script", "HTML", "CSS", "SQL","Playwright","Selenium"]; + const skillsection = document.getElementById("skills"); + const skillList = skillsection.querySelector("ul"); + for (let i = 0; i < skills.length; i++){ + let skill = document.createElement('li'); + skill.innerText = skills[i]; + skillList.appendChild(skill); + } + +//Lesson-4-3 selecting form +//------------------------------ + +const messageForm = document.getElementById("leave_message_form"); + + messageForm.addEventListener('submit', function(e) { + e.preventDefault(); + const nameValue = e.target.name.value; + const emailValue = e.target.email.value; + const messageValue = e.target.message.value; + messageForm.reset(); + + //creating Message section + const messageSection = document.getElementById("messages"); + const messageList = messageSection.querySelector("ul"); + const newMessage = document.createElement("li"); + newMessage.innerHTML = `${nameValue} sent message: ${messageValue}`; + messageList.appendChild(newMessage); + //creating remove button + const removeButton = document.createElement('button'); + removeButton.innerText = "Remove"; + removeButton.setAttribute("type", "button"); + newMessage.appendChild(removeButton); + + removeButton.addEventListener('click', function(e) { + const entry = removeButton.parentNode; + console.log(entry); + entry.remove('li'); + }) +}) + +//FETCH FUNCTION lesson 6.2 +//--------------------- +function loadWithFetch() { + fetch("https://api.github.com/users/tatkh21/repos") + .then(response => response.json()) + .then(data => generateProgectList(data)) + + // Function generateProgectList +//-------------------------- +function generateProgectList(data) { + const projectSection = document.getElementById("projects"); + const projectList = projectSection.querySelector("ul"); + for (let i = 0; i < data.length; i++){ + let repo; + if (data[i].name == "Introduction-to-programming"){ + repo = document.createElement('li'); + //repo.innerText = repositories[i].name; + projectList.appendChild(repo); + const aTag = document.createElement('a'); + aTag.setAttribute('href', 'https://github.com/tatkh21/Introduction-to-programming'); + aTag.innerText = data[i].name; + repo.appendChild(aTag); + } +}} + +} + +document.addEventListener('DOMContentLoaded', () => { +loadWithFetch(); +}) + + + + + + + +