From 6f70337525e07e5fa97aa29755633953c5510a1a Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:00:40 +0100 Subject: [PATCH 1/6] DESIGN 2: Resume --- css/main.css | 288 ++++++++++++++++++++++++++++++++++++++ designs/face-black.png | Bin 0 -> 941 bytes designs/in-black.png | Bin 0 -> 2898 bytes designs/insta-black.png | Bin 0 -> 2559 bytes designs/twitter-black.png | Bin 0 -> 2475 bytes index.html | 114 +++++++++++++-- 6 files changed, 390 insertions(+), 12 deletions(-) create mode 100644 designs/face-black.png create mode 100644 designs/in-black.png create mode 100644 designs/insta-black.png create mode 100644 designs/twitter-black.png diff --git a/css/main.css b/css/main.css index aa561706..53a8f957 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,291 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ + +/* Dark beige: #E6DACD +Light beige: #F4ECE63 +Royal blue: #0150FD +Black: #000 +White: #FFF */ + +/* Set body margin and padding to 0 to remove default spacing */ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} + +/* Style for footer */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} +/* Style for containers */ +.container1 { + width: 40%; + float: left; + height: 1000px; + background-color: #e6dacd; + z-index: 1; + position: relative; +} + +.container2 { + width: 60%; + float: left; + height: 1000px; + background-color: white; + z-index: 1; + position: relative; +} +.white-card { + margin-left: 120px; + margin-top: 220px; +} + +#resume-btn { + background-color: #0150fd; + height: 35px; + width: 110px; + border-radius: 35px; + margin-right: 7px; +} +#resume-btn:hover { + background-color: white; +} +#project-btn { + background-color: #fff; + height: 35px; + width: 110px; + border-radius: 35px; + margin-left: 7px; +} +#project-btn:hover { + background-color: #0150fd; +} + +/* Style for card */ +.card { + margin-top: 90px; + background-color: #F4ECE6; + padding: 10px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + text-align: center; + z-index: 2; + height: 600px; + width: 350px; + position: absolute; + top: 60%; /* added */ + left: 30%; /* added */ + transform: translate(-50%, -50%); + text-align: center; +} + +.card img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + object-position: center; + margin-top: 40px; + padding-top: 10px; +} + +.card h2 { + margin-top: 100px; + margin-bottom: 5px; +} + +.card .social-media { +/* list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; */ + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 0px; + left: 50%; + transform: translate(-50%, 0); + background-color: white; + width: 370px; + height: 60px; +} + +.card .social-media li { + margin: 0 5px; +} + +.card .social-media li a { + display: block; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #333; + color: #fff; + font-size: 20px; + line-height: 20px; + padding-bottom: 0%; +} + +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul{ + display: flex; +} + + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} + +footer div:last-of-type ul li a[href*="face-black.png"] { + background-image: url(../designs/face-black.png); +} + +footer div:last-of-type ul li a[href*="twitter-black.png"] { + background-image: url(../designs/twitter-black.png); +} + +footer div:last-of-type ul li a[href*="in-black.png"] { + background-image: url(./designs/in-black.png); +} + +footer div:last-of-type ul li a[href*="insta-black.png"] { + background-image: url(./designs/insta-black.png); +} diff --git a/designs/face-black.png b/designs/face-black.png new file mode 100644 index 0000000000000000000000000000000000000000..d7c578e17e7c358347d83ec8d00754fe8dfd1f9c GIT binary patch literal 941 zcmeAS@N?(olHy`uVBq!ia0vp^4?&oN8Ax*GDtQ2@q5z)|*Z=?j1DPK`e%!cmkrB%9@#(O`SS5BqXG~ygV%}O;l90 z;`GJo3=B-)JY5_^D(1Ys%UyKKK*TN4K<%JIg>yxV+QO9o(K&5pK^e;*XvZ(P|IU&- z;mg?u9cjg=wOd3h_wSbUTh{#d^@_h&FS{-d-uzwZW5nCk?z`Ksm;J2zd_~#pYP_%e z_Q2_~!Th^wK3|<3TCU}7`(cvqF~>dU8)qIbzV*7F_ux24NJ zeun<)pHEs}*M=_GQ4o4_x$YTtK8Msqvkweh+|SSJIm9O3KfYYMgn1R$=D5qPc9VNH ze0afrMdY1KiO?pnRP9)oN-;y>T^+dm@RzPTIts;s+5!IJKertI`7xYK=D>zlgHCDR(n~&-n;TNgb-!8HhR)CzlfQi>d0T4yX3e!>r&9Kn&RQb3(RA~MIQc_i z2UzXDHk^%Yy&uefV@~J}Z`*|8*u@+2j91o1uG;!UXL4x7blF$?ojU^TTR6UAp-Kgw z-JJTVH*m+^Z&~);H5O<8{75tjd8hlTT)NJ_dTU9C#+m{v}cJ7+Ct+_wB;OZg8) z*OlKcrb)lv-W>OJQSJ<<4uOaNwQF2D1QeZGI0TijF*cMPdiFl#gb=54p5&?@^%e_r zA8}rO^GoVDbKO3FTmIAf*EN0_M!5ca&-MD<>7QG}twm>-uU31rV6U80%P&Qj74kHv z;y<@uE3SC09&@{4^OeWE83{se_Oq@iUe??i$UnVQJNn(}kMq*X?c{#2PmA*VyiLgy Qlpz^BUHx3vIVCg!01uV2l>h($ literal 0 HcmV?d00001 diff --git a/designs/in-black.png b/designs/in-black.png new file mode 100644 index 0000000000000000000000000000000000000000..11d246d70d98d64b9eca943545a8899119914c35 GIT binary patch literal 2898 zcmV-Y3$65tP)wUEAB+e0+Scu&|q( zo9pZAxVX54goGR%9KgW9RaI3wIy!1FfcHZl9HdFpD8IR zMn*2~5e4DN&_lr5wI!VZDbzW*EELP3(_ zq*#uZoO}HJm^o({FN$StmgTp%fPjF2fPjF2fPjF2fPjF2fPnuIq9mTDoyB6Yo$h}A z?5Fd5nE9TR5k%u8EvA=$)i|vBozW!nJxOguN&2;}p^f6S`4~-nPnM5;x~p5c%GEr6 zjC@a-gQVb42iV5GC$5I1IO&l0i`lU4yK<5q^~t;ARP22d@duJ^w;_FZta9Ik)F5uU ze27EZLT1fhDTeN4J$+!c?!8*|6Yq|*xA(*nL3*PE9^Iw(>ts>iDD0f`L0*l$8~6R=87mPS!@>b46*U3 zU#Uhn-tF_zwPIR&dOI5RTga+gc}D9dQ<|^j4&ObR03&(#Y?>O-gPE*II!0!zfkK)} ze_){7>_h5z=f%64yqD*(Fg1@zrqP2?9hT=XGx?n(i9ej{|MFL!s_H&f?8}D0&aJ6h zlA%i*zH44G=`Jo+l8`YGycm1ZjfM-C&eZQ6lcS4|OXD#o*U^QD+EHCQqtD0??;awy^aJ;7XsM28 z0^i=Kx3MzcJynEPKL?r-)&0iRVnjMW_=@levfQ*lrJv7V2y@)EHjOjs*=HP@+Ehlj zVnRCh8=}DUg_SQ#XeQt~TY>k!dw`GSDZR8kw3YpgZ1erlLvw*Ja@8HHeqdY!Pt@XNIO` z3UmDSO%`#W*Uca=W?uy}qlODSA8KN|;Xx=vQ^e04x9-+vo=A>gU%wNgS=HA=$N{tI zOs)-#Qa~T-hlHgJjkEUPFM*4wZ%rbrE3=!FBxO;HVq8jB&ZDZ>s5Tju3AAagqwS_E z=y69Wo7@$-qV^UMBb=IAALY!ua+8Bhp+!ZyfI;S3?a}j9mQ@3pz<(#L!I{G;ZzBQd zRVX)+Qo&fQ`M~UQ9S;MURGrUUQ;4RUj!Hx(Rd?+jb17K`oq!E6X-}O4#uYcZtVRY< zc55`&U{diE^#QBL9LT18r8LxPyO#*GaFj`qft$!@6$r6?v$W~COrd4R8KTvE+XF=~{| z(=>K-7!LY^E7HKPXjc$X25t&wiVcJatlw9e><4+A>~&WhHzH5epgF`;*vYVj$5u>6 zA|AVYuvk4s+UGXc+O{xLo(F|rhBvD0hl)k>)DKX z*Fc@ZW!-IVZsIBi6d6$Pbre?K4y{3tw~FYKvNkcaVmc)zC}bMZ8MI>^!b2%U93Sr0-Yo=-CL>R-lqY%30+0c0Q#A@b)LQodGLmdp5@L`?*ctaH8He}~O!if$`=R4OHxDDCqDiHm+a#}g3a8ucz5^y7O&VgK07{T$V z#w|n`i*t3!HHEki8mY*z{+vLoYYNd;VodT0+`|mR%`t@$lyTF!Qi8XN7;Ng8LQF>2 z%0&h?Wz;QjOd%Q)9Kry|rs|0*ZYe}I;~a1!FauMa$=yJ;b`_{WlXBVc(-UTBOD(e-#(0&Xab-c=iTp^2J)n?p zE&@r78gGvhNg(x94M@NOduxrb!IVuCrBg6cz)H!n3F4y}xeHIKYUz~_F%80_dKEt; zkUM5>i|JPbW2D9k#uERO6#%yca?{V4p+z1E@vrwu7{OpsWAe(V@2yA+ZyPKJM4Dy1Dhx zv`C^0ts$PeI*7fC?~uORu6GrQrEQ#WP1bcdW+Gm`boE@WurI7~s+jrEbynM7lx_dM zZ7pLWUS)UsY;`I3erH2(j7td|j-MnfC(f9Ergz>GM{pjFE?;cDm=yy1QlT>+hbB>Z z4xi>|+?O-o4}RVck&3fT%|sRkQr`R4S3Xa2El=gxT&xb|%Jn{Dv~s>$@1v2+k*=j4 zr+#0vOODcv{_XTiJpOc6QA&F0|1mo`;qvzWO3aQkj205l|6tLEQ`t#HRg0f*zf0B4 zfN{R9DE@IPu4r-I97xLRN#!q{#Yz zu8S(RZOXnXBg*SHq~h{*{6AOw0{iplYdUJsE83zSULZTy)S3Gem!i$wDIv;dvV~cX z(`N1}ylfKtxIe8`cZk(&-iAaZU5vB*V^(3E-*KE3dDaHQ(*&|nJWtcKSS%L(pTFnv w$YtOxARr(hARr(hARr(hARr(hAizHU1LmiAF<1gIYybcN07*qoM6N<$g3n`z(f|Me literal 0 HcmV?d00001 diff --git a/designs/insta-black.png b/designs/insta-black.png new file mode 100644 index 0000000000000000000000000000000000000000..1253515a90db6a4944807e09fc7ae5d30fc1b719 GIT binary patch literal 2559 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 NfY3IAmusSM{{zJa=p6t6 literal 0 HcmV?d00001 diff --git a/designs/twitter-black.png b/designs/twitter-black.png new file mode 100644 index 0000000000000000000000000000000000000000..bac567ae2d8a7de18261cf6befd929e0053688b3 GIT binary patch literal 2475 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index cd704c69..4f87c26f 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,111 @@ - - - - + + + + - + Responsive grid project - + - + +
+
+
+

+

Maya Nelson / Project Manager

+
+ +
+
- +
+
+ Maya Nelson +

Maya
Nelson

+

+
+ +
+
+
+
+


+
+

Hello

+

Here's who I am & what I do

+ + +

+ I'm a paragraph. Click here to add your own text
+ and edit me. It`s easy. Just click “Edit Text” or
+ double click me to add your own content and
+ make changes to the font. +

+
+

+ I`m a great place for you to tell a story and let
+ your users know a little more about you. +

+
+
+
+
+

+ © 2035 by Maya Nelson.
+ Powered and secured by Wix +

+
+
+

Call

+

123-456-7890

+
+
+

Write

+

info@mysite.com

+
+
+

Follow

+
    +
  • +
  • +
  • +
  • +
+
+
+
-

This website design was created by Wix.com, and is used here for strictly educational purposes.

- - - \ No newline at end of file +

+ This website design was created by Wix.com, and is used here for strictly + educational purposes. +

+ + From 016e988b8382f67543bfcb89b291017885ebd616 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:02:21 +0100 Subject: [PATCH 2/6] DESIGN 2: Resume added other pages --- contact.html | 0 index.html | 6 +++--- project.html | 0 resume.html | 0 4 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 contact.html create mode 100644 project.html create mode 100644 resume.html diff --git a/contact.html b/contact.html new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index 4f87c26f..03cdf29f 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@ diff --git a/project.html b/project.html new file mode 100644 index 00000000..e69de29b diff --git a/resume.html b/resume.html new file mode 100644 index 00000000..e69de29b From 50433bbb3ef27bad6c061f82d786dcc72b453189 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:04:46 +0100 Subject: [PATCH 3/6] adds css files --- contact.html | 28 ++++++++++++++++++++++++++++ css/contact.css | 0 css/project.css | 0 css/resume.css | 0 project.html | 28 ++++++++++++++++++++++++++++ resume.html | 28 ++++++++++++++++++++++++++++ 6 files changed, 84 insertions(+) create mode 100644 css/contact.css create mode 100644 css/project.css create mode 100644 css/resume.css diff --git a/contact.html b/contact.html index e69de29b..b414815c 100644 --- a/contact.html +++ b/contact.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+
+
+

+

Maya Nelson / Project Manager

+
+ +
+
+ + \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 00000000..e69de29b diff --git a/css/project.css b/css/project.css new file mode 100644 index 00000000..e69de29b diff --git a/css/resume.css b/css/resume.css new file mode 100644 index 00000000..e69de29b diff --git a/project.html b/project.html index e69de29b..0faeb69e 100644 --- a/project.html +++ b/project.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+
+
+

+

Maya Nelson / Project Manager

+
+ +
+
+ + \ No newline at end of file diff --git a/resume.html b/resume.html index e69de29b..4f6887ad 100644 --- a/resume.html +++ b/resume.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+
+
+

+

Maya Nelson / Project Manager

+
+ +
+
+ + \ No newline at end of file From 53df6d54e38d86e57078cf4bfbb3d9e3cdac8fb1 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:06:32 +0100 Subject: [PATCH 4/6] resume page --- contact.html | 26 ++-- css/contact.css | 73 ++++++++++ css/main.css | 35 ++--- css/project.css | 74 ++++++++++ css/resume.css | 309 ++++++++++++++++++++++++++++++++++++++++++ designs/download.jpeg | Bin 0 -> 4806 bytes index.html | 33 +++-- project.html | 26 ++-- resume.html | 159 ++++++++++++++++++++-- 9 files changed, 664 insertions(+), 71 deletions(-) create mode 100644 designs/download.jpeg diff --git a/contact.html b/contact.html index b414815c..558cff1e 100644 --- a/contact.html +++ b/contact.html @@ -1,18 +1,22 @@ - - - - + + + + Document - - - -
+ + + +

-

Maya Nelson / Project Manager

+ +

+ Maya Nelson / Project Manager +

- - \ No newline at end of file + + diff --git a/css/contact.css b/css/contact.css index e69de29b..74a777c8 100644 --- a/css/contact.css +++ b/css/contact.css @@ -0,0 +1,73 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} +/* HEADER */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 53a8f957..fc5e2ea5 100644 --- a/css/main.css +++ b/css/main.css @@ -24,7 +24,7 @@ h1 { font-size: 100px; } -/* Style for footer */ +/* Style for header */ .header { position: fixed; top: 0; @@ -130,7 +130,7 @@ h1 { /* Style for card */ .card { margin-top: 90px; - background-color: #F4ECE6; + background-color: #f4ece6; padding: 10px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); @@ -139,8 +139,8 @@ h1 { height: 600px; width: 350px; position: absolute; - top: 60%; /* added */ - left: 30%; /* added */ + top: 60%; + left: 30%; transform: translate(-50%, -50%); text-align: center; } @@ -161,12 +161,12 @@ h1 { } .card .social-media { -/* list-style: none; + /* list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; */ - list-style: none; + list-style: none; padding: 0; margin: 0; display: flex; @@ -196,7 +196,7 @@ h1 { line-height: 20px; padding-bottom: 0%; } - +/* footer */ footer { background-color: white; color: #333; @@ -235,11 +235,10 @@ footer div:last-of-type p:first-of-type { margin-bottom: 5px; } -footer div ul{ - display: flex; +footer div ul { + display: flex; } - footer div:last-of-type { display: flex; align-items: center; @@ -273,19 +272,3 @@ footer div:last-of-type ul li a { background-repeat: no-repeat; background-size: contain; } - -footer div:last-of-type ul li a[href*="face-black.png"] { - background-image: url(../designs/face-black.png); -} - -footer div:last-of-type ul li a[href*="twitter-black.png"] { - background-image: url(../designs/twitter-black.png); -} - -footer div:last-of-type ul li a[href*="in-black.png"] { - background-image: url(./designs/in-black.png); -} - -footer div:last-of-type ul li a[href*="insta-black.png"] { - background-image: url(./designs/insta-black.png); -} diff --git a/css/project.css b/css/project.css index e69de29b..4b73dbb9 100644 --- a/css/project.css +++ b/css/project.css @@ -0,0 +1,74 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} +/* HEADER */ + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} \ No newline at end of file diff --git a/css/resume.css b/css/resume.css index e69de29b..40cba4c9 100644 --- a/css/resume.css +++ b/css/resume.css @@ -0,0 +1,309 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); +body { + margin: 0; + padding: 0; +} +h1, +h2, +p { + font-family: "Roboto"; +} +h1 { + font-size: 100px; +} +/* HEADER */ + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + color: black; + display: flex; + align-items: center; + height: 120px; + z-index: 3; +} + +.header .left { + flex: 1; + padding-left: 20px; +} +.left { + display: flex; + align-items: center; +} +.left p { + margin-right: 10px; +} +#box { + background-color: #0150fd; + height: 20px; + width: 20px; +} +#box-small { + background-color: #0150fd; + height: 10px; + width: 10px; +} + +.header .right { + flex: 1; + padding-right: 20px; + text-align: right; +} + +.header .right ul { + list-style: none; + margin: 0; + padding: 0; +} + +.header .right ul li { + display: inline-block; + margin-left: 20px; +} + +.header .right ul li:first-child { + margin-left: 0; +} + +.header .right ul li a { + color: black; + text-decoration: none; +} +.header .right ul li a:hover { + color: #0150fd; +} + +/* MAIN */ + +main { + background-color: #e6dacd; + height: 2500px; +} + +main div { + width: 700px; + text-align: center; + margin-left: 0px; +} +main { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 100px; +} +#main-head { + display: flex; + align-items: center; + margin-top: 200px; + margin-bottom: 150px; + margin-left: 240px; +} + +#main-head #box { + width: 50px; + height: 50px; + background-color: blue; + margin-right: 10px; +} + +#main-head h1 { + margin: 0; +} +#top{ +width: 1300px; +} +#edu{ + margin-right: 600px; +} +#box { + background-color: #0150fd; + width: 30px; + height: 30px; +} + +div:nth-child(2) { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 2rem; +} + +div:nth-child(2) h2 { + text-align: left; + margin-left: 300px; +} + +div:nth-child(2) button { + text-align: right; + margin-right: 300px; + background-color: #0150fd; + height: 40px; + border-radius: 35px; + border: 2px solid #0150fd; + color: white; +} +div:nth-child(2) button:hover { + background-color: #e6dacd; +} + +.infos { + background-color: white; + display: flex; + justify-content: space-between; + height: 300px; + align-items: center; + margin-left: 20px; + margin-right: 20px; +} + +.infos p { + padding: 50px; +} +.infos h4 { + padding-left: 30px; +} + +#list-of-skills li { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +#skills { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + background-color: white; + height: 400px; +} + +#skills > div { + flex: 1 1 50%; + margin: 10px; + padding: 20px; +} + +#skills > div:nth-child(1) { + order: 1; +} + +#skills > div:nth-child(2) { + order: 2; +} + +#skills h2 { + text-align: left; + margin-bottom: 10px; +} + +#skills ul { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} + +#skills li { + display: flex; + flex-basis: 50%; + margin-bottom: 10px; + align-items: center; +} + +#skills #box-small { + height: 15px; + width: 15px; + background-color: blue; + margin-right: 10px; +} +#languages { + display: flex; + flex-direction: column; +} +#languages h2 { + margin-left: 0%; +} + +/* footer */ +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +} diff --git a/designs/download.jpeg b/designs/download.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..a751b85e2ccb7c4dda9925b0962cddf929bfd397 GIT binary patch literal 4806 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

-

Maya Nelson / Project Manager

+ +

+ Maya Nelson / Project Manager +

+
+
+
+

Projects

+
+

+ I'm a paragraph. Click here to add your own text and edit me. It’s easy. + Just click “Edit Text” or double click me to add your own content and + make changes to the font. I’m a great place for you to tell a story and + let your users know a little more about you +

+ +
+
+
+
+
+

Project Name 01

+

Role Title

+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. I’m a great place for you to + tell a story and let your users know a little more about you. +

+
+
+ Project Image +
+
+ +
+
+
+
+
+

Project Name 02

+

Role Title

+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. I’m a great place for you to + tell a story and let your users know a little more about you. +

+
+
+ Project Image +
+
+ +
+
+
+
+
+

Project Name 03

+

Role Title

+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. I’m a great place for you to + tell a story and let your users know a little more about you. +

+
+
+ Project Image +
+
+
+ + From fa38a2fce386cf857518236485ac98ebcbbf11b5 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Fri, 28 Apr 2023 15:25:40 +0100 Subject: [PATCH 6/6] Contact page --- contact.html | 75 ++++++++++++++++++++ css/contact.css | 180 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 254 insertions(+), 1 deletion(-) diff --git a/contact.html b/contact.html index 558cff1e..9c4b6845 100644 --- a/contact.html +++ b/contact.html @@ -28,5 +28,80 @@ + +
+
+
+

Let's Talk

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+ + diff --git a/css/contact.css b/css/contact.css index 74a777c8..93879de1 100644 --- a/css/contact.css +++ b/css/contact.css @@ -70,4 +70,182 @@ h1 { } .header .right ul li a:hover { color: #0150fd; -} \ No newline at end of file +} + +/* MAIN */ + +main { + background-color: #e6dacd; + height: 1100px; + display: flex; + flex-direction: column; + align-items: center; +} +#main-head { + display: flex; + align-items: center; + margin-top: 200px; + margin-bottom: 15px; + margin-left: 240px; +} + +#main-head #box { + width: 30px; + height: 30px; + background-color: blue; + margin-left: 100px; +} +h1 { + font-size: 40px; + margin-right: 350px; + margin-left: 5px; +} + + +/* FORM */ +form { + width: 900px; + margin: 30px; + font-size: 16px; + font-family: Arial, sans-serif; + background-color: white; + +} + +.form-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px; +} + +.form-group { + width: 48%; + margin-bottom: 10px; + position: relative; +} + +.form-group label { + display: block; + margin-bottom: 5px; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 10px; + border: none; + border-bottom: 2px solid #ddd; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-bottom: 2px solid #0150FD; +} + +.form-group span { + color: #0150FD; +} + +.form-group textarea { + height: 150px; +} + +.send-btn { + float: left; + background-color: #0150FD; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s ease-in-out; + border: 2px solid #0150FD; + border-radius: 35px; + width: 100px; +} + +.send-btn:hover { + background-color: white; + color: black; +} + + +/* FOOTER */ + +footer { + background-color: white; + color: #333; + padding: 30px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer p { + margin: 0; +} + +footer div { + display: flex; + align-items: center; +} + +footer div > div { + margin-left: 40px; + display: flex; + flex-direction: column; +} + +footer div p { + margin: 0; + font-weight: bold; +} + +footer div a { + text-decoration: none; + color: #333; +} + +footer div:last-of-type p:first-of-type { + margin-bottom: 5px; +} + +footer div ul { + display: flex; +} + +footer div:last-of-type { + display: flex; + align-items: center; + justify-content: space-between; +} + +footer div:last-of-type p { + margin: 0; + font-weight: bold; +} + +footer div:last-of-type ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +footer div:last-of-type ul li { + margin-left: 20px; +} + +footer div:last-of-type ul li:first-of-type { + margin-left: 0; +} + +footer div:last-of-type ul li a { + display: block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: contain; +}