From 652a16b2cff4e73e80da281c19bedc6d41ac06eb Mon Sep 17 00:00:00 2001 From: devrayhan Date: Sat, 26 Mar 2022 00:14:47 +0600 Subject: [PATCH 1/4] Md Rayhan Bapari - 02 --- Md Rayhan Bapari/02/css/style.css | 108 +++++++++++++++++++++++------- 1 file changed, 85 insertions(+), 23 deletions(-) diff --git a/Md Rayhan Bapari/02/css/style.css b/Md Rayhan Bapari/02/css/style.css index dcdd2f7..c47bb5a 100644 --- a/Md Rayhan Bapari/02/css/style.css +++ b/Md Rayhan Bapari/02/css/style.css @@ -18,21 +18,23 @@ box-sizing: border-box; font-family: var(--font-family); } -.service-dash { - display: flex; - justify-content: space-between; - align-items: center; -} + .reminder { width: 100%; height: 100vh; - padding: 20px 100px; } .reminder h2 { font-weight: 600; font-size: 2rem; color: #4C4C56; - margin-bottom: 20px; + margin: 20px 0 20px 5%; +} +.service-dash { + display: grid; + grid-template-columns: repeat(4, 1fr); + align-items: center; + width: 90%; + margin: auto; } .dashboard h3 { font-weight: 500; @@ -82,13 +84,21 @@ color: #F4DC79; } .card { - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; border-radius: 5px; - width: 270px; + width: 280px; height: 100px; position: relative; z-index: 888; padding: 20px; + transition: all .3s ease; +} +.card:hover { + box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; + cursor: pointer; +} +.card:active { + cursor: grab; } .card-header { display: flex; @@ -156,29 +166,81 @@ } /* Resposnive */ -/* sm */ -@media (max-width: 640px){ + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { .service-dash { - flex-direction: column; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 1fr); align-items: center; + width: 90%; + margin: auto; } - .reminder h2 { - text-align: center; + .card { + width: 100%; + height: 100px; + margin-bottom: 20px; } - .dashboard { - margin-bottom: 30px; +} +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .service-dash { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 1fr); + align-items: center; + width: 90%; + margin: auto; + } + .card { + width: 100%; + height: 100px; + margin-bottom: 20px; } } -/* md */ -@media (max-width: 768px) { +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { .service-dash { - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 20px; align-items: center; + width: 90%; + margin: auto; + } + .card { + width: 100%; + height: 100px; + margin-bottom: 20px; } - .reminder h2 { - text-align: center; +} +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .service-dash { + display: grid; + grid-template-columns: repeat(4, 1fr); + align-items: center; + width: 90%; + margin: auto; } - .dashboard { - margin-bottom: 30px; + .card { + width: 100%; + height: 100px; } } +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .service-dash { + display: grid; + grid-template-columns: repeat(4, 1fr); + align-items: center; + width: 90%; + margin: auto; + } + .card { + width: 100%; + height: 100px; + } +} \ No newline at end of file From ccd25b7c71d1d5bfa132602f165c16f487be220e Mon Sep 17 00:00:00 2001 From: devrayhan Date: Sat, 26 Mar 2022 00:21:34 +0600 Subject: [PATCH 2/4] Md Rayhan Bapari --- Md Rayhan Bapari/02/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Md Rayhan Bapari/02/css/style.css b/Md Rayhan Bapari/02/css/style.css index c47bb5a..06210de 100644 --- a/Md Rayhan Bapari/02/css/style.css +++ b/Md Rayhan Bapari/02/css/style.css @@ -84,7 +84,7 @@ color: #F4DC79; } .card { - box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px; border-radius: 5px; width: 280px; height: 100px; From 1f64c02d2c05d36d052b271b76c341912931a982 Mon Sep 17 00:00:00 2001 From: devrayhan Date: Tue, 29 Mar 2022 22:46:59 +0600 Subject: [PATCH 3/4] Md Rayhan Bapari - 03 --- Md Rayhan Bapari/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Md Rayhan Bapari/index.html b/Md Rayhan Bapari/index.html index ffa1666..41249e9 100644 --- a/Md Rayhan Bapari/index.html +++ b/Md Rayhan Bapari/index.html @@ -14,6 +14,9 @@
  • 02
    • +
  • + 03 +
    • From ea68edf7c1ad9d9f07b8ee2be77c57e2c153d7f8 Mon Sep 17 00:00:00 2001 From: devrayhan Date: Fri, 1 Apr 2022 11:52:46 +0600 Subject: [PATCH 4/4] Md Rayhan Bapari - 03 --- Md Rayhan Bapari/03/css/style.css | 223 +++++++++++++++++++++++++++++ Md Rayhan Bapari/03/img/coding.png | Bin 0 -> 1937 bytes Md Rayhan Bapari/03/index.html | 71 +++++++++ 3 files changed, 294 insertions(+) create mode 100644 Md Rayhan Bapari/03/css/style.css create mode 100644 Md Rayhan Bapari/03/img/coding.png create mode 100644 Md Rayhan Bapari/03/index.html diff --git a/Md Rayhan Bapari/03/css/style.css b/Md Rayhan Bapari/03/css/style.css new file mode 100644 index 0000000..9433e6f --- /dev/null +++ b/Md Rayhan Bapari/03/css/style.css @@ -0,0 +1,223 @@ +/* Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); + +/* Universal Selector */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + outline: none; + text-decoration: none; + font-family: 'Roboto', sans-serif; +} + +/* CSS Variables */ +:root { + /* Color */ + --primary : #33318e; + --primary-white : #ffffff; + --secondary : #fc9d32; + --skill-header-h2 : #000000; + --skill-header-p : #CFCFCF; + --card-text : #423D5D; + + /* Font Weight */ + --header-h2 : 700; + --header-p : 400; + --skill-btn : 400; + --card-text-1 : 500; + --card-text-2 : 400; + + /* Font Size */ + --header-h2-size : 2rem; + --header-p-size : 1rem; + --skill-btn-size : 1rem; + --card-text-1-size : 1.15rem; + --card-text-2-size : .8rem; +} + +.skills { + width: 90%; + min-height: 100vh; + margin: auto; +} +.skills-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; +} +.skills-content .skill-header h2 { + font-weight: var(--header-h2); + font-size: var(--header-h2-size); + color: var(--skill-header-h2); + margin-bottom: 5px; +} +.skills-content .skill-header p { + font-weight: var(--header-p); + font-size: var(--header-p-size); + color: var(--skill-header-p); +} +.skills-content .skill-btn { + background: var(--primary); + color: var(--primary-white); + padding: 10px 30px; + border-radius: 2px; + display: flex; + align-items: center; + font-weight: var(--skill-btn); + color: var(--primary-white); + font-size: var(--skill-btn-size); + gap: 10px; +} +.skills-content .skill-btn i { + font-size: .8rem; + color: var(--primary-white); +} +.skills-wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-column-gap: 20px; + align-items: center; + justify-content: space-between; +} +.card { + height: 200px; + box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; + padding: 10px 20px 0 20px; + position: relative; + transition: all .4s ease; +} +.card img { + width: 50px; + object-fit: cover; + margin-bottom: 25px; + box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; +} +.card-btn { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 40px; + background: #ECE6FE; + text-align: center; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + transition: all .4s ease; +} +.card-btn a, i { + color: var(--card-text); + font-weight: 400; + cursor: pointer; +} +.card h3 { + font-weight: var(--card-text-1); + font-size: var(--card-text-1-size); + color: var(--card-text); + margin-bottom: 5px; +} +.card p { + font-weight: var(--card-text-2); + font-size: var(--card-text-2-size); + color: var(--card-text); + margin-bottom: 5px; +} +.card:hover { + border: 1px solid #33318e; + cursor: pointer; +} +.card:hover .card-btn { + background: #33318e; +} +.card:hover .card-btn a { + color: var(--primary-white); +} +.card:hover .card-btn i { + color: var(--primary-white); +} + +/* Resposnive */ + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .skills-wrapper { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-row-gap: 20px; + align-items: center; + } + .skills-content { + flex-direction: column; + align-items: center; +} + .skill-header { + margin-bottom: 20px; + } +} +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .skills-wrapper { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-row-gap: 20px; + align-items: center; + } + .skills-content { + flex-direction: column; + align-items: center; +} + .skill-header { + margin-bottom: 20px; + } +} +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .skills-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + align-items: center; + } + .skills-content { + display: grid; + justify-content: space-between; + align-items: center; + padding: 20px 0; + grid-template-columns: 1fr auto; + } +} +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .skills-wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + align-items: center; + } + .skills-content { + display: grid; + justify-content: space-between; + align-items: center; + padding: 20px 0; + grid-template-columns: 1fr auto; + } +} +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .skills-wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr); + align-items: center; + } + .skills-content { + display: grid; + justify-content: space-between; + align-items: center; + padding: 20px 0; + grid-template-columns: 1fr auto; + } +} \ No newline at end of file diff --git a/Md Rayhan Bapari/03/img/coding.png b/Md Rayhan Bapari/03/img/coding.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b33239798fffc86b1a44a2fb6c481ab854c6ff GIT binary patch literal 1937 zcmbtVYfuwc6b^`hC;~0E6Rb|EXsS-K$wEv>6KDcNQ9+H&6vRxs*qf3N}*86pN2`=x##8qy5ooe{44A-tT<( zJic>x-=>5${(d2T3rMSGj7!N-_AcoE$Nz5hgI4 z#Pm8A%?YXXCQ`~~`>`gdWh6;pYB#&i$c3CMCfbEdB@IA`5#V!qbXY8w#Dy2j5F>56 z4%vbloQBKNV$PFrh%lmw**Gd?D^a7~M8K$%fp(f8i6&5pM3G34M`geZTnUrK~Wwo;`75180EQ%TrSgT6l#h^01Cj> zf(U*%Ul<_}O*%L?r{fd#CRjtK5(&C_C)b=<2|!m@i@A#8G$yLz_HdQV1)S2Bf8Qzu zcDD&P5n87N5EwwUXa=ey=_c_fnuNe&5+k+fWQ$~4a(as>?TNLJE>+4la}abpWYUuC zNCA(P#1c@o_**g){t{pc_5Vl(pCV{la?ZJ;#YSyVd4x^mL0Mv%iPY$c$asXMgt9e| zjwOdEX<-r?`qw5Uc4x@{sjSpAy6ZYE7BhrT5k3VII|ZvJ67_m*WHhA9ge1Vs<$nyt z6&*Ft)MNwh`KJu`4T9>ZYlEQfhm@ojuNe%_n{hF+M9r?D@*C?N3Bfz<%#?UfTfpI! zyB7+t2)RcUg?;T&$%S)OUk2{bT97CvUVuKHc0bDVFu{J4El=!2DE5u+97 z!;If4LgPw)nRR%)X{SAQxi#dtB@J2fdGWql#Z047HtR^J%vWZ&zmQwP>!m-N?lZ?v z_dv{~&ngFVOS&3|3r3rL0z3H1&T~DR9~8{HTvrnMbls!u#Z?1A9ela3q`TkYSj7Pg zt>>)w#_|KbWNjTCKAVHzt+_Uq*Uo$P%Bm=4YGU&Pv2W`$`kS}~@?B|lh5e#!D%D9W zO!gqv&9C-PXs0gO-|_Wu1?~fPjFCsw(As!AU78r|zT~2tv*+gN?=`>We+b zJ3dhD0uRmVPj7a2!^v;SeYpV8d;flo@(iAr=ifFu8qVhA8ndsl5R1l_A2FLRvV-!_~93Wa+eO}8DU6StP{fev>M@Z;ZnF!ue6($WP7 z4;@NYsp1E0Hk-w2$!R^ z`+3Vg;Ev^F19ljW8Ax~&I_iaZYN=k@uD1 zOD!!2j+R`#8vRhTJugpsi{Hr%`lRLckhZeAy1K<~-?Fl_yu6&z_wprE^#gz2tew1h z*9U&Zj!=1wj2PN^kDfnYaFthHQQ_4$G~~ZxnGMS{orO^EH=YLnwBZ{^<4E3*j;4>E z)vD5K&pvPMXz2JO|CO{icTQ2~rd3uj>d6{-ri|PI`}$DO%h_X>O#G4FPY JoRfdN`%k?w<);7u literal 0 HcmV?d00001 diff --git a/Md Rayhan Bapari/03/index.html b/Md Rayhan Bapari/03/index.html new file mode 100644 index 0000000..c76af73 --- /dev/null +++ b/Md Rayhan Bapari/03/index.html @@ -0,0 +1,71 @@ + + + + + + + Learn New Skills + + + + + + +
    +
    +
    +

    Learn New Skills

    +

    One Simple Price, Unlimited Skills.

    +
    + Explore +
    +
    +
    + +

    Dummy Skills

    +

    000 Videos

    +
    + Learn More + +
    +
    +
    + +

    Dummy Skills

    +

    000 Videos

    +
    + Learn More + +
    +
    +
    + +

    Dummy Skills

    +

    000 Videos

    +
    + Learn More + +
    +
    +
    + +

    Dummy Skills

    +

    000 Videos

    +
    + Learn More + +
    +
    +
    + +

    Dummy Skills

    +

    000 Videos

    +
    + Learn More + +
    +
    +
    +
    + + \ No newline at end of file