diff --git a/blogs/01/styles/category.css b/blogs/01/styles/category.css
new file mode 100644
index 0000000..ae5f080
--- /dev/null
+++ b/blogs/01/styles/category.css
@@ -0,0 +1,53 @@
+.category{
+ height:175px;
+ width:100%;
+ background-color:var(--background-color);
+ padding:48px 0px;
+}
+.content{
+ height:175px;
+ width:570px;
+ background-color:var(--background-color);
+ padding:0px 15px;
+ line-height:1.5;
+ margin-left:150px;
+}
+.content > span {
+ height:20px;
+ width:67px;
+ color:var(--ptext-color);
+ display:block;
+ font-weight:350;
+}
+.content > p{
+ height:80px;
+ width:570px;
+ color:var(--ptext-color);
+ font-weight:350;
+ margin-top:0px;
+}
+.content > h3 {
+ font-size:28px;
+ margin-top:10px;
+ font-weight:380;
+ margin-bottom:8px;
+ color:#000;
+}
+
+@media screen and (max-width:424px){
+ .category{
+ height:200px;
+ }
+ .content{
+ height:200px;
+ margin:0px;
+ }
+ .content > h3 {
+ height:42px;
+ width:394px;
+ }
+ .content > p {
+ height:108px;
+ width:394px;
+ }
+}
\ No newline at end of file
diff --git a/blogs/01/styles/common.css b/blogs/01/styles/common.css
index f84c559..bd0541e 100644
--- a/blogs/01/styles/common.css
+++ b/blogs/01/styles/common.css
@@ -1,8 +1,48 @@
body{
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI",
- oboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
\ No newline at end of file
+ margin: 0;
+ padding:0;
+ font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+
+section {
+ --span-blue:#2F89FC;
+ --span-gray:#6c757d;
+ --span-green:#8bc34a;
+ --span-yellow:#F89D13;
+ --span-red:#F23A2E;
+ --lite-gray:#ffffff80;
+ --ptext-color:#808080;
+ --h2text-color:#ffffff;
+ --footer-background:#333333;
+ --footer-lastp:#737373;
+
+ }
+
+ div{
+ --background-color:#f8f9fa;
+ --whitebackground-color:#fff;
+ }
+
+ footer{
+ --ptext-color:#808080;
+ --h2text-color:#ffffff;
+ --footer-background:#333333;
+ --footer-lastp:#737373;
+ }
+}
+
+ul{
+ list-style-type: none;
+}
+
+li>a{
+ text-decoration: none;
+}
+
+a{
+ text-decoration: none;
+}
+
+
+
+
diff --git a/blogs/01/styles/footer.css b/blogs/01/styles/footer.css
new file mode 100644
index 0000000..912c027
--- /dev/null
+++ b/blogs/01/styles/footer.css
@@ -0,0 +1,146 @@
+footer{
+ background-color:var(--footer-background);
+}
+.footer{
+ height:318px;
+ background-color:var(--footer-background);
+ padding:80px 0px;
+ display: flex;
+ flex-direction:column;
+ align-items: center;
+ justify-content: center;
+}
+.footer > .container {
+ height:318px;
+ width:1200px;
+ padding:0px 15px;
+ background-color:var(--footer-background);
+ display: flex;
+ justify-content: center;
+ align-items:flex-start;
+}
+.footer > .container > div {
+ height:227px;
+ width:399px;
+ background-color:var(--footer-background);
+ padding: 0px 10px;
+}
+h3{
+ color:var(--h2text-color);
+ font-weight:500;
+ margin-top:0px;
+}
+p{
+ color:var(--footer-lastp);
+ margin-top:0px;
+ line-height:1.7;
+ font-size:18px;
+ font-weight:300;
+}
+.footer > .container > div >ul{
+ height:148px;
+ width:80px;
+ display:inline-block;
+ margin-top:2px;
+ margin-left: 60px;
+
+}
+.footer > .container > div > ul > li > a{
+ color:#999999;
+ margin-bottom:15px;
+ margin-top:0px;
+ font-weight:300;
+ font-size:18px;
+}
+.footer > .container > div > ul > li > a:hover{
+ color:var(--h2text-color);
+}
+.footer > .container > div > ul > li{
+ margin-bottom:15px;
+}
+.footer > .container > div:last-child > h3{
+ margin-left:80px;
+}
+.footer > .container > div:last-child > div {
+ height:26px;
+ width:350px;
+ display:flex;
+ justify-content:center;
+}
+.footer > .container > div:last-child > div > a {
+ margin:10px;
+}
+.footer > .container > div:last-child > div > a > img{
+ height:16px;
+ width:20px;
+ background:transparent;
+}
+.footer > div:last-child{
+ height:25px;
+ margin-left:50px;
+}
+.footer > div:last-child > p{
+ color:var(--footer-lastp);
+ font-size: 18px;
+}
+.footer > div:last-child > p > span{
+ font-size:24px;
+ color:red;
+}
+.footer > div:last-child > p > a{
+ color:var(--ptext-color);
+ font-weight:400;
+ margin-left:5px;
+}
+
+
+@media screen and (max-width:424px){
+ .footer{
+ height:570px;
+ padding:65px 0px;
+ display: flex;
+ flex-direction:column;
+ }
+ .footer > .container {
+ height:575px;
+ width:424px;
+ flex-direction:column;
+ padding:10px 0px;
+ }
+ .footer > .container > div {
+ height:200px;
+ width:394px;
+ padding:0px 15px;
+ }
+ h3 , p {
+ font-size:16px;
+ }
+ .footer > .container > div >ul{
+ margin-left: -30px;
+ padding:0px 30px;
+ }
+ .footer> .container > div > ul > li > a{
+ font-size:16px;
+ }
+ .footer > .container > div:last-child > h3{
+ margin-left:0px;
+ margin-top:-20px;
+ }
+ .footer > .container > div:last-child > div {
+ height:26px;
+ width:350px;
+ justify-content:left;
+ }
+ .footer > div:last-child{
+ height:70px;
+ margin:0px 8px;
+ margin-top:-90px;
+ }
+ .footer > div:last-child > p {
+ font-size:18px;
+ text-align:center;
+ }
+ .footer > div:last-child > p > span{
+ font-size:18px;
+ }
+}
\ No newline at end of file
diff --git a/blogs/01/styles/header.css b/blogs/01/styles/header.css
index 45a3834..e54cef5 100644
--- a/blogs/01/styles/header.css
+++ b/blogs/01/styles/header.css
@@ -1,109 +1,87 @@
-nav.header{
- background-color:white;
- display: flex;
- justify-content: space-between;
- height: 68px;
- align-items: center;
-
-}
-nav.header>h3{
- font-size: 24px;
- color: #000 !important;
- font-weight: 400;
- padding: 0px 20px;
-}
-div.slide>ul{
- list-style-type: none;
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 30px;
- padding: 0px 20px;
- margin-top: -20px;
+nav > div.container{
+ height: 67px;
+ background-color: var(--whitebackground-color);
+ display:flex;
+ justify-content:space-between;
+
}
-div.slide>ul>li>a{
- text-decoration: none;
- padding: 10px 0px;
- font-weight: 500;
- color: #000;
- transition: all,0.3s,ease;
+
+nav > div.container > div{
+ height: 67px;
+ }
+nav > .container > list {
+ width: 982px;
}
-div.slide>ul>li>a:hover{
- color: #2f89fc;
+nav> div.container > .headername{
+ height: 27px;
+ font-size: 24px;
+ padding:20px;
+ font-size: 1.5rem;
}
-div.slide>ul>li>a>img{
- height:20px;
-}
-.hamburger{
- position: relative;
- width: 30px;
- height: 3.2px;
- background-color:black;
- border-radius: 10px;
- cursor: pointer;
- z-index: 2;
- transition: 0.3s;
- margin:-20px 10px 0px 0px ;
-}
-.hamburger:before,.hamburger:after{
- content: "";
- position: absolute;
- height: 3px;
- right: 0;
- background: black;
- border-radius: 10px;
- transition: 0.3s;
+nav> div.container > .headername > a{
+ color: #000;
+ text-decoration:none;
+ font-size: 1.5rem;
}
-div.hamburger:before{
- top: -10px;
- width: 30px;
-}
-div.hamburger:after{
- top: 10px;
- width: 30px;
+
+nav> div.container > .list > .listmenu {
+ width: 982px;
}
-.toogle-menu{
- position: relative;
- width: 30px;
- height: 100%;
- z-index: 3;
- cursor: pointer;
- opacity: 0;
+nav > div.container > .list > .listmenu > ul {
+ height: 32px;
+ display:flex;
+ justify-content:right;
+ gap:30px;
+ align-items:center;
+ }
+
+
+nav > div.container > .list > .listmenu > ul > li > a {
+ font-size:16px;
+ font-weight: 640;
+ color: #000;
+ padding: 10px 0px;
}
-div.hamburger,.toggle-menu{
- display: none;
+
+nav > div.container > .list > .listmenu > ul > li > a:hover{
+ color: blue;
}
-.slide input:checked ~ ul.menu{
- right: 0;
-
+
+nav > div.container > .list > .listmenu > ul > li > a > img {
+ height: 16px;
+ width: 16px;
+ margin-right: 20px;
+ margin-top: 8px;
+
}
-@media screen and (max-width:425px){
- div.hamburger,.toggle-menu{
- display:block;
- }
- div.slide>ul.menu{
- justify-content: start;
- flex-direction: column;
- align-items: center;
- position: fixed;
- top: 0;
- right: -320px;
- background: rgb(246, 246, 246,1);
- width: 200px;
- height: 100%;
- padding-top: 20%;
- margin-bottom: 100;
-
- }
- div.slide>ul>li{
- width: 100%;
- }
- div.slide>ul>li>a{
- padding: 10px;
- font-size: 20px;
- color: #000000;
- transition: all,0.3s,ease;
- }
-}
\ No newline at end of file
+.humble {
+ display:none;
+ padding: 0px 20px;
+ margin-top:10px;
+ }
+ .humble > div {
+ height:3px;
+ width:20px;
+ background-color:black;
+ margin:5px auto;
+ }
+@media screen and (max-width: 425px){
+ nav > div.container {
+ height:40px;
+ }
+ nav > div.container > .headername{
+ height:20px;
+ width:150px;
+ padding:10px;
+ display:flex;
+ align-items:center;
+ }
+ nav > div.container > .list >.listmenu {
+ display:none;
+ }
+ .humble {
+ display:block;
+ }
+}
diff --git a/blogs/01/styles/recentpost.css b/blogs/01/styles/recentpost.css
new file mode 100644
index 0000000..58d893c
--- /dev/null
+++ b/blogs/01/styles/recentpost.css
@@ -0,0 +1,217 @@
+#recentpost > div.recent{
+ height:2200px;
+ background-color: var(--white-background-color);
+ padding:80px 0px;
+ display:flex;
+ justify-content:center;
+}
+
+#recentpost > div.recent > div.container {
+ height: 2150px;
+ width: 1200px;
+ display: flex;
+ flex-direction: column;
+ gap:50px;
+ margin-top: 0px;
+}
+
+#recentpost > div.recent > div.container > div:first-child > h2{
+ height: 48px;
+ width: 1170px;
+ font-size: 32px;
+ font-weight: normal;
+ margin: 0px 0px 8px;
+ background-color: var(--white-background-color);
+}
+
+#recentpost > div.recent > div.container > div.lstchild {
+ width: 1200px;
+ background-color: var(--white-background-color);
+ display:grid;
+ grid-template-columns:repeat(3,1fr);
+
+}
+#recentpost > div.recent > div.container > div.lstchild > div{
+ height: 667px;
+ width: 399px;
+ margin-bottom: 20px;
+}
+#recentpost > div.recent > div.container > div.lstchild > div > a{
+ height:253px;
+ width:369px;
+ border-radius: 4px;
+ margin:0px 0px 20px 0px;
+ background-image:url('https://placehold.co/369x253');
+ display:inline-block;
+ margin: 15px;
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > span{
+ background-color: var(--span-gray);
+ color: white;
+ display: inline-block;
+ padding: 3px 10px;
+ border-radius: 4px;
+ letter-spacing: 3px;
+ font-weight: 700;
+ font-size: 9px;
+ margin-left: 20px;
+
+}
+
+
+
+#recentpost > div.recent > div.container > div.lstchild > div.second > div.box > span{
+ background-color: var(--span-green);
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div.third > div.box > span{
+ background-color: var(--span-yellow);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.fiveth > div.box > span{
+ background-color: var(--span-green);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.sixth > div.box > span{
+ background-color: var(--span-red);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.seventh > div.box > span{
+ background-color: var(--span-green);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.eiegth > div.box > span.snd{
+ background-color:var(--span-gray);
+ margin-left: 0px;
+}
+#recentpost > div.recent > div.container > div.lstchild > div.eiegth > div.box > span{
+ background-color: var(--span-red);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.ninth > div.box >span{
+ background-color: var(--span-red);
+}
+#recentpost > div.recent > div.container > div.lstchild > div.ninth > div.box > span.snd{
+ background-color: var(--span-yellow);
+ margin-left: 0px;
+}
+
+
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box{
+ height:383px;
+ width:369px;
+ padding: 0px 20px;
+}
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > h2{
+ height: 42px;
+ width: 339px;
+ margin: 20px;
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > div.aimg{
+ height: 60px;
+ align-items: center;
+ display: inline-flex;
+ font-size: 13px;
+ padding:20px;
+}
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > div.aimg > img {
+ border-radius: 15px;
+ margin-right: 20px;
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > div.aimg > span {
+ color:#B3B3B3;
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > div.aimg > span > a {
+ color: black;
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > div.box > p.article {
+ line-height: 1.5;
+ color:#666666;
+ font-size: 16px;
+ margin-top: 0px;
+ margin-left: 20px;
+ height: 136px;
+ width: 319.99px;
+ font-weight: 300;
+}
+
+#recentpost > div.recent> div.container > div.lstchild > div > div.box > p:last-child > a{
+ color: var(--span-blue);
+ margin: 20px;
+ font-size: 16px;
+ font-weight: 350;
+
+}
+
+#recentpost > div.recent > div.container > div.lstchild > div > p:last-child {
+ margin-top: 0px;
+ height: 22px;
+ font-weight: 300;
+}
+ div.border > div.pagen {
+ display: flex;
+ justify-content:center;
+ height: 100px;
+ align-items: center;
+ gap: 10px;
+}
+
+ div.border > div.pagen > a {
+ text-align: center;
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ border-radius: 50%;
+ background-color:var(--span-blue);
+ color:var(--h2text-color);
+}
+
+ div.border > div.pagen > span{
+ text-align: center;
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ border-radius: 50%;
+ color: var(--ptext-color);
+}
+
+ div.border{
+ height:68px;
+ weidth:1200px;
+ border-top: 1px solid #edf0f5;
+}
+
+@media screen and (max-width:425px){
+ #recentpost > div.recent{
+ height:7000px;
+ padding:0;
+ margin-top:30px;
+ }
+ #recentpost > div.recent > div.container{
+ height:7000px;
+ width:394px;
+ margin: 0px auto;
+ }
+ #recentpost > div.recent > div.container > div.lstchild{
+ grid-template-columns:repeat(1,1fr);
+ width:394px;
+ margin-left:-15px;
+ }
+ #recentpost > div.recent > div.container > div.lstchild > div > a{
+ height:270px;
+ width:394px;
+ background-image: url(https://placeholder.co/394x270);
+ }
+ #recentpost > div.recent > div.container > div.lstchild > div{
+ height:720px;
+ width:394px;
+ }
+ #recentpost > div.recent > div.container > div.lstchild > div > div.box {
+ height:384px;
+ width:394px;
+ padding:20px;
+ }
+}
\ No newline at end of file