diff --git a/blogs/01/styles/section.css b/blogs/01/styles/section.css
new file mode 100644
index 0000000..083f574
--- /dev/null
+++ b/blogs/01/styles/section.css
@@ -0,0 +1,180 @@
+div.topicsection{
+ height: 500px;
+ background-color: var(--background-color);
+ padding: 80px 0px;
+ align-items: center;
+ display: grid;
+}
+
+div.topicsection > .container{
+ height: 430px;
+ width:1200px;
+ display:flex;
+ justify-content:center;
+ margin: 0 auto;
+}
+
+div.topicsection > .container > div{
+ width: 399px;
+ height: 430px;
+
+}
+
+div.topicsection > .container > div.first > a , div.third > a {
+ height: 200px;
+ width: 369px;
+ border-radius: 5px;
+ background-image:url('https://placehold.co/369x200');
+}
+
+div.topicsection > .container > div.second > a {
+ height: 430px;
+ width: 399px;
+ display:block;
+ border-radius: 5px;
+ background-image: url('https://placehold.co/369x400');
+}
+
+div.topicsection > .container > div.third{
+ display: flex;
+ flex-direction: column;
+ align-items:center;
+ gap: 30px;
+}
+
+div.topicsection > .container > div.first {
+ display: flex;
+ flex-direction: column;
+ align-items:center;
+ gap: 30px;
+
+
+}
+
+div.topicsection > .container > div.first > a > div {
+ width: 320px;
+ height: 70px;
+ padding: 20px;
+ margin-top: 90px;
+ position: relative;
+}
+
+div.topicsection > .container > div.first > a > div > h2{
+ color: var(--h2text-color);
+ font-size: 18px;
+ font-weight: 350;
+ line-height: 24px;
+ margin: 0;
+}
+
+div.topicsection > .container > div.first > a > div > span{
+ color: var(--lite-gray);
+}
+
+
+div.topicsection > .container > div.third > a > div {
+ width: 320px;
+ height: 70px;
+ padding: 20px;
+ margin-top: 80px;
+ position:relative;
+}
+
+div.topicsection > .container > div.third > a > div > h2{
+ color: var(--h2text-color);
+ font-size: 18px;
+ font-weight: 350;
+ line-height: 24px;
+ margin-bottom: 0px;
+}
+
+div.topicsection > .container > div.third > a > div > span{
+ color: rgba(255, 255, 255, 0.5);
+}
+
+div.topicsection > .container > div.second > a > div {
+ width: 350px;
+ height: 120px;
+ padding: 20px;
+ gap: 20px;
+ display:inline-grid;
+ margin-top: 280px;
+}
+
+div.topicsection > .container > div.second > a > div > div{
+ display: inline-block;
+
+ letter-spacing: 3px;
+ font-weight: 700;
+ font-size: 10px;
+ text-transform: uppercase;
+}
+
+div.topicsection > .container > div.second > a > div > div > span.bgred{
+ color: var(--h2text-color);
+ background-color:var(--span-red);
+ border-radius: 4px;
+ padding: 2px 10px;
+}
+div.topicsection > .container > div.second > a > div > div > span.bgblue{
+ color: var(--h2text-color);
+ background-color:var(--span-blue);
+ padding: 2px 10px;
+ border-radius: 4px;
+}
+
+
+div.topicsection > .container > div.second > a > div > span{
+ color: rgba(255, 255, 255, 0.5);
+ margin-bottom: 0px;
+}
+
+
+div.topicsection > .container > div.second > a > div > h2{
+ color:var(--h2text-color);
+ font-size: 18px;
+ font-weight: 350;
+ line-height: 24px;
+ margin-bottom: -20px;
+ margin-top:0px;
+}
+
+@media screen and (max-width:425px){
+ div.topicsection{
+ height: 820px;
+ padding: 40px 0px;
+ align-items: center;
+ display: grid;
+ }
+
+ div.topicsection > .container{
+ height: 430px;
+ width:400px;
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+ margin: 0 auto;
+ }
+ div.topicsection > .container > div{
+ height: 430px;
+ width:394px;
+ }
+ div.topicsection > .container > div.first > a , div.third > a , div.second > a {
+ height: 200px;
+ width: 394px;
+ background-image:url('https://placehold.co/394x200');
+ }
+ div.topicsection > .container > div.first > a > div , div.third > a > div{
+ height:90px;
+ width:350px;
+ }
+ div.topicsection > .container > div.first > a{
+ margin-top:20px;
+ }
+ div.topicsection> .container > div.second {
+ display:none;
+ }
+ div.topicsection > .container > div.first{
+ gap:10px;
+ }
+}
\ No newline at end of file
+ 
- 
-