diff --git a/README.md b/README.md index ca9d95e..2e54c96 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,12 @@ # **Professional Portfolio** ## Professional portfolio that is a collection of examples and evidence to showcase your experience, capability and potential for employment opportunities and professional development. +## **Project Section:** + +* Header section +* Work section +* About section + ## **Build with:** * HTML diff --git a/images/Ellipse1.png b/images/Ellipse1.png new file mode 100644 index 0000000..982f7df Binary files /dev/null and b/images/Ellipse1.png differ diff --git a/images/Ellipse2.png b/images/Ellipse2.png new file mode 100644 index 0000000..71c3b59 Binary files /dev/null and b/images/Ellipse2.png differ diff --git a/images/Ellipse3.png b/images/Ellipse3.png new file mode 100644 index 0000000..ddca959 Binary files /dev/null and b/images/Ellipse3.png differ diff --git a/images/Frame.png b/images/Frame.png new file mode 100644 index 0000000..dbb3d84 Binary files /dev/null and b/images/Frame.png differ diff --git a/images/Header_bg.svg b/images/Header_bg.svg deleted file mode 100644 index c7ce3da..0000000 --- a/images/Header_bg.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/images/Snapshoot Portfolio (1).png b/images/Snapshoot Portfolio (1).png new file mode 100644 index 0000000..82aa29a Binary files /dev/null and b/images/Snapshoot Portfolio (1).png differ diff --git a/images/bar.png b/images/bar.png deleted file mode 100644 index 4308711..0000000 Binary files a/images/bar.png and /dev/null differ diff --git a/images/contact-form shapes-mobile.png b/images/contact-form shapes-mobile.png new file mode 100644 index 0000000..895d2e9 Binary files /dev/null and b/images/contact-form shapes-mobile.png differ diff --git a/images/project1.png b/images/project1.png new file mode 100644 index 0000000..82aa29a Binary files /dev/null and b/images/project1.png differ diff --git a/images/project2.png b/images/project2.png new file mode 100644 index 0000000..b7d9e29 Binary files /dev/null and b/images/project2.png differ diff --git a/images/project3.png b/images/project3.png new file mode 100644 index 0000000..0b80377 Binary files /dev/null and b/images/project3.png differ diff --git a/images/project4.png b/images/project4.png new file mode 100644 index 0000000..19e8857 Binary files /dev/null and b/images/project4.png differ diff --git a/images/shapes.png b/images/shapes.png new file mode 100644 index 0000000..f4624af Binary files /dev/null and b/images/shapes.png differ diff --git a/index.html b/index.html index 459c2aa..e6c7f74 100644 --- a/index.html +++ b/index.html @@ -12,44 +12,162 @@
-
- - -
- -
- +
+
+ + +
+ +
+ +
+

I’m Alexandra
Glad to see you!

+

I can help you build a product , feature or website Look through some of my work and experience! If + you like what you see and have a project you need coded, + don’t hestiate to contact me.

+
+ + +
+
+ +
+
+ + +
+

Tonic

+ +

A daily selection of privately personalized reads; + no accounts or sign-ups required. +

+
    +
  • html
    • +
  • css
    • +
  • javascript
    • +
+ See Project +
+
+ +
+ + +
+

Multi-Post
Stories

+ +

A daily selection of privately personalized reads; + no accounts or sign-ups required. +

+
    +
  • html
    • +
  • css
    • +
  • javascript
    • +
+ See Project +
+
+ +
+ + +
+

Tonic

+ +

A daily selection of privately personalized reads; + no accounts or sign-ups required. +

+
    +
  • html
    • +
  • css
    • +
  • javascript
    • +
+ See Project +
+
+ +
+ + +
+

Multi-Post
Stories

+ +

A daily selection of privately personalized reads; + no accounts or sign-ups required. +

+
    +
  • html
    • +
  • css
    • +
  • javascript
    • +
+ See Project +
+
+
+ +
-

I’m Alexandra
Glad to see you!

+

About
Myself

I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, - don’t hestiate to contact me.

+ don’t hestiate to contact me. +

- + +
+ + Get my resume +
+ +
+
    +
  • Language
    • +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • + +
+
    +
  • Framework
    • +
+
+
    +
  • Skills
    • +
+
+
-
- + - \ No newline at end of file diff --git a/project-result/about-section.png b/project-result/about-section.png new file mode 100644 index 0000000..f72df75 Binary files /dev/null and b/project-result/about-section.png differ diff --git a/project-result/header-section.png b/project-result/header-section.png new file mode 100644 index 0000000..829281a Binary files /dev/null and b/project-result/header-section.png differ diff --git a/project-result/languages.png b/project-result/languages.png new file mode 100644 index 0000000..05e415d Binary files /dev/null and b/project-result/languages.png differ diff --git a/project-result/project.png b/project-result/project.png new file mode 100644 index 0000000..b8668f6 Binary files /dev/null and b/project-result/project.png differ diff --git a/project-result/project2.png b/project-result/project2.png new file mode 100644 index 0000000..93af0ab Binary files /dev/null and b/project-result/project2.png differ diff --git a/project-result/project3.png b/project-result/project3.png new file mode 100644 index 0000000..fd61ff1 Binary files /dev/null and b/project-result/project3.png differ diff --git a/project-result/project4.png b/project-result/project4.png new file mode 100644 index 0000000..83cff54 Binary files /dev/null and b/project-result/project4.png differ diff --git a/style.css b/style.css index e51d70d..fe7ffd2 100644 --- a/style.css +++ b/style.css @@ -10,16 +10,21 @@ } body { - background-color: #f5f5f5; + background-color: #e5e5e5; } /* Design and set the main page to center */ main { - background-color: white; - max-width: 375px; - height: 718px; margin: auto; - border-radius: 0 0 0 10%; + background-color: #f7f7f9; + width: 375px; +} + +.header-container { + height: 718px; + background-color: white; + border: 1px solid white; + border-radius: 0 0 0 80px; } /* position navigation container */ @@ -78,8 +83,179 @@ nav .menu-button { margin-left: 24px; } +/* style social medial icons */ .social-icons { display: flex; gap: 20px; - margin-top: 10px; + margin: 10px 0 0 10px; +} + +/* position work section */ +.work-section { + position: relative; + top: 95%; + display: grid; + justify-content: center; +} + +/* style work section part */ +.projects { + display: flexbox; + flex-direction: column; + background-color: white; + height: 585px; + width: 327px; + margin: 40px 0; + border: 1px solid #dfe1e6; + border-radius: 16px; +} + +/* positon and size projects snapshoot */ +.project-image { + height: 220px; + margin: 12px 12px; +} + +/* position projects description */ +.projects-describe { + margin-left: 12px; +} + +/* style project description */ +.project-title { + font-size: 32px; + color: #172b4d; + line-height: 44px; + font-weight: 700px; + width: 295px; +} + +/* postion project frame */ +.projects-describe .frame { + display: flex; + gap: 32px; + margin-top: 16px; +} + +/* style projects description */ +.description { + margin-top: 16px; + line-height: 24px; + font-weight: 400px; + font-size: 15px; + width: 295px; + height: 76px; + color: #344563; +} + +/* postion technologies used */ +.tools { + display: flex; + gap: 12px; + margin-top: 24px; +} + +/* style technologies used */ +.tools li { + height: 24px; + font-size: 12px; + background: #ebebff; + border-radius: 8px; + text-align: center; + padding: 4px 12px; + font-weight: 500px; + color: #6070ff; +} + +/* style all the clickable buttons */ +.button { + padding: 12px 20px; + width: 100px; + height: 24px; + font-weight: 500px; + size: 17px; + line-height: 48px; + color: #396df2; + text-align: center; + border: 1px solid #396df2; + border-radius: 8px; + position: relative; + top: 25px; +} + +.btn { + margin-left: 24px; +} + +.button:hover { + background: #6070ff; + box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24); + border-radius: 8px; + color: white; +} + +.button:active { + background: #2230d2; + border-radius: 8px; +} + +/* resize project 3 and 4 size */ +.project2, +.project4 { + height: 630px; +} + +/* postion about me section */ +.about { + width: 375px; + height: 1180px; + display: flex; + flex-direction: column; + background: white; + border: 1px solid white; + border-radius: 0 80px 0 0; +} + +#skills { + position: relative; + top: 80px; + margin-left: 30px; +} + +.languages { + margin: 32px 30px; +} + +/* style technologies used */ +.skill { + display: flex; + width: 303px; + margin: 32px 0; + color: #253858; + font-weight: 500px; + height: 67px; + background: #f7f7f9; + border-radius: 8px; + align-items: center; + text-align: center; + gap: 16px; +} + +.skill img { + margin-left: 12px; +} + +.resume-button { + margin-left: 30px; +} + +#skills .h2 { + font-size: 28px; + font-weight: 500px; +} + +#skills hr { + width: 327px; + color: #f1f1f4; + margin: 23px 0 0 0; }