Home 에 눈송이 아이콘 추가

SoluxProject · Aug 17, 2021 · 15118ac · 15118ac
1 parent d63a202
commit 15118ac
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 24 deletions.
diff --git a/public/img/sweetme_logo.png b/public/img/sweetme_logo.png
diff --git a/src/App.css b/src/App.css
@@ -41,7 +41,7 @@
 }
 
 .container {
-  display: flex;
+  display: flex; 
 }
 .item {
   display: flex;
@@ -50,6 +50,9 @@
 .column {
   flex-direction: column;
 }
+
+
+
 header {
   padding: 10px;
   background-color: #456268;
@@ -154,7 +157,8 @@ body {
   padding: 50px;
   text-align: center;
   margin: auto;
-  position: static;
+  position: static; 
+  display: grid;
 }
 
 .section__container {
@@ -374,4 +378,32 @@ body {
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 8px;
+}
+/* 
+.header-nav {
+  position: fixed;
+}
+
+.container {
+  position: fixed;
+  width: 100%;
+}
+
+.containerMenu {
+  position: absolute;
+  display: inline-flex;
+  width: 100%;
+} */
+/* 
+nav { 
+  position: absolute;
+  display: inline-flex;
+  width: 100%;
+} */
+
+.introSection {
+  background-color:  #ffffff;
+  /* opacity: 0.7; */
+  height: 640px;
+  padding-top: 50px;
 }
diff --git a/src/Navbar.css b/src/Navbar.css
@@ -1,13 +1,14 @@
 * {
     margin: 0;
-    padding: 0;
+    padding: 0; 
 }
 .nav-bar {
     background-color: #456268;
     padding: 15px 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
+
 }
 .menu-list {
     background-color: #456268;
@@ -20,7 +21,7 @@
     transform: translateX(0);
     transition: all 0.8s ease 0s;
     opacity: 0;
-    visibility: hidden;
+    visibility: hidden; 
 }
 ul li {
     margin: 0px 70px;

diff --git a/src/component/Home.js b/src/component/Home.js
@@ -113,8 +113,9 @@ function Home() {
 
     return (
         <div className="Home">
+
               <section id="header-nav">
-                <div className="container column">
+                <div className="container_column">
                   <header className="container">
                     {ddayExist ?
                       (
@@ -229,6 +230,12 @@ function Home() {
                 </div>
               </section>
 
+              <section className="introSection"> 
+                    <img src="../img/sweetme_logo.png" alt="Sweet Me" width="700" height="500"></img>
+              </section>
+
+
+
               <section id="summary" className="section">
                 <div className="section__container">
                   <div className="summary__set">
@@ -253,25 +260,6 @@ function Home() {
                         })} 
                       </div>
 
-                      {/* <div className="study__note">
-                        <p>7월 11일 | 알고리즘</p>
-                        <p>
-                          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                          Atque blanditiis temporibus quisquam cupiditate quam amet
-                          velit excepturi deleniti, accusamus laboriosam placeat, natus
-                          sit! Suscipit, vero! Saepe totam molestias harum. Tempore.{" "}
-                        </p>
-                      </div>
-                      <div className="study__note">
-                        <p>7월 11일 | 알고리즘</p>
-                        <p>
-                          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                          Atque blanditiis temporibus quisquam cupiditate quam amet
-                          velit excepturi deleniti, accusamus laboriosam placeat, natus
-                          sit! Suscipit, vero! Saepe totam molestias harum. Tempore.{" "}
-                        </p>
-                      </div> */}
-
                     </div>
                     <div className="summary__right">
                       <h1>[오늘의 할일]</h1>