Javascript javascript1 week1

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "buttonsvg",
+    "totalnow",
+    "totalpermonth"
+  ]
+}

git/week1/class_playground/apples_file.txt

@@ -0,0 +1,3 @@
+apples_file.txt
+apples_file.txt
+apples_file.txt

git/week1/class_playground/bananas_file.txt

@@ -0,0 +1 @@
+bananas_file.txt

git/week1/class_playground/colors.txt

@@ -0,0 +1,4 @@
+beige
+red
+blue
+red

git/week1/class_playground/movies

@@ -0,0 +1,2 @@
+Die Hard
+Die Hard 2

git/week1/class_playground/my_homework.txt

@@ -0,0 +1,2 @@
+my_homework.txt
+my_homework.txt

git/week1/class_playground/oranges_file.txt

@@ -0,0 +1 @@
+oranges_file.txt

html-css/week1/Vadim/OrderProject/files/css/styles.css

@@ -0,0 +1,340 @@
+  body {
+    margin: 0 auto;
+    font-family: Arial;
+  }
+
+
+  /* --- Header --- */
+  .order {
+    color: white;
+    background: linear-gradient(92.74deg, #FD7B46 1.15%, #FE4E9B 98.48%);
+    padding: 2%;
+  }
+
+  .order__summary {
+    text-align: center;
+  }
+
+  .order__totalpermonth {
+    display: flex;
+    justify-content: space-between;
+    opacity: 0.8;
+    border-bottom: 2px solid white;
+  }
+
+  .order__totalnow {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 700;
+  }
+
+
+  .payment {
+    text-align: center;
+    padding: 20px 0;
+  }
+
+  .payment__option {
+    display: inline-flex;
+    height: 110px;
+    width: 95%;
+    align-items: center;
+    justify-content: space-around;
+    padding: 20px 0;
+  }
+
+  .payment__radio {
+    position: absolute;
+  }
+
+
+  .option-1, .option-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #939393;
+    width: 45%;
+    gap: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    font-family: Montserrat;
+    height: 110px;
+    border: transparent;
+    background: #FFFFFF;
+    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    border: 4px solid transparent;
+    filter: grayscale(100);
+    opacity: 0.8;
+  }
+
+  input[type="radio"] {
+    appearance: none;
+    outline: 0;
+  }
+
+  .payment__radio1:checked~.option-1,
+  .payment__radio2:checked~.option-2 {
+    border: 4px solid #fe4e9b;
+    transform: scale(0.99);
+    filter: grayscale(0);
+    opacity: 1;
+  }
+
+  .payment__option .option span {
+    font-size: 12px;
+    font-weight: 700;
+    filter: grayscale(100%);
+    opacity: 0.6;
+    color: #939393;
+  }
+
+  .payment__radio1:checked:checked~.option-1 span,
+  .payment__radio2:checked:checked~.option-2 span {
+      filter: grayscale(0);
+      opacity: 1;
+  }
+
+  .payment__img1 {
+    height: 36px;
+    width: 8rem;
+    object-fit: contain;
+  }
+
+  .payment__img2 {
+    height: 36px;
+    margin-left: -7%;
+    object-fit: contain;
+  }
+
+  /* --- Card Data Input --- */
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Montserrat;
+    font-weight: 600;
+    padding: 0 5% 0 5%;
+    color: #939393;
+  }
+
+  .card__info {
+    font-size: 24px;
+    font-weight: 700;
+    font-family: Arial;
+    color: black;
+  }
+
+  .card__input {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card__number {
+    width: 100%;
+    height: 44px;
+    background: #F3F1F2;
+    border: 1px solid #939393;
+    border-radius: 4px;
+    background-image: url("../images/icon8.webp");
+    background-repeat: no-repeat;
+    background-position: 96% 50%;
+  }
+
+  .card__number::placeholder {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  .card__data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card__safety {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 20px;
+    padding-top: 30px;
+  }
+
+  .card__safety .card__text {
+    margin-bottom: -10px;
+  }
+
+  .card__text {
+    margin-bottom: 5px;
+  }
+
+  .card__expiry {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card__date {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    background: #F3F1F2;
+    border: 1px solid #939393;
+    border-radius: 4px;
+  }
+
+  .card__date::placeholder {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  .card__sec {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card__security {
+    width: 100%;
+    height: 44px;
+    background: #F3F1F2;
+    border: 1px solid #939393;
+    border-radius: 4px;
+    background-image: url("../images/icon8.webp");
+    background-repeat: no-repeat;
+    background-position: 90% 50%;
+  }
+
+  .card__security::placeholder {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    padding-right: 50px;
+  }
+
+  input[type=text] {
+    font-size: 24px;
+    text-align: center;
+  }
+
+  input {
+    text-align:left;
+  }
+
+  /* --- Buy-Now Button --- */
+  .primary-button {
+      background: linear-gradient(92.74deg, #FD7B46 1.15%, #FE4E9B 98.48%);  
+      border-radius: 68px;  
+      border: 0;  
+      color: white;  
+      font-weight: 700;  
+      font-size: 24px;  
+      margin-top: 50px;  
+      padding: 18px 86px; 
+  }
+
+  .primary-button:hover {
+    transition: all 0.2s ease-in-out;
+    transform: scale(1.02);
+
+  }
+
+  .primary-button:active {
+    transform: scale(0.95);
+    transition: all 0.2s ease-in-out;
+    background: linear-gradient(92.74deg, #FE4E9B 1.15%, #FD7B46 98.48%);
+  }
+
+  /* --- Help Anchor --- */
+  .help {
+    display: flex;
+    justify-content: center;
+    padding-top: 25px;
+  }
+
+  .help__link {
+    font-weight: 700;
+    font-size: 18px;
+    background: linear-gradient(91.07deg, #FE4E9B 32.21%, #FD7B46 67.08%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .help__link:visited {
+    background: linear-gradient(91.07deg, #FE4E9B 32.21%, #FD7B46 67.08%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .help__link:hover {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    transform: scale(1.02);
+    background: linear-gradient(92.74deg, #FD7B46 1.15%, #FE4E9B 98.48%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .help__link:active {
+    transform: scale(0.95);
+    transition: all 0.2s ease-in-out;
+  }
+
+
+  @media (min-width: 768px) {
+    body {
+      max-width: 800px;
+    }
+
+    .order__summary {
+      align-self: flex-start
+    }
+    .card {
+      padding: 54px 15px;
+    }
+    .card__input {
+      flex-direction: row;
+      gap: 20px;
+      width: 100%;
+    }
+    .card__data {
+      width: 48%;
+    }
+    .card__safety {
+      padding: 0;
+      width: 53%;
+      justify-content: space-around;
+    }
+    .card__sec {
+      width: 50%;
+    }
+    .card__expiry {
+      width: 40%;
+    }
+
+    .help {
+      padding: 0 0 30px 0;
+      margin-top: -10px
+    }
+  }