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 new file mode 100755 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 100755 index 0000000..6d2d2ac --- /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; +} + +.header{ + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; +} + +.header > h2, .header > p{ + color: rgb(83,82,82); + font-weight: bold; +} + +.header > p { + font-size: 0.7em; + width: 70%; +} + + +.body{ + display: flex; + flex-direction: column; + align-items: center; +} + +.langs { + display: flex; + flex-wrap: wrap; + width: 70%; +} + +.langs > span { + display: block; + margin: .5em 1em; +} + +.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; +} + +.langs > span > input[type="checkbox"]:checked + label{ + background-color: rgb(20,223,223); + color: #fff; + transition: all ease-in .2s; +} + +.buttons{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 2em 1em; +} + +.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; +} + +.buttons > a:active{ + background-color: rgb(161,196,139); + color:#fff; +} + +.buttons > a:nth-child(1){ + text-transform: capitalize; +} + +.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 100755 index 0000000..a473249 Binary files /dev/null and b/karam-karim/task-2/arrow-down.png differ diff --git a/karam-karim/task-2/index.html b/karam-karim/task-2/index.html new file mode 100755 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 100755 index 0000000..715c2a3 --- /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; +} + +.header{ + font-size: 2em; + margin: 0; +} + +.input { + display: flex; + margin: 2em 0; + justify-content: space-between; +} + +.input > p{ + text-align: left; + font-weight: bold; + margin: 0 1em; + line-height: 2.8em; + align-items: center; +} + +.input > input[type="text"] , +.input > input[type="email"]{ + border: none; + padding: 1em; + padding-left: 0 !important; + background-color: transparent; + border-bottom: 2px solid lightgrey; + transition: all linear .3s; +} + +.input > input[type="text"]:focus , +.input > input[type="email"]:focus{ + border-color: grey; +} + +.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; +} diff --git a/karam-karim/task-3/arrow-down.png b/karam-karim/task-3/arrow-down.png new file mode 100755 index 0000000..ebb685d Binary files /dev/null and b/karam-karim/task-3/arrow-down.png differ diff --git a/karam-karim/task-3/france.png b/karam-karim/task-3/france.png new file mode 100755 index 0000000..2b77f96 Binary files /dev/null and b/karam-karim/task-3/france.png differ diff --git a/karam-karim/task-3/germany.png b/karam-karim/task-3/germany.png new file mode 100755 index 0000000..9769cf8 Binary files /dev/null and b/karam-karim/task-3/germany.png differ diff --git a/karam-karim/task-3/index.html b/karam-karim/task-3/index.html new file mode 100755 index 0000000..aff1954 --- /dev/null +++ b/karam-karim/task-3/index.html @@ -0,0 +1,22 @@ + + + + + task 3 + + + + +
+ +
+ + + diff --git a/karam-karim/task-3/poland.png b/karam-karim/task-3/poland.png new file mode 100755 index 0000000..20e3be0 Binary files /dev/null and b/karam-karim/task-3/poland.png differ diff --git a/karam-karim/task-3/style.css b/karam-karim/task-3/style.css new file mode 100755 index 0000000..a3d812b --- /dev/null +++ b/karam-karim/task-3/style.css @@ -0,0 +1,90 @@ +body{ + margin: 0; + padding: 0; + background-color: rgb(198,200,197); + font-family: Open Sans; +} + +.container{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; +} + + + +.dropdown{ + background-color: #fff; + list-style: none; + position: relative; + border-radius: 5px; + box-shadow: 0px -20px 307px 10px grey; + +} +/* the header */ +.dropdown::before{ + content: attr(data-text); + color: lightgrey; + font-size: 1.1em; + font-weight: bold; + padding: 1.5em; + 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; +} + +/* the country names */ + +.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 */ +.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; +} + +.option:nth-child(1)::before{ + background-image: url(france.png); +} + +.option:nth-child(2)::before{ + background-image: url(germany.png); +} + +.option:nth-child(3)::before{ + background-image: url(united-kingdom.png); +} + +.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 100755 index 0000000..a8c6fc1 Binary files /dev/null and b/karam-karim/task-3/united-kingdom.png differ diff --git a/karam-karim/task-4/index.html b/karam-karim/task-4/index.html new file mode 100755 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 100755 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; +} diff --git a/karam-karim/task-5/index.html b/karam-karim/task-5/index.html new file mode 100755 index 0000000..8506cc9 --- /dev/null +++ b/karam-karim/task-5/index.html @@ -0,0 +1,28 @@ + + + + + task 5 + + + + + +
+ +
+ + + diff --git a/karam-karim/task-5/style.css b/karam-karim/task-5/style.css new file mode 100755 index 0000000..7fb7750 --- /dev/null +++ b/karam-karim/task-5/style.css @@ -0,0 +1,71 @@ +*{ + 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; + padding-top: 1em; +} + +.item{ + padding: 1em; + padding-left: 2em; + 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); +} diff --git a/karam-karim/task-6/index.html b/karam-karim/task-6/index.html new file mode 100755 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 100755 index 0000000..cf738c4 --- /dev/null +++ b/karam-karim/task-6/style.css @@ -0,0 +1,109 @@ +*{ + 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; + align-items: center; + justify-content: center; + width: 50%; + padding: 10% 0; +} + +.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; +} 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; +}