diff --git "a/\345\224\220\345\256\207\345\247\227/20241009-\350\203\214\346\231\257\346\270\220\345\217\230.md" "b/\345\224\220\345\256\207\345\247\227/20241009-\350\203\214\346\231\257\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cd953531717e49dbd31b5112d18f48a4fa57a69f
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241009-\350\203\214\346\231\257\346\270\220\345\217\230.md"
@@ -0,0 +1,155 @@
+# 渐变 `background-image`
+- 分类
+    - 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+    - 径向渐变：从一个中心点开始沿着四周产生渐变效果。
+    - 重复渐变。
+
+### 线性渐变
+```css
+bacground-image:linear-gradient(方向,起始颜色,终止颜色);
+bacground-image:linear-gradient(to left,pink,black);
+```
+方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。
+
+演示代码
+```css
+      .box1{
+            background-image: linear-gradient(to left,pink,black);
+        }
+
+        .box1{
+            background-image: linear-gradient(135deg,pink,black);
+        }
+
+```
+不写方向默认从上往下(to bottom),也可以设置角度
+
+突出渐变
+```css
+/* 突出渐变:颜色之间，出现突变 */
+        .box2{
+            background-image: linear-gradient(to right,pink 0%,pink 20% ,gray 20%,gray 70% ,black 70%,black 100%);
+        }
+```
+
+
+### 径向渐变
+```css
+	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+
+	background-image: radial-gradient(100px at center,pink ,black);
+```
+围绕中心点做渐变，半径是150px，从粉色到黑色做渐变。
+
+中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
+
+
+代码演示
+```css
+   .box3{
+            background-image: radial-gradient(at center ,pink,black);
+        }
+
+    .box3{
+            background-image: radial-gradient(100px at center ,pink,black);
+        }
+```
+
+设置不同颜色的渐变
+```css
+ .box3{
+            background-image: radial-gradient(100px at center ,red 0%,pink 20%,black 60% ,gray 90% ,pink 100%);
+        }
+```
+辐射宽高不同，那就是椭圆。
+
+
+### 重复渐变
+
+```css
+ .box4{
+            background-image: repeating-linear-gradient(90deg,pink,pink 20px,black 20px,black 40px)
+        }
+```
+
+# 背景渐变练习
+1.练习1
+```css
+ div{
+            width: 800px;
+            height: 200px;
+            border: 1px solid;
+            background-image: repeating-linear-gradient(
+                45deg,
+                yellow 0%,
+                yellow 25% ,
+                blue 25%,
+                blue 50%,
+                red 50% ,
+                red 75%,
+                green 75% ,
+                green 100% )
+        }
+```
+### 效果1
+[作业1](http://sl3d4j3rg.hn-bkt.clouddn.com/%E4%BD%9C%E4%B8%9A1.png?e=1728482666&token=0SS4Y06ZE2ilPgEw77c6IRrbB5F2HmB6MDZyJt9z:zYe5fjfTqgFUnxLj62hjM5C8aEE=)
+2.练习重复渐变
+```css
+  div{
+            width: 800px;
+            height: 200px;
+            border: 1px solid;
+            background-image: repeating-linear-gradient(
+                90deg,
+                black,
+                black 200px,
+                white 200px,
+                white 400px
+              
+                
+            );
+        }
+```
+### 效果2
+[重复渐变](http://sl3d4j3rg.hn-bkt.clouddn.com/%E4%BD%9C%E4%B8%9A2.png?e=1728482731&token=0SS4Y06ZE2ilPgEw77c6IRrbB5F2HmB6MDZyJt9z:F2ms1RP1i4tMfliavYN-MPSopiU=)
+
+
+
+3.中华人民共和国
+```css
+ div{
+            width: 400px;
+            height: 200px;
+           font-size: 48px;
+           font-weight: bold;
+           background-image: linear-gradient(
+            45deg,
+            orange 0%,
+            orange 50%,
+            blue 50%,
+            blue 75%,
+            red 75%,
+            red 100%);
+
+            background-clip: text;
+            color: transparent;
+        }
+```
+### 效果3
+[中华人民共和国](http://sl3d4j3rg.hn-bkt.clouddn.com/%E4%BD%9C%E4%B8%9A3.png?e=1728482738&token=0SS4Y06ZE2ilPgEw77c6IRrbB5F2HmB6MDZyJt9z:mAejBGyIc7a0DKOnCJFRkljuINQ=)
+
+
+4.格子
+```css
+   div{
+            border: 1px solid;
+            height: 400px;
+            width: 400px;
+            background: white;
+            background-image: linear-gradient(to right,rgba(255,92,78,0.5) 50%,transparent 0),
+                            linear-gradient(rgba(255,150,138,0.5)  50% ,transparent 0) ;
+            background-size: 40px 40px;
+        }
+```
+### 效果4
+[格子](http://sl3d4j3rg.hn-bkt.clouddn.com/%E4%BD%9C%E4%B8%9A4.png?e=1728482763&token=0SS4Y06ZE2ilPgEw77c6IRrbB5F2HmB6MDZyJt9z:ctbZ-p99NKplUPWVMEaJDUET4iA=)
diff --git "a/\345\224\220\345\256\207\345\247\227/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\345\224\220\345\256\207\345\247\227/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a36478001d4e25b016bc515e0a63e57f4839b83a
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,841 @@
+# CSS 概述
+CSS：Cascading Style Sheet，层叠样式表。
+
+CSS 的重点知识点
+
+盒子模型、浮动、定位
+
+如果在 sublime 中输入<st或者<style然后按 tab 
+
+```css
+<style type="text/css"></style>
+```
+type 表示“类型”，text 就是“纯文本”，css 也是纯文本。
+
+### CSS语法
+语法格式：（其实就是键值对）
+```css
+选择器{ 属性名: 属性值; 属性名: 属性值; }
+```
+或者可以写成：
+```css
+选择器 {
+    k: v;
+    k: v;
+    k: v;
+    k: v;
+}
+选择器 {
+    k: v;
+    k: v;
+    k: v;
+    k: v;
+}
+```
+解释：
+
+选择器代表页面上的某类元素，选择器后一定是大括号。
+属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
+冒号和属性值之间可以留一个空格（编程习惯的经验）。
+如果一个属性有多个值的话，那么多个值用空格隔开
+
+### CSS 代码的注释
+CSS 只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。
+
+### CSS常见的属性
+**字体颜色：**（c）
+
+```html
+color:red;
+```
+
+color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。
+
+**字号大小：**（fos）
+
+```html
+font-size:40px;
+```
+
+font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。
+
+**背景颜色：**（bgc）
+
+```html
+background-color: blue;
+```
+
+background 就是“背景”。
+
+**加粗：**（fwb）
+
+```html
+font-weight: bold;
+```
+
+font 是“字体” weight 是“重量”的意思，bold 粗。
+
+**不加粗：**（fwn）
+
+```html
+font-weight: normal;
+```
+
+normal 就是正常的意思。
+
+**斜体：**（fsi）
+
+```html
+font-style: italic;
+```
+
+italic 就是“斜体”。
+
+**不斜体：**（fsn）
+
+```html
+font-style: normal;
+```
+
+**下划线：**（tdu）
+
+```html
+text-decoration: underline;
+```
+
+decoration 就是“装饰”的意思。
+
+**没有下划线：**（tdn）
+
+```html
+text-decoration:none;
+```
+
+## CSS 的书写方式
+CSS 的书写方式有三种：
+
+1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签。
+
+2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用`<style>`**标签**。范围针对此页面。
+3. **外链样式**：引入外部样式表 CSS **文件**。这种引入方式又分为两种：
+   - 3.1 采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+   - 3.2 采用 import 导入，必须写在`<style>`标签中。然后用类似于`@import url(a.css) ;`这种方式导入。
+
+### 1、CSS 和 HTML 结合方式一：行内样式
+
+采用 style 属性。范围只针对此标签适用。
+
+该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
+
+
+### 2、CSS 和 HTML 结合方式二：内嵌样式表
+
+在 head 标签中加入`<style>`标签，对多个标签进行统一修改，范围针对此页面。
+
+该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
+
+### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
+
+**引入样式表文件**的方式又分为两种：
+
+-   （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
+
+-   （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
+
+> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
+
+补充的知识：**`<link>`标签的 rel 属性：**。其属性值有以下两种：
+
+-   `stylesheet`：定义的样式表
+-   `alternate stylesheet`：候选的样式表
+
+## CSS 的四种基本选择器
+
+CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
+
+CSS 的选择器分为两大类：基本选择器和扩展选择器。
+
+**基本选择器：**
+
+-   标签选择器：针对**一类**标签
+-   ID 选择器：针对某**一个**特定的标签使用
+-   类选择器：针对**你想要的所有**标签使用
+-   通用选择器（通配符）：针对所有的标签都适用（不建议使用）
+
+### 标签选择器
+标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“**共性**”，无法描述某一个元素的“个性”。
+
+举例：
+
+```html
+p{ font-size:14px; }
+```
+
+上方选择器的意思是说：所有的`<p>`标签里的内容都将显示 14 号字体。
+
+【总结】需要注意的是：
+
+（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
+
+（2）无论这个标签藏的多深，一定能够被选择上。
+
+（3）选择的所有，而不是一个。
+### ID选择器：  规定使用`#`来定义
+针对某一个特定的标签，只能使用一次。
+
+举例：
+
+```html
+#mytitle{ border:3px dashed green; }
+```
+任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
+
+-   （1）只能有字母、数字、下划线。
+-   （2）必须以字母开头。
+-   （3）不能和标签同名。比如 id 不能叫做 body、img、a。
+
+**HTML 页面，不能出现相同的 id，哪怕他们不是一个类型**。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
+
+**一个标签可以被多个 css 选择器选择：**
+
+比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签
+
+### 类选择器：规定用圆点`.`来定义
+class 属性的特点：
+
+-   特性 1：类选择器可以被多种标签使用。
+
+-   特性 2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确）
+
+**上面这三种选择器的区别：**
+
+-   标签选择器针对的是页面上的一类标签。
+-   ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。
+-   类选择器可以被多种标签使用。
+
+## CSS 的几种高级选择器
+
+**高级选择器：**
+
+-   后代选择器：用空格隔开
+-   交集选择器：选择器之间紧密相连
+-   并集选择器（分组选择器）：用逗号隔开
+-   伪类选择器
+
+### 1.子代选择器，用符号`>`表示
+
+### 2.序选择器
+
+### 3.下一个兄弟选择器
+
+
+
+
+# 选择器序列练习（只有主要代码）
+
+1、选择所有的plate，结构如下：
+```html
+  <style>
+        plate{}
+    </style>  
+<div class="table">
+    <plate />
+    <plate />
+</div>
+```
+2、选择所有的bento，结构如下：
+```html
+<head>
+    <style>
+        bento{}
+    </style>
+</head>
+<body>
+    <!-- 选择所有的bento -->
+    <div class="table">
+        <bento />
+        <plate />
+        <bento />
+    </div>
+</body>
+</html>
+```
+3、选择id为fancy的plate，结构如下：
+```html
+<head>
+  
+    <style>
+        #fancy{}
+    </style>
+</head>
+<body>
+    <!-- 选择所有的bento -->
+    <div class="table">
+        <plate id="fancy" />
+        <plate />
+        <bento />
+    </div>
+</body>
+</html>
+```
+选择plate里面的apple，结构如下：
+```html
+<head>
+ 
+    <style>
+        #fancy apple{}
+    </style>
+</head>
+<body>
+    <!-- 选择plate里面的apple，结构如下： -->
+    <div class="table">
+        <bento />
+        <plate>
+            <apple />
+        </plate>
+        <apple />
+    </div> 
+</body>
+</html>
+```
+选择id为fancy的plate中的pickle，结构如下：
+```html
+
+ <style>
+        #fancy pickle{}
+    </style>
+
+<div class="table">
+    <bento>
+        <orange />
+    </bento>
+    <plate id="fancy">
+        <pickle />
+    </plate>
+    <plate>
+        <pickle />
+    </plate>
+</div>
+```
+选择small的apple，结构如下：
+```html
+  <style>
+        apple.small{}
+    </style>
+
+<div class="table">
+    <apple />
+    <apple class="small" />
+    <plate>
+        <apple class="small" />
+    </plate>
+    <plate />
+</div>
+```
+选择small的orange，结构如下：
+```html
+    <style>
+        orange.small{}
+    </style>
+
+<div class="table">
+    <apple />
+    <apple class="small" />
+    <bento>
+        <orange class="small" />
+    </bento>
+    <plate>
+        <orange />
+    </plate>
+    <plate>
+        <orange class="small" />
+    </plate>
+</div>
+```
+选择bento中的small orange，结构如下：
+```html
+  <style>
+        bento orange.small{}
+    </style>
+
+<div class="table">
+    <bento>
+        <orange />
+    </bento>
+    <orange class="small" />
+    <bento>
+        <orange class="small" />
+    </bento>
+    <bento>
+        <apple class="small" />
+    </bento>
+    <bento>
+        <orange class="small" />
+    </bento>
+</div>
+```
+选择所有的plate和bento，结构如下：
+```html
+<style>
+        .plate , .bento{}
+    </style>
+
+<div class="table">
+    <pickle class="small" />
+    <pickle />
+    <plate>
+        <pickle />
+    </plate>
+    <bento>
+        <pickle />
+    </bento>
+    <plate>
+        <pickle />
+    </plate>
+    <pickle />
+    <pickle class="small" />
+</div>
+```
+选择所有的物品，结构如下：
+```html
+    <style>
+        apple,plate,orange,bento{}
+    </style>
+
+<div class="table">
+    <apple />
+    <plate>
+        <orange class="small" />
+    </plate>
+    <bento />
+    <bento>
+        <orange />
+    </bento>
+    <plate id="fancy" />
+</div>
+```
+选择plate中的所有东西，结构如下：
+```html
+    <style>
+        .plate *{}
+    </style>
+
+<div class="table">
+    <plate id="fancy">
+        <orange class="small" />
+    </plate>
+    <plate>
+        <pickle />
+    </plate>
+    <apple class="small" />
+    <plate>
+        <apple />
+    </plate>
+</div>
+```
+选择plate的下一个apple，结构如下：
+```html
+    <style>
+        .plate + apple{}
+    </style>
+
+<div class="table">
+    <bento>
+        <apple class="small" />
+    </bento>
+    <plate />
+    <apple class="small" />
+    <plate />
+    <apple />
+    <apple class="small" />
+    <apple class="small" />
+</div>
+```
+选择bento后面的所有pickle，结构如下：
+```html
+  <style>
+        bento ~ pickle{}
+    </style>
+
+<div class="table">
+    <pickle />
+    <bento>
+        <orange class="small" />
+    </bento>
+    <pickle class="small" />
+    <pickle />
+    <plate>
+        <pickle />
+    </plate>
+    <plate>
+        <pickle class="small" />
+    </plate>
+</div>
+```
+选择直接在plate中的apple，结构如下：
+```html
+ <style>
+        plate > apple{}
+    </style>
+
+<div class="table">
+    <plate>
+        <bento>
+            <apple />
+        </bento>
+    </plate>
+    <plate>
+        <apple />
+    </plate>
+    <plate />
+    <apple />
+    <apple class="small" />
+</div>
+```
+选择plate中的第一个orange，结构如下：
+```html
+ <style>
+        plate > orange:first-child{}
+    </style>
+
+<div class="table">
+    <bento />
+    <plate />
+    <plate>
+        <orange />
+        <orange />
+        <orange />
+    </plate>
+    <pickle class="small" />
+</div>
+```
+选择plate中的apple、pickle，结构如下：
+```html
+  <style>
+        plate apple,plate pickle{}
+    </style>
+
+<div class="table">
+    <plate>
+        <apple />
+    </plate>
+    <plate>
+        <pickle />
+    </plate>
+    <bento>
+        <pickle />
+    </bento>
+    <plate>
+        <orange class="small" />
+        <orange />
+    </plate>
+    <pickle class="small" />
+</div>
+```
+选择small的apple、pickle ，结构如下：
+```html
+<style>
+     .small apple,.small pickle{}
+   </style>
+
+<div class="table">
+    <plate id="fancy">
+        <apple class="small" />
+    </plate>
+    <plate />
+    <plate>
+        <orange class="small" />
+        <orange />
+    </plate>
+    <pickle class="small" />
+</div>
+```
+选择第3个plate，结构如下：
+```html
+ <style>
+        plate:nth-child(3){}
+    </style>
+
+<div class="table">
+    <plate />
+    <plate />
+    <plate />
+    <plate id="fancy" />
+</div>
+```
+选择第一个bento，结构如下：
+```html
+  <style>
+.bento:first-child{}
+    </style>
+
+<div class="table">
+    <plate />
+    <bento />
+    <plate>
+        <orange />
+        <orange />
+        <orange />
+    </plate>
+    <bento />
+</div>
+```
+选择第一个apple，结构如下：
+```html
+<style>
+        apple:first-child{}
+    </style>
+
+<div class="table">
+    <orange class="small" />
+    <apple />
+    <apple class="small" />
+    <apple />
+    <apple class="small" />
+    <plate>
+        <orange class="small" />
+        <orange />
+    </plate>
+</div>
+```
+选择序号为偶数的plate，结构如下：
+```html
+  <style>
+        plate:nth-child(even){}
+    </style>
+
+<div class="table">
+    <plate />
+    <plate />
+    <plate />
+    <plate />
+    <plate id="fancy" />
+    <plate />
+</div>
+```
+选择从第3个plate(包括第3个)开始的每2个plate，结构如下：
+```html
+ <style>
+        plate:nth-child(3n){}
+    </style>
+
+<div class="table">
+    <plate />
+    <plate>
+        <pickle class="small" />
+    </plate>
+    <plate>
+        <apple class="small" />
+    </plate>
+    <plate />
+    <plate>
+        <apple />
+    </plate>
+    <plate />
+</div>
+```
+选择中间plate中的apple，结构如下：
+```html
+ <style>
+        .main section h1,
+        .main article h2{
+            font-weight: bold;
+        }
+        .main aside h3{
+            font-style: italic;
+        }
+    </style>
+
+<div class="table">
+    <plate id="fancy">
+        <apple class="small" />
+        <apple />
+    </plate>
+    <plate>
+        <apple class="small" />
+    </plate>
+    <plate>
+        <pickle />
+    </plate>
+</div>
+```
+选择最后一个apple、最后一个orange，结构如下：
+```html
+<style>
+        apple:last-child,orange:last-child{}
+    </style>
+
+<div class="table">
+    <orange class="small" />
+    <orange class="small" />
+    <pickle />
+    <pickle />
+    <apple class="small" />
+    <apple class="small" />
+</div>
+```
+选择空的bento，结构如下：
+```html
+    <style>
+        bento:empty{}
+    </style>
+
+<div class="table">
+    <bento />
+    <bento>
+        <pickle class="small" />
+    </bento>
+    <plate />
+    <bento />
+</div>
+```
+选择较大的apple，结构如下：
+```html
+<style>
+        apple:not(.small){}
+    </style>
+<div class="table">
+    <plate id="fancy">
+        <apple class="small" />
+    </plate>
+    <plate>
+        <apple />
+    </plate>
+    <apple />
+    <plate>
+        <orange class="small" />
+    </plate>
+    <pickle class="small" />
+</div>
+```
+
+选择有for属性的东西，结构如下： 
+```html
+   <style>
+        [for]{}
+    </style>
+</head>
+<body>
+    
+   
+<div class="table">
+    <bento>
+        <apple class="small" />
+    </bento>
+    <apple for="Ethan" />
+    <plate for="Alice">
+        <pickle />
+    </plate>
+    <bento for="Clara">
+        <orange />
+    </bento>
+    <pickle />
+```
+ 选择有for属性的plate，结构如下
+ ```HTML
+  <style>
+        plate[for]{}
+    </style>
+</head>
+<body>
+    <!-- 选择有for属性的plate，结构如下： -->
+<div class="table">
+    <plate for="Sarah">
+        <pickle />
+    </plate>
+    <plate for="Luke">
+        <apple />
+    </plate>
+    <plate />
+        <bento for="Steve">
+        <orange />
+    </bento>
+ ```
+ 选择属性值为Vitaly的东西，结构如下：
+ ```HTML
+ <style>
+        [for='Vitaly']{}
+    </style>
+</head>
+<body>
+    <!-- 选择属性值为Vitaly的东西，结构如下： -->
+<div class="table">
+    <apple for="Alexei" />
+    <bento for="Albina">
+        <apple />
+    </bento>
+    <bento for="Vitaly">
+        <orange />
+    </bento>
+    <pickle />
+</div>
+</body>
+</html>
+ ```
+  选择for属性值以Sa开头的东西，结构如下：
+  ```HTML
+   <style>
+        [for^='Sa']{}
+    </style>
+</head>
+<body>
+    
+    <!-- 选择for属性值以Sa开头的东西，结构如下： -->
+    <div class="table">
+        <plate for="Sam">
+            <pickle />
+        </plate>
+        <bento for="Sarah">
+            <apple class="small" />
+        </bento>
+        <bento for="Mary">
+            <orange />
+        </bento>
+    </div>  
+</body>
+</html>
+  ```
+  选择for属性值以ato结束的东西，结构如下：
+  ```HTML
+      <style>
+        [for$='ato']{}
+    </style>
+</head>
+<body>
+    <!-- 选择for属性值以ato结束的东西，结构如下： -->
+<div class="table">
+    <apple class="small" />
+    <bento for="Hayato">
+        <pickle />
+    </bento>
+    <apple for="Ryota" />
+    <plate for="Minato">
+        <orange />
+    </plate>
+    <pickle class="small" />
+</div>
+</body>
+</html>
+  ```
+  选择for属性值包含obb的东西，结构如下：
+  ```HTML
+  <style>
+        [for*='obb']{}
+    </style>
+</head>
+<body>
+    <!-- 选择for属性值包含obb的东西，结构如下： -->
+<div class="table">
+    <bento for="Robbie">
+        <apple />
+    </bento>
+    <bento for="Timmy">
+        <pickle />
+    </bento>
+    <bento for="Bobby">
+        <orange />
+    </bento>
+</div>
+</body>
+</html>
+  ```