From b6fe1966b0000d0da5ee6da8f92e0f7bfbc24062 Mon Sep 17 00:00:00 2001 From: karam karim Date: Fri, 6 Apr 2018 23:54:30 +0300 Subject: [PATCH 01/11] task 1 & 2 --- karam-karim/reload.js | 8 +++ karam-karim/task-1/index.html | 74 ++++++++++++++++++++++ karam-karim/task-1/style.css | 100 ++++++++++++++++++++++++++++++ karam-karim/task-2/arrow-down.png | Bin 0 -> 3379 bytes karam-karim/task-2/index.html | 55 ++++++++++++++++ karam-karim/task-2/style.css | 63 +++++++++++++++++++ 6 files changed, 300 insertions(+) create mode 100644 karam-karim/reload.js create mode 100644 karam-karim/task-1/index.html create mode 100644 karam-karim/task-1/style.css create mode 100644 karam-karim/task-2/arrow-down.png create mode 100644 karam-karim/task-2/index.html create mode 100644 karam-karim/task-2/style.css diff --git a/karam-karim/reload.js b/karam-karim/reload.js new file mode 100644 index 0000000..5e0df1a --- /dev/null +++ b/karam-karim/reload.js @@ -0,0 +1,8 @@ +window.onload = () => { +/* +internet is really slow, I can't install live dev server, +so i'm using this instead; +*/ +setTimeout(a => location.reload(true), 2000); + +}; diff --git a/karam-karim/task-1/index.html b/karam-karim/task-1/index.html new file mode 100644 index 0000000..6bb3408 --- /dev/null +++ b/karam-karim/task-1/index.html @@ -0,0 +1,74 @@ + + + + + task 1 + + + + +
+ +
+

Select youre preferred language

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum eveniet enim quos amet molestias, harum?

+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ go back + procced +
+ +
+ +
+ + + + diff --git a/karam-karim/task-1/style.css b/karam-karim/task-1/style.css new file mode 100644 index 0000000..abfdd40 --- /dev/null +++ b/karam-karim/task-1/style.css @@ -0,0 +1,100 @@ +body{ + margin: 0; + padding: 0; + background-color: rgb(228,229,231); + font-family: monospace; + font-size: 1.5em; +} + +.container{ + display: flex; + flex-direction: column; + align-items: center; +} + +.container > .header{ + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; +} + +.container > .header > h2, .container > .header > p{ + color: rgb(83,82,82); + font-weight: bold; +} + +.container > .header > p { + font-size: 0.7em; + width: 70%; +} + + +.container > .body{ + display: flex; + flex-direction: column; + align-items: center; +} + +.container > .body > .langs { + display: flex; + flex-wrap: wrap; + width: 70%; +} + +.container > .body > .langs > span { + display: block; + margin: .5em 1em; +} + +.container > .body > .langs > span > label{ + display: block; + background-color: rgb(241,242,241); + color: #000; + padding: .8em 2em; + border-radius: 5px; + transition: all ease-in .2s; + cursor: pointer; +} + +.container > .body > .langs > span > input[type="checkbox"]:checked + label{ + background-color: rgb(20,223,223); + color: #fff; + transition: all ease-in .2s; +} + +.container > .body > .buttons{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 2em 1em; +} + +.container > .body > .buttons > a{ + color: rgb(167,167,167); + text-decoration: none; + padding: 1em 3.5em; + border: 1px solid rgb(161,196,139); + margin: 0 1em; + border-radius: 30px; + outline: none; + transition: background-color linear .2s; +} + +.container > .body > .buttons > a:active{ + background-color: rgb(161,196,139); + color:#fff; +} + +.container > .body > .buttons > a:nth-child(1){ + text-transform: capitalize; +} + +.container > .body > .buttons > a:nth-child(2){ + text-transform: uppercase; +} + +input[type="checkbox"]{ + display: none; +} diff --git a/karam-karim/task-2/arrow-down.png b/karam-karim/task-2/arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..a473249f04ec98a508e1962852ea6d34cbdcceba GIT binary patch literal 3379 zcmchZTT~O*8i03V6h}cSqf$H^v4VpNNE87vI$BwmQ!H^Wy2G{NHcR4P9w}^OM2$P4ddcw?xNP7YjZ;esXb1 z&V#Zb#=bcaA&W2t2ux!sQ%ZhybK=!MkKOQK z9qIjY=R}P+`m&~_gC5%TqFlF5ZP|Y!J)!OV9es1_U6Sk>UvTkA z=%V)bdHKiIj}IS_G*NvUeH+P)RibIbnfa(!L$WUo1a){Z#u=sQbI9caq3PS%XAZE+nvuYB9vOU$kv zS-aykn=ie7V?=wy)ve2_lUSBII2isibmEH7{Fjw$-SDe@$j%z~%dW`tL3g2VQ1AJorKP z+lKz7@4?L)ZkmybYwi4Mfqe3`WgCnAb&z2`6>Am$ zQns-I+^mP0GW#xBf4==G9RQ=(*nsG*+ zW2hpwH9dT+c_-zC3H6VP=@pvxA%)do@V&xl<{Q2TEa0xc&1lmgnRmvj-CkYLokZk5 z<61sZ)|0#T)%ADyddK;EYaV0l@)d<)A3?)wvzZ?QhwZZj0i*N0_z9EmWHy3+pSEd# zUG1@TJAufpocm?k{(&@o>}c*>&CCaiiADP4<{Dlx-!9u2^=f(7iI?uoKHT!ow4W#d ziQm0{MSnX!GSDz)v2q_XE_8^r&7E{xmX+ft0nc{edR5dA59A^8O%7U_~rNCLvu zoAv&gvs3P~9-Iv!cym4wEzhT9cV``4W!2?WYsx5(v!%60la1RajK9#$^O_28=QLiG zo$rZ#B1Gg#iG4E5p@HzXP6vKr1u7mByerq=8?q)m+M_q|WY}QBh1Vsx`0t`FiTwsS z0m}DSfrTMD-j(6La$@(}-~+0W>47JX=y)$hHr)&82$iR!FyztH_>^O|$1zG2SyhskZytG?>DBkZdWEbrww7xDwqkhVmHp ziuaVbE$wwbZSls+PZr~g31hCya6+lV$%IjX&D2I=$PZK(-Pzmwy?`k8+--QaE@MUX z3Or@vTFr{=ZzI!e(?PE$9N$Uxot{I z??`I-bFZds;Ix$*b|#y^J(D8_j*oQt-78FB*7~3%!(-H^T^VN*-%u#ps?6!;z_((XUI9<7uijPyeqBNbbHVE(+JXzBi)c44 zm=e>|xgbkSFP)GI&AH%$5;wtwo+{iQo@*sO4HGsiaUV>Wt;A=;xDxlngdbG65hnam zg~JXWQQ=J3B^AB|#+A4?j4ScIFs{UBz_=2};4W48W=wcXh406N87iCs+n~Zf^YCxY zs!hgF5q+Es4vXlYx!`@#-xrlFpP*jpgrkxbSVqluVw70Zvm~Is2w%zt9b$YFWHBBC zDZ)=d7U8vApcCWwAdB%nND)2_vIw{40<{?Tfh@+OAw~EJ$Rhka7u*)(cOgaiYc6;$ z#*H9FxGfh{ig8~^5gyA0gJL`vQiNaNf^sq5#s%hLe1HoE#5CZ7STVhr3zBW2}P+=uVT^EP*(4Pf zYk3DT`8+asIvRMKs?R}oRZ#W$$gX0l{w%U9pQ;byp((t#mFX+VUNRM?Y*M`*ZEzsf)6oVK zQf-1ZEGO0T(FTN6{~K*sNvfBk4Rc7f1Daw%s-4l4xun_yO<6=bvCxzSq?0k4QbAed zBWt(njoVl+Z19|YOf%AnjV{J>Tt2XrvR4J`7)0(FcZkpeS4i~N3P9dn{u*}mm2tFz zmQy@PW|o0wQvpIM$|TD`|0#dSX<3lDKZZ^K|69erM0Bm`syy@JJGEnwDF&$vsn#A=ABQzq$lTu`vuYR2q zxb4Ji4+2%2w=(G2CGG7>(tYQ$cahR9hxD)RGoD`5wYYgq!&(wB5 zfcv$mK#Dj%PXC|u!$Vt`I7tgr7#kXE6Ae4{%K1F((W?d42AXV!74J$nOCTFFWRRya zY9MPfsv*NOsvw_bR6=gfFg%H0GYo!6hQWUvZtw%b4SrX+!M6!F`1`^Q{x{(UUmI@l z?ZXZJfdqqpDZ$|XnPBjjBpCd?2?qb`1cU!a0`z_6I>Vixlk~twEW4;>DXsGDoZ;=S zD1m8woXcPWpPglJsn6juxX7n;k#an?o1RRUkHs)!kMU|Mo#_Fhrl)*n)yU=a)E_C? z{Rlt)qLizyedodmd|C2}toT-UPmj@m9q-k>?I~wn8u>l_&^5}c^R^#M&OKcnIDq;Bl-D5rYT&&uk_BVS$0m825=qxDsVWu7kV(xw-c-Tl%#sZk#lT4|=s z_AK-(^~pc?rx;c$`#?u_g$YY788}YWAwN4(v4!Y?mFYSG%uS<<54oW3P5+vy+_imi*U( z#N>VP`_upT0;{A|HE@B2p+a!-{zHPO)EFQT2v)`?eUTO&l@hZuIW@L&c>O{sfvuYY KHeT_LJpLb5Lk8>s literal 0 HcmV?d00001 diff --git a/karam-karim/task-2/index.html b/karam-karim/task-2/index.html new file mode 100644 index 0000000..b4dd163 --- /dev/null +++ b/karam-karim/task-2/index.html @@ -0,0 +1,55 @@ + + + + + task 2 + + + +
+

Sign up

+ +
+

First name

+ +
+ +
+

Last name

+ +
+ +
+

E-mail

+ +
+ +
+

Country

+ +
+
+

Timezone

+ +
+ +
+ + + diff --git a/karam-karim/task-2/style.css b/karam-karim/task-2/style.css new file mode 100644 index 0000000..6172469 --- /dev/null +++ b/karam-karim/task-2/style.css @@ -0,0 +1,63 @@ +body{ + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + padding-top: 3em; + font-family: Open Sans; +} + + +.container { + padding: 2em; +} + +.container > .header{ + font-size: 2em; + margin: 0; +} + +.container > .input { + display: flex; + margin: 2em 0; + justify-content: space-between; +} + +.container > .input > p{ + text-align: left; + font-weight: bold; + margin: 0 1em; + line-height: 2.8em; + align-items: center; +} + +.container > .input > input[type="text"] , +.container > .input > input[type="email"]{ + border: none; + padding: 1em; + padding-left: 0 !important; + background-color: transparent; + border-bottom: 2px solid lightgrey; + transition: all linear .3s; +} + +.container > .input > input[type="text"]:focus , +.container > .input > input[type="email"]:focus{ + border-color: grey; +} + +.container > .input > select{ + width: 69%; + background-color: transparent; + border: none; + border-bottom: 2px solid lightgrey; + color: grey; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url(arrow-down.png); + background-position: right; + background-repeat: no-repeat; + background-size: 10px; +} From aac18b6f1a06675bd2f1ba9ec08189fd93382f0b Mon Sep 17 00:00:00 2001 From: karam karim Date: Sat, 7 Apr 2018 00:57:35 +0300 Subject: [PATCH 02/11] task 3 done --- karam-karim/task-3/arrow-down.png | Bin 0 -> 8166 bytes karam-karim/task-3/france.png | Bin 0 -> 2395 bytes karam-karim/task-3/germany.png | Bin 0 -> 2327 bytes karam-karim/task-3/index.html | 22 +++++++ karam-karim/task-3/poland.png | Bin 0 -> 1905 bytes karam-karim/task-3/style.css | 88 ++++++++++++++++++++++++++ karam-karim/task-3/united-kingdom.png | Bin 0 -> 12436 bytes 7 files changed, 110 insertions(+) create mode 100644 karam-karim/task-3/arrow-down.png create mode 100644 karam-karim/task-3/france.png create mode 100644 karam-karim/task-3/germany.png create mode 100644 karam-karim/task-3/index.html create mode 100644 karam-karim/task-3/poland.png create mode 100644 karam-karim/task-3/style.css create mode 100644 karam-karim/task-3/united-kingdom.png diff --git a/karam-karim/task-3/arrow-down.png b/karam-karim/task-3/arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..ebb685d880c126764ca99f92d396e767b493c423 GIT binary patch literal 8166 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 J>rLI_{|lo6y+Hr~ literal 0 HcmV?d00001 diff --git a/karam-karim/task-3/france.png b/karam-karim/task-3/france.png new file mode 100644 index 0000000000000000000000000000000000000000..2b77f96cd346ca4a8e6b8e71a282bc1dae05d791 GIT binary patch literal 2395 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&zE~)R&4Yzkn1=v6E*A2N2Y7q;vrJoCO|{ z#X$AfL734=V|E2lP_o1|q9iy!t)x7$D3zhSyj(9cFS|H7u^?41zbJk7I~yqm296t^ zE{-7;bKc%m^ovPkaD8a5n`^*om>Fcs=$yq_HSJ(pfX*Uosoq>E84aGM2MTACIrl#n zfBrkH;Hl@kwAkyc3>iO-su>tQ{A2;TiW6v{5CemN3Il_J2Lpq{1O|o%1x5x2N1zXy zMir0|4qI;Cmyt{BZo7`RTkMX#e#^^nAn|qOn%mM04Tob!v(7LnLe?IiURuq}P;lc;{CjW~ z))5~q9*0paaP9r``{&;ZG8~93eqRfU=o#FjRUnOO`Y-&4i-douvWUF`Hewh&UHx3v IIVCg!094Q#FaQ7m literal 0 HcmV?d00001 diff --git a/karam-karim/task-3/index.html b/karam-karim/task-3/index.html new file mode 100644 index 0000000..78d75bf --- /dev/null +++ b/karam-karim/task-3/index.html @@ -0,0 +1,22 @@ + + + + + task 3 + + + + +
+ + +
  • france
    • +
  • germany
    • +
  • united kingdom
    • +
  • poland
    • + +     +
    + + + diff --git a/karam-karim/task-3/poland.png b/karam-karim/task-3/poland.png new file mode 100644 index 0000000000000000000000000000000000000000..20e3be09efd79d5bd6bf341652882bfe0eeaf1fb GIT binary patch literal 1905 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+Cx8@lv6E*A2M5RPhyD+MT+RZI z$YP-K>mbbNq%pe!C@5Lt8c`CQpH@mmtT}V`<;yx0|R4o zfKQ0)|NsBLe*OC2J9LyBs1Oif=>tW0eMyjCFaskaGczkIJ3AK_508+LgoLD|oScG! zqN2LGwzid(wY9yygM*`^ySs-+NJwO4OiW^8c6MG~RaJF$Q&UGrU*FWJ)2GjvF>~gu zS&J5}UcGMJ`t@73Y~8wT+m0Q(cAYqJ^5p5$=g(iheE06XdygKyeEH_h=g(ih{QUXr z*YDqd{`~uAysyKMfq~_!r;B4q#jUq@u2zMzi?m+!F;U%#AQmOW|u^62^pe;)Hit*PYed;REV zd(QXQ`OktAeoxSwv;Y3Dh=Hl_E-J>*1*ko=l)syTfa7I z;j-#oUsgYVe=}_!*R86uy8m&TO%oqij1{FDBB`^&fIJH?#? z221k0=%tf>C)@4)->}+j<KGF@SMll^j)aA}Sy4Y8N?-5|zEbk}Z}`HM(^h0o3`G}X*p%~e1o8t z^_uEa3(Q0R|=q1`Y;B1qPM@=1}g4hWknl^%}kmOoPNn zz%Zpku-0`m#NAl1NqlE=%c*xy<^W@Ix-u{(J+?_K+@u?s-g4?%>P$hc=xLU~IQMJY zzu77FeVe-YnSkr9D%n7CmWuG%fa^z8b|$v3%2V;Y#Tyt}Jt<|D;;LEGR5Ev_cFxM% zs^YongovqbRsH`zg(t;CV}Ct%W|*1S)0Ot5{`i`}^BeoWpFd*$ZN;;*NB9_1`W;u@ zy!`Q>WW`yftufL+JQ*Z^A5fcWBQg8@nX1&OR&i%fiHFTt+9&$*h~DmyjjK2RUjCi) z^p%1|<;xkDEWK+cx@G&5>}j^f{+Df|r{&KmI`4G0EZ=Ki<`YqA)0#+4gx2mnl8N1T{C}x|UU-&U)+Z$`zr+t{j-2dhpPd}fI z .dropdown{ + background-color: #fff; + list-style: none; + position: relative; + border-radius: 5px; + +} +/* the header */ +.container > .dropdown::before{ + content: attr(data-text); + color: lightgrey; + font-size: 1.1em; + font-weight: bold; + padding: 1.5em; + width: 20em; + display: flex; + background-color: #fff; + border-radius: 5px; + position: absolute; + top: -40%; + background-image: url(arrow-down.png); + background-position: calc(100% - 10px); + background-repeat: no-repeat; + background-size: 16px; +} + +/* the country names */ + +.container > .dropdown > .option{ + color: grey; + text-transform: capitalize; + box-sizing: border-box; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + width: 25em; + padding: 1.5em; + padding-left: 4em; + position: relative; +} + +/* the country image */ +.container > .dropdown > .option::before{ + content: ''; + display: block; + width: 40px; + height: 40px; + position: absolute; + left: 10px; + top:50%; + transform: translateY(-50%); + background-position: left; + background-repeat: no-repeat; + background-size: 40px; +} + +.container > .dropdown > .option:nth-child(1)::before{ + background-image: url(france.png); +} + +.container > .dropdown > .option:nth-child(2)::before{ + background-image: url(germany.png); +} + +.container > .dropdown > .option:nth-child(3)::before{ + background-image: url(united-kingdom.png); +} + +.container > .dropdown > .option:nth-child(4)::before{ + background-image: url(poland.png); +} diff --git a/karam-karim/task-3/united-kingdom.png b/karam-karim/task-3/united-kingdom.png new file mode 100644 index 0000000000000000000000000000000000000000..a8c6fc18151ed4b6e224b5a771ab5930e6f28044 GIT binary patch literal 12436 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 Date: Sat, 7 Apr 2018 20:31:44 +0300 Subject: [PATCH 03/11] shorted css selectors and fixed some typos --- karam-karim/reload.js | 8 -------- karam-karim/task-1/style.css | 26 +++++++++++++------------- karam-karim/task-2/style.css | 16 ++++++++-------- karam-karim/task-3/index.html | 4 ++-- karam-karim/task-3/style.css | 16 ++++++++-------- 5 files changed, 31 insertions(+), 39 deletions(-) delete mode 100644 karam-karim/reload.js diff --git a/karam-karim/reload.js b/karam-karim/reload.js deleted file mode 100644 index 5e0df1a..0000000 --- a/karam-karim/reload.js +++ /dev/null @@ -1,8 +0,0 @@ -window.onload = () => { -/* -internet is really slow, I can't install live dev server, -so i'm using this instead; -*/ -setTimeout(a => location.reload(true), 2000); - -}; diff --git a/karam-karim/task-1/style.css b/karam-karim/task-1/style.css index abfdd40..6d2d2ac 100644 --- a/karam-karim/task-1/style.css +++ b/karam-karim/task-1/style.css @@ -12,42 +12,42 @@ body{ align-items: center; } -.container > .header{ +.header{ display: flex; flex-direction: column; align-items: center; margin: 20px; } -.container > .header > h2, .container > .header > p{ +.header > h2, .header > p{ color: rgb(83,82,82); font-weight: bold; } -.container > .header > p { +.header > p { font-size: 0.7em; width: 70%; } -.container > .body{ +.body{ display: flex; flex-direction: column; align-items: center; } -.container > .body > .langs { +.langs { display: flex; flex-wrap: wrap; width: 70%; } -.container > .body > .langs > span { +.langs > span { display: block; margin: .5em 1em; } -.container > .body > .langs > span > label{ +.langs > span > label{ display: block; background-color: rgb(241,242,241); color: #000; @@ -57,13 +57,13 @@ body{ cursor: pointer; } -.container > .body > .langs > span > input[type="checkbox"]:checked + label{ +.langs > span > input[type="checkbox"]:checked + label{ background-color: rgb(20,223,223); color: #fff; transition: all ease-in .2s; } -.container > .body > .buttons{ +.buttons{ width: 100%; display: flex; flex-direction: row; @@ -71,7 +71,7 @@ body{ padding: 2em 1em; } -.container > .body > .buttons > a{ +.buttons > a{ color: rgb(167,167,167); text-decoration: none; padding: 1em 3.5em; @@ -82,16 +82,16 @@ body{ transition: background-color linear .2s; } -.container > .body > .buttons > a:active{ +.buttons > a:active{ background-color: rgb(161,196,139); color:#fff; } -.container > .body > .buttons > a:nth-child(1){ +.buttons > a:nth-child(1){ text-transform: capitalize; } -.container > .body > .buttons > a:nth-child(2){ +.buttons > a:nth-child(2){ text-transform: uppercase; } diff --git a/karam-karim/task-2/style.css b/karam-karim/task-2/style.css index 6172469..715c2a3 100644 --- a/karam-karim/task-2/style.css +++ b/karam-karim/task-2/style.css @@ -13,18 +13,18 @@ body{ padding: 2em; } -.container > .header{ +.header{ font-size: 2em; margin: 0; } -.container > .input { +.input { display: flex; margin: 2em 0; justify-content: space-between; } -.container > .input > p{ +.input > p{ text-align: left; font-weight: bold; margin: 0 1em; @@ -32,8 +32,8 @@ body{ align-items: center; } -.container > .input > input[type="text"] , -.container > .input > input[type="email"]{ +.input > input[type="text"] , +.input > input[type="email"]{ border: none; padding: 1em; padding-left: 0 !important; @@ -42,12 +42,12 @@ body{ transition: all linear .3s; } -.container > .input > input[type="text"]:focus , -.container > .input > input[type="email"]:focus{ +.input > input[type="text"]:focus , +.input > input[type="email"]:focus{ border-color: grey; } -.container > .input > select{ +.input > select{ width: 69%; background-color: transparent; border: none; diff --git a/karam-karim/task-3/index.html b/karam-karim/task-3/index.html index 78d75bf..aff1954 100644 --- a/karam-karim/task-3/index.html +++ b/karam-karim/task-3/index.html @@ -8,14 +8,14 @@
    - +
    • france
    • germany
    • united kingdom
    • poland
      • - +
    diff --git a/karam-karim/task-3/style.css b/karam-karim/task-3/style.css index 5e5c146..021d7f3 100644 --- a/karam-karim/task-3/style.css +++ b/karam-karim/task-3/style.css @@ -15,7 +15,7 @@ body{ -.container > .dropdown{ +.dropdown{ background-color: #fff; list-style: none; position: relative; @@ -23,7 +23,7 @@ body{ } /* the header */ -.container > .dropdown::before{ +.dropdown::before{ content: attr(data-text); color: lightgrey; font-size: 1.1em; @@ -43,7 +43,7 @@ body{ /* the country names */ -.container > .dropdown > .option{ +.option{ color: grey; text-transform: capitalize; box-sizing: border-box; @@ -57,7 +57,7 @@ body{ } /* the country image */ -.container > .dropdown > .option::before{ +.option::before{ content: ''; display: block; width: 40px; @@ -71,18 +71,18 @@ body{ background-size: 40px; } -.container > .dropdown > .option:nth-child(1)::before{ +.option:nth-child(1)::before{ background-image: url(france.png); } -.container > .dropdown > .option:nth-child(2)::before{ +.option:nth-child(2)::before{ background-image: url(germany.png); } -.container > .dropdown > .option:nth-child(3)::before{ +.option:nth-child(3)::before{ background-image: url(united-kingdom.png); } -.container > .dropdown > .option:nth-child(4)::before{ +.option:nth-child(4)::before{ background-image: url(poland.png); } From b6261667d3dac1eb59a429e6977d00c146b6c9f1 Mon Sep 17 00:00:00 2001 From: karam karim Date: Sat, 7 Apr 2018 21:02:56 +0300 Subject: [PATCH 04/11] added shadow-box --- karam-karim/task-3/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/karam-karim/task-3/style.css b/karam-karim/task-3/style.css index 021d7f3..eea9bb9 100644 --- a/karam-karim/task-3/style.css +++ b/karam-karim/task-3/style.css @@ -20,6 +20,7 @@ body{ list-style: none; position: relative; border-radius: 5px; + box-shadow: 0 0 70px 10px #000; } /* the header */ @@ -29,16 +30,18 @@ body{ font-size: 1.1em; font-weight: bold; padding: 1.5em; - width: 20em; + width: 22em; display: flex; background-color: #fff; border-radius: 5px; position: absolute; top: -40%; + left: 0; background-image: url(arrow-down.png); background-position: calc(100% - 10px); background-repeat: no-repeat; background-size: 16px; + box-shadow: 0 0 70px 10px #000; } /* the country names */ From 0192174a2123880bed7240b8b372ce5ca4924496 Mon Sep 17 00:00:00 2001 From: karam karim Date: Sun, 8 Apr 2018 01:14:05 +0300 Subject: [PATCH 05/11] fixed box-shadow --- karam-karim/task-3/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/karam-karim/task-3/style.css b/karam-karim/task-3/style.css index eea9bb9..a3d812b 100644 --- a/karam-karim/task-3/style.css +++ b/karam-karim/task-3/style.css @@ -20,7 +20,7 @@ body{ list-style: none; position: relative; border-radius: 5px; - box-shadow: 0 0 70px 10px #000; + box-shadow: 0px -20px 307px 10px grey; } /* the header */ @@ -41,7 +41,6 @@ body{ background-position: calc(100% - 10px); background-repeat: no-repeat; background-size: 16px; - box-shadow: 0 0 70px 10px #000; } /* the country names */ From 33c0a15c9d0dee78534b13c5d601686c91e2da43 Mon Sep 17 00:00:00 2001 From: karam karim Date: Mon, 9 Apr 2018 00:25:39 +0300 Subject: [PATCH 06/11] task 4 done --- karam-karim/task-4/index.html | 61 ++++++++++++++ karam-karim/task-4/style.css | 145 ++++++++++++++++++++++++++++++++++ 2 files changed, 206 insertions(+) create mode 100644 karam-karim/task-4/index.html create mode 100644 karam-karim/task-4/style.css diff --git a/karam-karim/task-4/index.html b/karam-karim/task-4/index.html new file mode 100644 index 0000000..72ce671 --- /dev/null +++ b/karam-karim/task-4/index.html @@ -0,0 +1,61 @@ + + + + + task 4 + + + + + +
    + +
    +
    +
    +
    Lorem.Lorem ipsum.
    +
    +
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, dolores.
    +
    + + + + + + + + skip
    +
    +
    +
    +
    +
    Ad.Dignissimos, quidem.
    +
    +
    Qui neque eaque unde, nulla numquam officia magni, repellendus similique.
    +
    + + + + + + skip
    +
    +
    +
    +
    +
    Autem.Quam, quibusdam!
    +
    +
    Repudiandae facere, quod. Numquam ipsum atque repudiandae blanditiis.
    +
    + + + + + + skip
    +
    + +
    + + + diff --git a/karam-karim/task-4/style.css b/karam-karim/task-4/style.css new file mode 100644 index 0000000..47dd3d7 --- /dev/null +++ b/karam-karim/task-4/style.css @@ -0,0 +1,145 @@ +*{ + box-sizing: border-box; +} + +body{ + margin: 0; + padding: 0; + font-family: Open Sans; + height: 100vh; + display: flex; + align-items: center; +} + +.container{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 1.8em; +} + +.box{ + border: 1px solid #999; + width: 32%; + border-radius: 5px; +} + +.header { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 1.8em; + background-color: rgb(237,244,246); +} + + +.header > .icon-container{ + margin-right: .5em; + background-color: lightblue; + box-shadow: 0 0 0px .20em pink; + border: .15em solid rgb(237,244,246); + color: #fff; + padding: .6em 1em; + border-radius: 50%; +} + +.header > .icon-container[data-red]{ + background-color: rgb(244,161,173); + box-shadow: 0 0 0 .20em rgb(244,161,173); +} + +.header > .icon-container[data-yellow]{ + background-color: rgb(244,230,174); + box-shadow: 0 0 0 .20em rgb(244,230,174); +} + +.header > .icon-container[data-blue]{ + background-color: rgb(244,228,161)rgb(244,161,173); + box-shadow: 0 0 0 .20em rgb(140,202,246); +} + +.header > .title-container{ + margin-left: 5px; + display: flex; + flex-direction: column; +} + +.title-container > .title{ + font-weight: bold; + font-size: 1.1em; +} + +.title-container > .sub-title{ + font-weight: lighter; +} + +.body{ + padding: 1.8em; + padding-top: .5em; +} + +.footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + padding: .5em 1.8em; +} + +.star-container > i{ + margin: 0 3px; + cursor: pointer; +} + +.star-container > i:nth-child(1){ + margin-left: 0 !important; +} + +.footer > .skip{ + font-size: .9em; + color: grey; + text-transform: capitalize; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.tooltip{ + position: relative; +} + +.tooltip::after{ + content: attr(data-tip); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + width: 100px; + height: 30px; + background-color: #222; + color: #fff; + top: -3em; + left: -50%; + transform: translateX(-50%); + padding: 5px; + border-radius: 5px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.tooltip::before{ + content: ''; + display: block; + position: absolute; + bottom: 0; + left: -.8em; + border: 20px solid transparent; + border-top-color: #222 !important; +} From dde7fcffecfa888c8693b48e1d83ba4a4d2aa205 Mon Sep 17 00:00:00 2001 From: karam karim Date: Mon, 9 Apr 2018 01:02:05 +0300 Subject: [PATCH 07/11] task 5 done --- karam-karim/task-5/index.html | 28 ++++++++++++++ karam-karim/task-5/style.css | 69 +++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 karam-karim/task-5/index.html create mode 100644 karam-karim/task-5/style.css diff --git a/karam-karim/task-5/index.html b/karam-karim/task-5/index.html new file mode 100644 index 0000000..8506cc9 --- /dev/null +++ b/karam-karim/task-5/index.html @@ -0,0 +1,28 @@ + + + + + task 5 + + + + + +
    +
      +
    • Lorem ipsum.
      • +
    • +
    • Recusandae, ipsam?
      • +
    • Ipsum, a.
      • +
    • Voluptatum, veritatis.
      • +
    • Reiciendis, natus.
      • +
    • Modi, id!
      • +
    • +
    • Excepturi, in!
      • +
    • Nulla, placeat.
      • +
    • Earum, deserunt.
      • +
    +
    + + + diff --git a/karam-karim/task-5/style.css b/karam-karim/task-5/style.css new file mode 100644 index 0000000..bb1d42b --- /dev/null +++ b/karam-karim/task-5/style.css @@ -0,0 +1,69 @@ +*{ + box-sizing: border-box; +} + +body{ + margin: 0; + padding: 0; + font-family: Open Sans; +} + +.container{ + display: block; + position: static; + left: 0; + top: 0; + background-color: #333; + width: 20%; + color: #fff; +} + +.list{ + margin: 0; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + list-style: none; + padding: 0; +} + +.item{ + padding: 1em; + position: relative; +} + +.space{ + margin: 1em 0; +} + +.item > .icon{ + display: inline-block; + margin-right: 1em; +} + +.item > .text{ + color: grey; +} + +.item.selected > .text{ + font-weight: bold; + color: rgb(156,43,245); +} + +.item.selected , .item:hover{ + cursor: pointer; +} + +.item.selected::before , .item:hover::before{ + content: ''; + display: block; + color: rgb(156,43,245); + position: absolute; + left: .5em; + width: 3px; + top: 50%; + transform: translateY(-50%); + height: 50%; + background-color: rgb(104,175,64); +} From 0c208c85159c38b6d09683f38b24b39616b06b5e Mon Sep 17 00:00:00 2001 From: karam karim Date: Mon, 9 Apr 2018 01:04:34 +0300 Subject: [PATCH 08/11] task 5 added some css --- karam-karim/task-5/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/karam-karim/task-5/style.css b/karam-karim/task-5/style.css index bb1d42b..5070589 100644 --- a/karam-karim/task-5/style.css +++ b/karam-karim/task-5/style.css @@ -30,6 +30,7 @@ body{ .item{ padding: 1em; + padding-left: 2em; position: relative; } From 97caf59d880c070107f204e3917d616b31c84b8b Mon Sep 17 00:00:00 2001 From: karam karim Date: Mon, 9 Apr 2018 01:06:31 +0300 Subject: [PATCH 09/11] task 5 added some more css --- karam-karim/task-5/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/karam-karim/task-5/style.css b/karam-karim/task-5/style.css index 5070589..7fb7750 100644 --- a/karam-karim/task-5/style.css +++ b/karam-karim/task-5/style.css @@ -26,6 +26,7 @@ body{ justify-content: flex-start; list-style: none; padding: 0; + padding-top: 1em; } .item{ From 49d3cbb785919dae2d0a6498fb8461c7c2919e44 Mon Sep 17 00:00:00 2001 From: karam karim Date: Tue, 10 Apr 2018 13:57:37 +0300 Subject: [PATCH 10/11] task-6 done --- karam-karim/task-6/index.html | 50 ++++++++++++++++ karam-karim/task-6/style.css | 109 ++++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 karam-karim/task-6/index.html create mode 100644 karam-karim/task-6/style.css diff --git a/karam-karim/task-6/index.html b/karam-karim/task-6/index.html new file mode 100644 index 0000000..565dbab --- /dev/null +++ b/karam-karim/task-6/index.html @@ -0,0 +1,50 @@ + + + + + task 6 + + + + +
    +
    +
    +

    about

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum blanditiis maxime qui saepe aliquam deleniti exercitationem totam nobis voluptates, nostrum, magnam maiores doloremque culpa est nulla.

    +
    +
    +

    skills

    +

    + Lorem ipsum. + Quod, ut. + Deserunt, consequatur. + Pariatur, dignissimos! + Ipsa, a. + Exercitationem, quasi. + Atque, voluptatem. + Consequatur, quisquam. + Nisi, sed! + Eius, quidem? + Debitis, eligendi? + Eligendi, pariatur! + Perferendis, accusamus. + Nemo, asperiores. + Mollitia, odit. + Ratione, repellendus. + Qui, dolorum! +

    +
    +
    +

    languages

    +

    + English + German + French +

    +
    +
    +
    + + + diff --git a/karam-karim/task-6/style.css b/karam-karim/task-6/style.css new file mode 100644 index 0000000..25ef8db --- /dev/null +++ b/karam-karim/task-6/style.css @@ -0,0 +1,109 @@ +*{ + box-sizing: border-box; + font-family: Open Sans; +} + +body{ + margin: 0; + padding: 0; + background-color: rgb(238,234,234); + display: flex; + justify-content: center; +} + +main{ + display: flex; + align-items: center; + justify-content: center; + width: 50%; + height: 100vh; +} + +.container{ + background-color: #fff; + box-shadow: 0 0 3px 0 #999; + border-radius: 5px; + padding: 2em 3em; +} + +.box{ + padding-bottom: 2em; + border-bottom: 1px solid rgb(193,190,190); + margin-bottom: 1.5em; + border-radius: 5px; +} + +.box:last-child{ + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; +} + +.box > p{ margin: 0; } + +.box > .header{ + font-weight: bold; + text-transform: uppercase; + margin-bottom: 2em; + color: rgb(97,97,97); +} + +.box > .body{ + color: rgb(77,76,78); + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.box:last-child .body{ + justify-content: flex-start; + font-size: 19px; +} + +.box:last-child .body > span{ + margin: 0 2em; + position: relative; +} + +.box:last-child .body > span::before{ + content: ''; + display: inline-block; + width: 20px; + height: 20px; + position: absolute; + left: -30px; + top: 50%; + transform: translateY(-50%); + background-image: url("../task-3/poland.png"); + background-size: cover; + background-position: center; +} + + +.box:last-child .body > span:nth-child(1)::before{ + background-image: url("../task-3/united-kingdom.png"); +} + +.box:last-child .body > span:nth-child(2)::before{ + background-image: url("../task-3/germany.png"); +} + +.box:last-child .body > span:nth-child(3)::before{ + background-image: url("../task-3/france.png"); +} +.round-button{ + display: block; + text-transform: uppercase; + padding: 0.5em 1em; + border: 1px solid #999; + margin: .5em; + border-radius: 50px; + cursor: pointer; + transition: background-color ease-in .2s, color ease .1s; +} + +.round-button:hover{ + color: #fff; + background-color: cornflowerblue; +} From bfea96a12be34368f8f9e9d857e304c797c514cc Mon Sep 17 00:00:00 2001 From: karam karim Date: Sat, 14 Apr 2018 23:58:02 +0300 Subject: [PATCH 11/11] initial push++ --- README.md | 0 Tasks/1.png | Bin Tasks/10.png | Bin Tasks/12.png | Bin Tasks/13.jpg | Bin Tasks/14.png | Bin Tasks/15.png | Bin Tasks/16.png | Bin Tasks/17.png | Bin Tasks/2.png | Bin Tasks/3.jpg | Bin Tasks/4.png | Bin Tasks/5.png | Bin Tasks/6.png | Bin Tasks/7.png | Bin Tasks/8.png | Bin Tasks/9.png | Bin karam-karim/task-1/index.html | 0 karam-karim/task-1/style.css | 0 karam-karim/task-2/arrow-down.png | Bin karam-karim/task-2/index.html | 0 karam-karim/task-2/style.css | 0 karam-karim/task-3/arrow-down.png | Bin karam-karim/task-3/france.png | Bin karam-karim/task-3/germany.png | Bin karam-karim/task-3/index.html | 0 karam-karim/task-3/poland.png | Bin karam-karim/task-3/style.css | 0 karam-karim/task-3/united-kingdom.png | Bin karam-karim/task-4/index.html | 0 karam-karim/task-4/style.css | 0 karam-karim/task-5/index.html | 0 karam-karim/task-5/style.css | 0 karam-karim/task-6/index.html | 0 karam-karim/task-6/style.css | 4 +- karam-karim/task-7/index.html | 79 ++++++++++++++++++++++ karam-karim/task-7/style.css | 93 ++++++++++++++++++++++++++ 37 files changed, 174 insertions(+), 2 deletions(-) mode change 100644 => 100755 README.md mode change 100644 => 100755 Tasks/1.png mode change 100644 => 100755 Tasks/10.png mode change 100644 => 100755 Tasks/12.png mode change 100644 => 100755 Tasks/13.jpg mode change 100644 => 100755 Tasks/14.png mode change 100644 => 100755 Tasks/15.png mode change 100644 => 100755 Tasks/16.png mode change 100644 => 100755 Tasks/17.png mode change 100644 => 100755 Tasks/2.png mode change 100644 => 100755 Tasks/3.jpg mode change 100644 => 100755 Tasks/4.png mode change 100644 => 100755 Tasks/5.png mode change 100644 => 100755 Tasks/6.png mode change 100644 => 100755 Tasks/7.png mode change 100644 => 100755 Tasks/8.png mode change 100644 => 100755 Tasks/9.png mode change 100644 => 100755 karam-karim/task-1/index.html mode change 100644 => 100755 karam-karim/task-1/style.css mode change 100644 => 100755 karam-karim/task-2/arrow-down.png mode change 100644 => 100755 karam-karim/task-2/index.html mode change 100644 => 100755 karam-karim/task-2/style.css mode change 100644 => 100755 karam-karim/task-3/arrow-down.png mode change 100644 => 100755 karam-karim/task-3/france.png mode change 100644 => 100755 karam-karim/task-3/germany.png mode change 100644 => 100755 karam-karim/task-3/index.html mode change 100644 => 100755 karam-karim/task-3/poland.png mode change 100644 => 100755 karam-karim/task-3/style.css mode change 100644 => 100755 karam-karim/task-3/united-kingdom.png mode change 100644 => 100755 karam-karim/task-4/index.html mode change 100644 => 100755 karam-karim/task-4/style.css mode change 100644 => 100755 karam-karim/task-5/index.html mode change 100644 => 100755 karam-karim/task-5/style.css mode change 100644 => 100755 karam-karim/task-6/index.html mode change 100644 => 100755 karam-karim/task-6/style.css create mode 100755 karam-karim/task-7/index.html create mode 100755 karam-karim/task-7/style.css diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/Tasks/1.png b/Tasks/1.png old mode 100644 new mode 100755 diff --git a/Tasks/10.png b/Tasks/10.png old mode 100644 new mode 100755 diff --git a/Tasks/12.png b/Tasks/12.png old mode 100644 new mode 100755 diff --git a/Tasks/13.jpg b/Tasks/13.jpg old mode 100644 new mode 100755 diff --git a/Tasks/14.png b/Tasks/14.png old mode 100644 new mode 100755 diff --git a/Tasks/15.png b/Tasks/15.png old mode 100644 new mode 100755 diff --git a/Tasks/16.png b/Tasks/16.png old mode 100644 new mode 100755 diff --git a/Tasks/17.png b/Tasks/17.png old mode 100644 new mode 100755 diff --git a/Tasks/2.png b/Tasks/2.png old mode 100644 new mode 100755 diff --git a/Tasks/3.jpg b/Tasks/3.jpg old mode 100644 new mode 100755 diff --git a/Tasks/4.png b/Tasks/4.png old mode 100644 new mode 100755 diff --git a/Tasks/5.png b/Tasks/5.png old mode 100644 new mode 100755 diff --git a/Tasks/6.png b/Tasks/6.png old mode 100644 new mode 100755 diff --git a/Tasks/7.png b/Tasks/7.png old mode 100644 new mode 100755 diff --git a/Tasks/8.png b/Tasks/8.png old mode 100644 new mode 100755 diff --git a/Tasks/9.png b/Tasks/9.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-1/index.html b/karam-karim/task-1/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-1/style.css b/karam-karim/task-1/style.css old mode 100644 new mode 100755 diff --git a/karam-karim/task-2/arrow-down.png b/karam-karim/task-2/arrow-down.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-2/index.html b/karam-karim/task-2/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-2/style.css b/karam-karim/task-2/style.css old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/arrow-down.png b/karam-karim/task-3/arrow-down.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/france.png b/karam-karim/task-3/france.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/germany.png b/karam-karim/task-3/germany.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/index.html b/karam-karim/task-3/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/poland.png b/karam-karim/task-3/poland.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/style.css b/karam-karim/task-3/style.css old mode 100644 new mode 100755 diff --git a/karam-karim/task-3/united-kingdom.png b/karam-karim/task-3/united-kingdom.png old mode 100644 new mode 100755 diff --git a/karam-karim/task-4/index.html b/karam-karim/task-4/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-4/style.css b/karam-karim/task-4/style.css old mode 100644 new mode 100755 diff --git a/karam-karim/task-5/index.html b/karam-karim/task-5/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-5/style.css b/karam-karim/task-5/style.css old mode 100644 new mode 100755 diff --git a/karam-karim/task-6/index.html b/karam-karim/task-6/index.html old mode 100644 new mode 100755 diff --git a/karam-karim/task-6/style.css b/karam-karim/task-6/style.css old mode 100644 new mode 100755 index 25ef8db..cf738c4 --- a/karam-karim/task-6/style.css +++ b/karam-karim/task-6/style.css @@ -1,6 +1,6 @@ *{ box-sizing: border-box; - font-family: Open Sans; + font-family: Open Sans, Verdana, Geneva, Tahoma, sans-serif; } body{ @@ -16,7 +16,7 @@ main{ align-items: center; justify-content: center; width: 50%; - height: 100vh; + padding: 10% 0; } .container{ diff --git a/karam-karim/task-7/index.html b/karam-karim/task-7/index.html new file mode 100755 index 0000000..39315f3 --- /dev/null +++ b/karam-karim/task-7/index.html @@ -0,0 +1,79 @@ + + + + + task 6 + + + + + + +
    +
    + similar profiles +
    + +
    +
    + +
    +
    +

    lorem lorem

    +

    lorem lorem

    +

    + + lorem lorem

    +
    +
    + + +
    +
    + +
    +
    +

    lorem lorem

    +

    lorem lorem

    +

    + + lorem lorem

    +
    +
    + + +
    +
    + +
    +
    +

    lorem lorem

    +

    lorem lorem

    +

    + + lorem lorem

    +
    +
    + + +
    +
    + +
    +
    +

    lorem lorem

    +

    lorem lorem

    +

    + + lorem lorem

    +
    +
    + +
    + + + + + diff --git a/karam-karim/task-7/style.css b/karam-karim/task-7/style.css new file mode 100755 index 0000000..7cfb507 --- /dev/null +++ b/karam-karim/task-7/style.css @@ -0,0 +1,93 @@ +*{ + box-sizing: border-box; + font-family: Open Sans, Verdana, Geneva, Tahoma, sans-serif; +} + +body{ + margin: 0; + padding: 0; + background-color: rgb(238,234,234); + display: flex; + justify-content: center; +} + +main{ + display: flex; + justify-content: center; +} + +.container{ + display: flex; + background-color: #fff; + width: 30%; + align-items: center; + flex-direction: column; +} + +.header{ + text-transform: uppercase; + text-align: left; + width: 80%; + font-weight: bold; + border-bottom: 1px solid lightgrey; + padding: 1em 0; + margin-bottom: 1.5em; +} + +.profile{ + width: 95%; + display: flex; + flex-direction: row; + padding: 0 1em; + justify-content: space-around; + margin: 5px 0; +} + +.profile > .img-container{ + width: 10%; + height: 10%; + flex-grow: 1; + border-radius: 50px; + overflow: hidden; +} + +.body{ + display: flex; + flex-direction: column; + flex-grow: 2; + padding-left: 1em; +} + +.body > p { + margin: 3px; +} + +img{ + width: 100%; +} + +.name{ + font-weight: bold; + text-transform: capitalize; + font-size: 1.1em; + color: #555; +} + +.job{ + color: #888; + font-size: .9em; +} + +.loc{ + color: blue; + cursor: pointer; + user-select: none; +} + +.loc:hover{ + text-decoration: underline; +} + +.text-green{ + color: green !important; +}