From 9da96acc415c7c77bb6a2eaa236ab5f750a4bf48 Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Sun, 22 Sep 2024 00:39:03 +0800
Subject: [PATCH] new feature in notebook.tsx

---
 src/containers/App/App.css | 11 +++++++++++
 src/contents/notebook.tsx  | 39 ++++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 4538f20..1b6a6e9 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -8,6 +8,10 @@ body {
   margin-left: auto;
 }
 
+.bg-gray {
+  background-color: #A9A9A9;
+}
+
 .bg-dark {
   background-color: #343a40 !important;
 }
@@ -679,4 +683,11 @@ footer a:hover {
   height: 30%;
   width: auto;
   
+}
+
+.center-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
\ No newline at end of file
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index 34c1f05..a225b52 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -64,15 +64,21 @@ export function Notebook() {
           
               
               <Element name="section1" className="element" id='section1'>
-                <div className='row'>
-                  <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
-                  <div className='col-6 rounded-border'>
-                    <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-                </div>
+                <div className='row center-div'>
+                  <div className='col-4 '><img src='https://placehold.co/600x400' className='responsive-img' /></div>
+                    <div className='col-6 '>
+                      <div className='rounded-border '>
+                        <h3 className="center-text">我是大帅B</h3>
+                        <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                        <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                      </div>
+                    </div>
                 </div>
                 </Element>
+
+                <div className="bd-callout bd-callout-info bg-gray">
+                  <h1>没有什么能够阻挡我们！！</h1>
+                </div>
                  {/* <h2>Section 1</h2>
                  <p>Content for section 1.</p>
                  <img 
@@ -86,15 +92,16 @@ export function Notebook() {
           
               
               <Element name="section2" className="element" id='section2'>
-              <div className='row'>
-              <div className='col-6 rounded-border'>
-                    <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-                </div>
-                  <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
-                  
-                </div>
+                  <div className='row center-div'>
+                      <div className='col-6 '>
+                        <div className='rounded-border '>
+                          <h3 className="center-text">我是大帅B</h3>
+                          <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                          <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                        </div>
+                      </div>
+                      <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
+                  </div>
               </Element>
           
 
-- 
GitLab