diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..5e74825 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,37 @@ +@import url(variables.css); + +footer { + border-top: 1px solid #dce0e5; + padding: 4rem 0; + margin-top: var(--s-5); +} +footer .container { + display: flex; + flex-direction: column; + gap: var(--s-4); + justify-content: center; + align-items: center; + +} +@media only screen and (min-width: 650px) { + footer .container { + width: 60%; + } +} +.footer_header { + /* margin-bottom: var(--s-4); */ + text-align: center; +} +.footer_header .title { + margin-bottom: var(--s-3); +} +.footer_links { + gap: var(--s-3); + flex-wrap: wrap; +} +.footer_links .footer_links_item { + transition: all 0.2s ease; +} +.footer_links .footer_links_item:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..ba33b1d --- /dev/null +++ b/css/header.css @@ -0,0 +1,114 @@ +@import url(variables.css); + +/* Header starts */ +header { + position: fixed; + width: 100%; + background-color: var(--white-color); + z-index: 200; + box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%); +} +header .container { + padding: 12px 40px; + height: 64px; + gap: var(--s-2); + justify-content: space-between; + /*box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%);*/ +} +@media screen and (max-width: 640px) { + header .container { + padding: 12px 24px; + } +} +header .header_logo { + display: block; + margin: 4px 0 0 2px; +} +/* .nav { + gap: var(--s-2); +} */ +.nav { + display: flex; + align-items: center; + gap: var(--s-5); +} +.nav .nav_list { + gap: var(--s-4); + +} +.nav .nav_list .nav_list_item { + font-weight: 100; + font-size: 16px; + color: var(--secondary-color3); +} +.nav .nav_list .nav_list_item a { + transition: all 0.2s ease-in-out; + +} +.nav .nav_list .nav_list_item a:hover { + color: var(--blue-color1); + +} +/* Header ends */ + +.hamburger { + display: none; + background: var(--secondary-color2); + border-radius: 2px; + height: 2px; + position: relative; + transition: .2s ease-in-out; + width: 24px; +} +.hamburger::before, +.hamburger::after { + display: inline-block; + content: ""; + position: absolute; + left: 0; + width: 24px; + height: 2px; + background: var(--secondary-color2); + border-radius: 2px; + transform-origin: 2px center; + transition: .2s ease-in-out; +} +.hamburger::before { + top: 6px; +} +.hamburger::after { + top: -6px; +} +.hamburger.open-menu { + background-color: transparent; +} +.hamburger.open-menu::before { + transform: rotate3d(0, 0, 1, 45deg); + top: 0; + transform-origin: 50% 50%; +} +.hamburger.open-menu::after { + transform: rotate3d(0, 0, 1, -45deg); + top: 0; + transform-origin: 50% 50%; + width: 24px; +} +@media only screen and (max-width: 997px) { + .nav { + display: none; + } + .nav.open-menu { + display: grid; + grid-gap: var(--s-2); + position: absolute; + top: 64px; + left: 0; + width: 100%; + background-color: var(--white-color); + padding: var(--s-4); + box-shadow: 0 8px 8px rgb(0 17 44 / 4%), 0 2px 4px rgb(0 17 44 / 8%); + } + .hamburger { + display: inline-block; + } +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d74e5cf --- /dev/null +++ b/css/styles.css @@ -0,0 +1,298 @@ +@import url(variables.css); +@import url(header.css); +@import url(footer.css); + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + text-decoration: none; +} +html { + scroll-behavior: smooth; +} +body { + font-family: Fakt, "Helvetica Neue", Arial, sans-serif; + position: relative; + color: var(--secondary-color1); + text-decoration: none; + line-height: 28px; +} +li { + list-style: none; +} + +/* General starts */ +a { + color: var(--secondary-color1); +} + +button { + border: none; + outline: none; + font-size: 16px; + cursor: pointer; +} + +input, +button, +textarea, +select { + font-family: Fakt, "Helvetica Neue", Arial, sans-serif; +} + +input::placeholder, +textarea::placeholder { + font-family: Fakt, "Helvetica Neue", Arial, sans-serif; +} + +/* Buttons Starts */ +.btn { + position: relative; + font-size: 16px; + font-weight: 600; + height: 40px; + padding: 0 16px; + border-radius: var(--border-radius1); + transition: 125ms cubic-bezier(0.785, 0.135, 0.15, 0.86); + transition-property: color,background-color,box-shadow; +} + +.prim_btn { + /* color: $white-color; + background: $primary6; + border: 1px solid $primary6; */ + background-color: var(--white-color); + box-shadow: inset 0 0 0 1px #dce0e5; + color: var(--secondary-color); + +} +.prim_btn:hover, +.prim_btn:focus, +.prim_btn:active { + background-color: var(--white-color); + box-shadow: inset 0 0 0 1px #dce0e5, 0 8px 8px rgb(0 17 44 / 2%), 0 2px 4px rgb(0 17 44 / 4%); +} + +.sec_btn { + color: var(--white-color); + background: var(--blue-color1); + border: 1px solid var(--blue-color1); +} + +.dis-flex { + display: flex; + align-items: center; +} + +.clickable { + cursor: pointer; +} + +.uc { + text-transform: uppercase; +} +.text-hover { + color: var(--blue-color2); + transition: all 0.2s ease; +} +.text-hover:hover { + text-decoration: underline; +} +/* General ends */ + +/* Header and Paragraphs starts */ +h1 { + font-size: 2.875rem; +} + +h2 { + font-size: 2.25rem; +} + +h3 { + font-size: 1.625rem; +} + +h4 { + font-size: 1.5rem; + font-weight: 600; + line-height: 32px; +} + +h5 { + font-size: 1.375rem; +} + +h6 { + font-size: 1.25rem; +} + +p { + font-size: .9rem; + font-weight: 200; + text-align: justify; + line-height: 30px; + overflow-wrap: break-word; +} +small { + font-size: 0.75rem; +} + +/* Header and Paragraphs ends */ + +/* Section starts */ +.container { + padding: 0 5%; + max-width: 1440px; + margin: 0 auto; +} +@media screen and (max-width: 640px) { + .container { + padding: 0 24px; + } +} + +.sect { + margin: 1rem auto; + padding: 3% 0; +} +.sect_header { + margin-bottom: var(--s-4); +} +.sect_header p { + margin-top: var(--s-1); +} +/* Section ends */ + +main { + /* position: relative; + top: 64px; */ + padding-top: 64px; + width: 100%; +} + +/* Card starts */ +.card { + display: grid; + grid-gap: var(--s-4); +} +.card_item { + border: 1px solid var(--grey-color1); + border-radius: var(--border-radius1); + min-height: 120px; + color: var(--secondary-color2); + transition: all 0.2s ease; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.card_item:hover { + background-color: #fafafb; + box-shadow: inset 0 0 0 1px #dce0e5; +} +.card_item_top .content { + padding: 24px; + color: var(--secondary-color2); +} +.card_item_top .descrp { + font-weight: 100; + font-size: 16px; + line-height: 28px; + margin-top: 16px; +} +.card_item_top .descrp ul { + margin-top: var(--s-1); +} +.card_item_top .descrp ul li { + list-style: disc; + margin-left: 12px; +} +.card_item_top .descrp ul li:not(:last-child) { + margin-top: var(--s-1); +} +.card_item_btns { + margin-top: var(--s-3); + padding: 24px; +} + + +/* Card ends */ + +/* Essentials starts */ +.essentials .card .card_item img { + width: 100%; + height: 210px; + border-radius: var(--border-radius1) var(--border-radius1) 0 0; +} +@media only screen and (min-width: 450px) { + .essentials .card { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } +} +/* Essentials ends */ + +/* Resources starts */ +.resources { + background-color: #fff; +} +.resources .card .card_item { + background-color: var(--white-color); +} +.resources .card .card_item .content { + display: grid; + place-items: center; +} +.resources .card .card_item .content { + display: grid; + place-items: center; +} +.resources .card .card_item .content .descrp p { + text-align: center; +} + +.resources .card .card_item .icon { + width: 40px; + margin-bottom: var(--s-2); +} +@media only screen and (min-width: 450px) { + .resources .card { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } +} +/* Resources ends */ + +/* Resources starts */ +.libraries .libraries_list { + border: 1px solid var(--grey-color1); + border-radius: var(--border-radius1); + /* min-height: 120px; */ + padding: var(--s-3) var(--s-6); + color: var(--secondary-color2); + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: var(--s-3); +} +.libraries .libraries_list .libraries_list_item { + background-color: var(--white-color); + text-align: center; +} +.libraries_list_item .library-svg { + width: 24px; + height: 24px; +} +.libraries_list_item .name { + transition: all 0.2s ease; +} +.libraries_list_item:hover .name { + text-decoration: underline; +} +/* @media only screen and (min-width: 450px) { + .libraries .card { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } +} */ +/* Resources ends */ + + diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 0000000..bf5da65 --- /dev/null +++ b/css/variables.css @@ -0,0 +1,22 @@ +/*------css varaible------*/ +:root { + --primary-color1: #0abf53; + --secondary-color1: #00112c; + --secondary-color2: #00112c; + --secondary-color3: #394962; + --blue-color1: #0abf53; + --blue-color2: #0abf53; + --white-color: #ffffff; + --grey-color1: #dce0e5; + --box-shadow1: 0px 4px 4px rgba(0, 0, 0, 0.03); + --box-shadow2: 0px 4px 14px rgba(0, 0, 0, 0.06); + --border-radius1: 6px; + --border-radius2: 8px; + --border-radius3: 12px; + --s-1: 0.5rem; + --s-2: 1rem; + --s-3: 1.5rem; + --s-4: 2rem; + --s-5: 2.5rem; + --s-6: 3rem; +} \ No newline at end of file diff --git a/img/Branded-Amsterdam Office3.jpg b/img/Branded-Amsterdam Office3.jpg new file mode 100644 index 0000000..49ab451 Binary files /dev/null and b/img/Branded-Amsterdam Office3.jpg differ diff --git a/img/DIGITAL-Adyen-green-RGB.png b/img/DIGITAL-Adyen-green-RGB.png new file mode 100644 index 0000000..db03b79 Binary files /dev/null and b/img/DIGITAL-Adyen-green-RGB.png differ diff --git a/img/adyen-icon-192x192.png b/img/adyen-icon-192x192.png new file mode 100644 index 0000000..b14e962 Binary files /dev/null and b/img/adyen-icon-192x192.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cfabceb --- /dev/null +++ b/index.html @@ -0,0 +1,332 @@ + + + + + + + + + + + + + Adyen Devs + + + +
+
+ + + +
+
+
+ + + +
+ +
+ + + +
+
+
+

Developer essentials

+

Learn what you need to build a successful integration with Adyen.

+
+
+
+
+ +
+

Adyen Blog

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

+
    +
  • Ipsum a arcu cursus vitae Link
  • +
  • Semper viverra nam libero
  • +
  • Elit ullamcorper dignissim crase
  • +
+
+
+
+
+ +
+
+
+
+ +
+

Documentation

+
+

Explore our guides and examples to integrate Adyen. Our documentation covers the essentials:

+
    +
  • Payments - Build an integration to accept payments online or in person
  • +
  • Business operations - Monitor, protect, and report on your money
  • +
  • Financial services - Move, control, and borrow money with Adyen
  • +
+
+
+
+
+ +
+
+
+
+ +
+

Adyen Samples

+
+

Build with sample code designed to help you get started with your Adyen integration. Learn how to:

+
    +
  • Quickly accept one-time payments
  • with Adyen Checkout li> +
  • Combine Checkout and Billing for fast subscription pages
  • +
  • Accept a one-time payment on web, iOS, or Android.
  • +
+
+
+
+
+ +
+
+
+
+
+ + + + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..219c547 --- /dev/null +++ b/main.js @@ -0,0 +1,8 @@ +/*===== MENU TOGGLE =====*/ +const navList = document.querySelector('.nav'); +const toggleMenu = document.querySelector('.hamburger'); + +toggleMenu.addEventListener('click', () => { + navList.classList.toggle('open-menu'); + toggleMenu.classList.toggle('open-menu'); +}); \ No newline at end of file