From 204756b942df93fc0a962004f81181e30398f58d Mon Sep 17 00:00:00 2001
From: Rachel Andrew <rachelandrew@google.com>
Date: Tue, 2 Nov 2021 13:05:52 +0000
Subject: [PATCH] Updates CodePens and links

---
 src/site/content/en/learn/design/intro/index.md  |  6 +++---
 .../en/learn/design/media-queries/index.md       | 16 ++++++++--------
 .../en/learn/design/micro-layouts/index.md       | 12 ++++++------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/site/content/en/learn/design/intro/index.md b/src/site/content/en/learn/design/intro/index.md
index ff3c3e4b052..6762c61da9f 100644
--- a/src/site/content/en/learn/design/intro/index.md
+++ b/src/site/content/en/learn/design/intro/index.md
@@ -121,7 +121,7 @@ On a narrow screen, the user would have to move the whole page left and right to
  tab: 'result'
 } %}
 
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/WNOKexX">the liquid layout example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/YzxEzpE">the liquid layout example</a> 
 in a new browser window to see how changing the size of the window stretches the design.</figcaption>
 </figure>
 
@@ -172,7 +172,7 @@ But given the variety of device sizes, chances are the layout will look less tha
  theme: 'dark',
  tab: 'result'
 } %}
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/jOwpNgX">the adaptive layout example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/oNeoNYw">the adaptive layout example</a> 
 in a new browser window to see how changing the size of the window causes the design to jump between layouts.</figcaption>
 </figure>
 
@@ -188,7 +188,7 @@ If adaptive layouts are a mashup of media queries and fixed-width layouts, respo
  theme: 'dark',
  tab: 'result'
 } %}
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/VwWBKPV">the responsive design example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/JjyOjbE">the responsive design example</a> 
 in a new browser window to see how changing the size of the window causes the design to fluidly change layout.</figcaption>
 </figure>
 
diff --git a/src/site/content/en/learn/design/media-queries/index.md b/src/site/content/en/learn/design/media-queries/index.md
index 88cbcf60abf..e9b93c226f8 100644
--- a/src/site/content/en/learn/design/media-queries/index.md
+++ b/src/site/content/en/learn/design/media-queries/index.md
@@ -132,8 +132,8 @@ Or using separate stylesheets:
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'QWgxXdP',
+ user: 'web-dot-dev',
+ id: 'qBXVowV',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -184,8 +184,8 @@ Use the word `and` to combine your media queries:
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'Pojxrep',
+ user: 'web-dot-dev',
+ id: 'GRvOxaw',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -212,8 +212,8 @@ Using the `column-count` property, the text is divided into two columns from tha
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'dyRwZxG',
+ user: 'web-dot-dev',
+ id: 'oNeodgd',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -240,8 +240,8 @@ Those breakpoints were chosen based on the amount of content.
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'mdwaprw',
+ user: 'web-dot-dev',
+ id: 'JjyOvdM',
  height: 1000,
  theme: 'dark',
  tab: 'result'
diff --git a/src/site/content/en/learn/design/micro-layouts/index.md b/src/site/content/en/learn/design/micro-layouts/index.md
index a86bfbac14d..91234b6d22c 100644
--- a/src/site/content/en/learn/design/micro-layouts/index.md
+++ b/src/site/content/en/learn/design/micro-layouts/index.md
@@ -52,8 +52,8 @@ h1::after {
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'WNOLWvz',
+ user: 'web-dot-dev',
+ id: 'rNzYvxm',
  height: 200,
  theme: 'dark',
  tab: 'result'
@@ -93,8 +93,8 @@ But the image never gets larger than 200 pixels.
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'rNwXepq',
+ user: 'web-dot-dev',
+ id: 'qBXVYZo',
  height: 300,
  theme: 'dark',
  tab: 'result'
@@ -224,8 +224,8 @@ This demo won't work in every browser. In Google Chrome you can find the `#enabl
 {% endAside %}
 
 {% Codepen {
- user: 'adactio',
- id: 'bGRXqBX',
+ user: 'web-dot-dev',
+ id: 'RwZjyRv',
  height: 500,
  theme: 'dark',
  tab: 'result'