diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/img/american.png b/html-css/week1/Ali-Nematollahi/Order Desktop/img/american.png new file mode 100644 index 00000000..06d08ea0 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order Desktop/img/american.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/img/master.png b/html-css/week1/Ali-Nematollahi/Order Desktop/img/master.png new file mode 100644 index 00000000..de4b950b Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order Desktop/img/master.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/img/paypal.png b/html-css/week1/Ali-Nematollahi/Order Desktop/img/paypal.png new file mode 100644 index 00000000..75cb77d0 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order Desktop/img/paypal.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/img/visa.png b/html-css/week1/Ali-Nematollahi/Order Desktop/img/visa.png new file mode 100644 index 00000000..2945107b Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order Desktop/img/visa.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/index.html b/html-css/week1/Ali-Nematollahi/Order Desktop/index.html new file mode 100644 index 00000000..930dcd4f --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Order Desktop/index.html @@ -0,0 +1,141 @@ + + + + + + order-desktop + + + + + +
+ + +
+
Order Summary
+
+
Total
+
$333 / month
+
+
+
+
Total
+
$100
+
+
+ + + +
+
Payment Method
+
+
+
+
+
+ Master Card + Visa + American Express +
+
+
Credit / Debit
+
+
+
+
+
+
+ PayPal +
+
+
PayPal
+
+
+
+
+ + + +
+
Card Info
+
+
+
Card Number
+
+
+
+ +
+
+ + + +
+
+
+
+
+
Expiry Date
+
+ +
+
+
+
Security Code
+
+
+
+ +
+
+ + + +
+
+
+
+
+
+ + + + +
+ +
+ Need Help? +
+
+ +
+ + + + diff --git a/html-css/week1/Ali-Nematollahi/Order Desktop/style.css b/html-css/week1/Ali-Nematollahi/Order Desktop/style.css new file mode 100644 index 00000000..f72b2185 --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Order Desktop/style.css @@ -0,0 +1,69 @@ +body { + margin: 0; + padding: 0; +} + +.layout-container{ + max-width: 1000px; + margin: 0 auto; +} + +.gradient { + background-image: linear-gradient(to right, rgb(255, 94, 0), #e71bee); + color: white; +} +div:has(> hr) { + width: 97%; + margin: 0 auto; + height: 1px; + background-color: white; +} + +.payment > div > div > div { + height: 150px; + width: 96%; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.payment > div > div > div:hover { + border: 4px solid rgb(238, 14, 126); + cursor: pointer; +} + +.img-style { + height: 80px; +} + +.input-style { + display: inline; + width: 100%; + height: 50px; + background-color: rgb(243, 243, 243); + border: 2px solid rgb(182, 180, 180); + border-radius: 5px; +} + +.q-icon { + position: relative; + left: -65px; + top: 10px; + overflow: hidden; +} + +.button-style{ + width: 40%; + height: 100px; + margin: 50px 30%; + border: none; + border-radius: 50px; +} + +.help { + background-image: linear-gradient(to left, rgb(255, 94, 0), #e71bee); + color: transparent; + background-clip: text; +} +div.help span:hover{ + cursor: pointer; +} diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american.png new file mode 100644 index 00000000..3ab85751 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american1.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american1.png new file mode 100644 index 00000000..f3718236 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/american1.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master.png new file mode 100644 index 00000000..d3d774c2 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master1.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master1.png new file mode 100644 index 00000000..8881f444 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/master1.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal.png new file mode 100644 index 00000000..31b4b4b1 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal1.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal1.png new file mode 100644 index 00000000..3760663e Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/paypal1.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa.png new file mode 100644 index 00000000..f035881c Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa1.png b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa1.png new file mode 100644 index 00000000..f9d878b4 Binary files /dev/null and b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/img/visa1.png differ diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/index.html b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/index.html new file mode 100644 index 00000000..2ab0044f --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/index.html @@ -0,0 +1,119 @@ + + + + + + order-desktop + + + +
+ + + +
+

Order Summary

+

+ Total + $333 / month +

+

+ Total + $100 +

+
+ + + +
+

Payment Method

+
+
+ Master Card + Visa + American Express + + Master Card + Visa + American Express +

Credit / Debit

+
+
+ PayPal + + PayPal +

PayPal

+
+
+
+ + + +
+

Card Info

+
+
+

Card Number

+
+ + +
+
+
+

Expiry Date

+
+ +
+
+
+

Security Code

+
+ + +
+
+
+ +
+ + + +
+ +
+ Need Help? +
+
+
+ + diff --git a/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/style.css b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/style.css new file mode 100644 index 00000000..0aef0e10 --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Order-Desktop-pure-css/style.css @@ -0,0 +1,244 @@ +/*############ General styles (both mobile and desktop) ############*/ + +body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + box-sizing: border-box; +} + +.layout-container{ + max-width: 1000px; + margin: 0 auto; +} + +.gradient { + background-image: linear-gradient(to right,#FD7B46 , #FE4E9B); + color: white; +} + +.img-style { + height: 50px; +} + +.button-style{ + width: 40%; + height: 68px; + display: block; + margin: 50px auto; + border: none; + border-radius: 68px; + font-size: 24px; + font-weight: 700; +} + +.help { + text-align: center; + font-size: 18px; + font-weight: 700; +} + +.help a{ + background-image: linear-gradient(to left, #FD7B46 , #FE4E9B); + color: transparent; + background-clip: text; + padding-bottom: 50px; +} + +.container-fluid{ + width: 95%; + margin: 20px auto; +} + +.order-summary{ + padding: 30px 20px 10px; +} +.order-summary-part1{ + margin: 10px 20px; + border-bottom: 2px solid white; + font-size: 18px; + font-weight: 400; +} + +.order-summary-part2{ + margin: 0 20px; + font-size: 18px; + font-weight: 700; + padding-bottom: 30px; +} + +.left-view { + float: inline-end; +} + +.section-title{ + text-align: center; + padding: 30px; + margin: 0; +} + +.payment-container { + display: flex; + flex-direction:row; + flex-wrap: nowrap; + justify-content:space-around; +} + +.payment-option { + box-sizing: border-box; + width: 48%; + height: 110px; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + text-align: center; + font-size: 18px; + font-weight:600; + color: #939393; + padding: 10px; +} + +.payment-option:hover { + border: 4px solid #FE4E9B; + cursor: pointer; +} + +.color{ + display: none; +} + +.payment-option:hover img.color { + display: inline; +} + +.payment-option:hover img.black-white { + display: none; + } + +.payment-container p { + margin-top: 0; +} + +.card-info-container{ + display: flex; + flex-direction:row; + flex-wrap: wrap; + justify-content:space-around; +} + +.card-info-container > div{ + color: #939393; + text-align: center; + font-size: 18px; + font-weight:600; +} + +.input-container{ + background-color: #F3F1F2; + color: #939393; + width: 100%; + height: 44px; + border: 1px solid #939393; + border-radius: 5px; +} + +.card-info-container input { + box-sizing: border-box; + float: inline-start; + height: 44px; + background: none; + border: none; + font-size: 18px; + padding-left: 5px; + width: 86%; + padding-left: 10px; +} + +.fix-icon{ + /* to fix responsive behavior for the icon in cvv input */ + width: 75% !important; +} + +.card-info-container input:focus{ + outline: none; +} + +.icon-btn{ + color: grey; + float: inline-end; + height: 100%; + border: none; + background: none; + cursor: pointer; +} +.icon{ + width: 24px; + height: 24px; +} + + +/*########################## Mobile styles ##########################*/ + +@media only screen and (max-width: 600px) { + + .order-summary{ + text-align: center; + } + + .card-info-container > div:first-child{ + width: 100%; + } + + .card-info-container > div:nth-child(2){ + width: 54%; + } + + .card-info-container > div:nth-child(3){ + width: 44%; + } + + .fix-icon{ + /* to fix responsive behavior for the icon in cvv input */ + width: 60% !important; + } + + .img-style { + max-width: 30px; + } + + .card-info-container p { + font-size: 16px; + font-weight:400; + } + + .card-info-container input{ + width: 70%; + font-size: 16px; + font-weight:400; + } + + .button-style{ + width: 85%; + } + + .payment-container p{ + font-size: 12px; + } +} + +/*########################## Desktop styles ##########################*/ + + +@media only screen and (min-width: 600px) { + + .card-info-container > div:first-child{ + width: 48%; + } + + .card-info-container > div:nth-child(2){ + width: 22%; + } + + .card-info-container > div:nth-child(3){ + width: 26%; + } +} diff --git a/html-css/week1/Ali-Nematollahi/Portfolio Page/index.html b/html-css/week1/Ali-Nematollahi/Portfolio Page/index.html new file mode 100644 index 00000000..c98f9b38 --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Portfolio Page/index.html @@ -0,0 +1,110 @@ + + + + + + Ali-Nematollahi-CV + + + + + +
+ +
+

Ali Nematollahi

+

Full-Stack Developer

+
+ +
+ menu +
+
+
+
+
SUMMARY
+

+ Full-stack developer with 2+ years of experience in building and + maintaining web pages and single page applications. Seeking for new + opportunities and challenges that will expand my skill set. + Proficient with CSS and JavaScript frameworks, with extensive + knowledge of back-end languages, Databases and API. +

+ +

+ As a Full-stack developer, my goal is to continually increase my + programming skills in order to present better solutions to my + employers and their clients. +

+
+ +
+
SKILLS
+
+ HTML and CSS + JavaScript + TypeScript + React.js + Node.js + MySQL and MongoDB + Restfull API + GraphQL + Git and GitHub +
+
+ +
+
CONTACT
+
+
Email
+
ali.nematollahi2020@gmail.com
+
GitHub
+
AliNematollahi-HackYourFuture
+
Linkedin
+
+ linkedin.com/in/ali-nematollahi +
+
Address
+
Copenhagen, Denmark
+
Mobile
+
+ +45 71557785 +
+
+
+ +
+
PORTFOLIO
+
+
+ FCC Survey Form +
+
+
+
+
+ + diff --git a/html-css/week1/Ali-Nematollahi/Portfolio Page/style.css b/html-css/week1/Ali-Nematollahi/Portfolio Page/style.css new file mode 100644 index 00000000..3bb2d849 --- /dev/null +++ b/html-css/week1/Ali-Nematollahi/Portfolio Page/style.css @@ -0,0 +1,212 @@ +/*############ General styles (both mobile and desktop) ############*/ + +* { + margin: 0; + padding: 0; + font-family: 'Arial Narrow', Arial, sans-serif; +} + +body { + box-sizing: border-box; +} + +.text-decoration-none { + text-decoration: none; +} + +.list-style-type-none { + list-style-type: none; +} + +.header-style{ + background-color: rgb(80, 156, 172); +} + +.main-style{ + background-color: rgb(26, 115, 138); + margin-top: 0; +} + +.section-style { + margin: 20px auto; + border: solid 2px rgb(223, 218, 231); + border-radius: 10px; + padding: 10px; + font-size: 18px; +} + + + +.section-title{ + position: relative; + left: 5px; + top: -22px; + z-index: 1; + font-size: 20px; + font-weight: bold; + display: inline; + padding: 0 3px; + color: white; + background-color: rgb(26, 115, 138); +} + +.summary-style{ + color: white; + font-size: 20px; +} + +.contact-title { + color: white; + margin-top: 7px; + margin-left: 3px; +} + +section.skills-style > div:nth-child(2){ + display: flex; + flex-direction: column; + align-items: start; +} + +.section-item{ + margin: 4px 4px; + background-color: rgb(197, 227, 233); + border-radius: 6px; + display:inline-block; + padding: 3px 3px; + box-sizing: border-box; +} +.section-item a{ + color: black; +} + +.space2{ + height: 5px; +} + + +/*########################## Mobile styles ##########################*/ + +@media only screen and (max-width: 600px) { + .main-container { + margin: 0 10px; + } + + .navbar { + display: none; + } + + .header-style { + width: 80%; + float: left; + height: 70px; + } + .header__title{ + font-size: 30px; + padding: 3px 5px; + } + .header__description{ + font-size: 20px; + padding: 0 5px; + } + + .menu { + background-color: rgb(80, 156, 172); + width: 20%; + float: right; + height: 70px; + direction: rtl; + box-sizing: border-box; + padding: 25px 10px; + } + .section-style { + width: 90%; + } + + .space1{ + height: 75px; + } + +} + + +/*########################## Desktop styles ##########################*/ + + +@media only screen and (min-width: 600px) { + .main-container { + margin: 0 100px; + } + + .menu { + display: none; + } + + .navbar { + width: 100%; + min-height: 50px; + background-color: rgb(26, 115, 138); + } + + .navbar ul { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + li.nav-item:hover{ + background-color: rgb(197, 227, 233); + } + + .nav-item-link { + display: block; + padding: 15px 20px; + color: aliceblue; + font-size: large; + } + + a.nav-item-link:hover{ + color: black; + } + + .header-style { + width: 100%; + height: 150px; + } + .header__title{ + font-size: 60px; + padding: 10px; + } + .header__description{ + font-size: 30px; + padding: 0 10px; + } + + .summary-style{ + width: 95%; + margin: 0px auto 40px; + position: relative; + top: 20px; + } + + .skills-style{ + box-sizing: border-box; + width: 47.25%; + min-height:375px; + margin: 20px 1.25% 20px 1.5%; + float: left; + } + + .contact-style { + box-sizing: border-box; + width: 47.25%; + min-height: 375px; + margin: 20px 1.5% 20px 1.25%; + float: left; + } + + .portfolio-style{ + width: 95%; + margin: 20px auto; + clear: both; + } + +} diff --git a/html-css/week1/readme.md b/html-css/week1/readme.md deleted file mode 100644 index ec460040..00000000 --- a/html-css/week1/readme.md +++ /dev/null @@ -1 +0,0 @@ -# Readme \ No newline at end of file