diff --git a/css/style.css b/css/style.css index 75e9841e..6155644e 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,182 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + +/* navigation panel */ +nav { + display: block; + padding: 10px; + background-color: rgba(255, 255, 255, 0.7); +} + +nav a { + text-decoration: none; + color: #373737; + font-size: 20px; + font-weight: lighter; +} + +#AZ { + width: 40px; + height: 40px; + margin-right: 550px; + margin-left: 50px; +} + +/*section 1*/ + +.Introduction { + background-color: #333; + color: rgba(255, 255, 255, 0.7); + padding: 200px; +} + +.Introduction h1 { + font-size: 76px; +} + +.Introduction p { + font-size: 18px; +} + +.Introduction img { + width: 800px; + border-radius: 50%; +} + +.section1 { + display: flex; + flex-direction: row; + align-items: stretch; +} + +.section1-text { + padding-left: 100px; +} + +/*section 2*/ + +.section-2-experience { + height: 800px; + background-color: #181823; + color: rgba(255, 255, 255, 0.7); +} + +.companies-logo { + background-color: rgba(255, 255, 255, 0.7); + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.experience-number { + display: flex; + flex-direction: row; + justify-content: space-around; + color: rgba(255, 255, 255, 0.7); + margin-top: 70px; + font-size: 55px; + font-weight: bolder; +} + +.experience-description { + display: flex; + flex-direction: row; + justify-content: space-around; + padding-left: 50px; + color: rgba(255, 255, 255, 0.7); + font-size: 12px; + margin-top: 20px; +} + +.cmp-lg { + width: 300px; + height: 90px; +} + +.section-2-experience { + margin: 10px 0; + padding: 20px; + font-size: 10px; +} +.section-2-experience h1 { + margin-top: 150px; + text-align: left; + color: #8491a0; + padding-left: 50px; + font-size: 20px; +} +.section-2-experience h2 { + text-align: left; + color: rgba(255, 255, 255, 0.7); + margin-top: 100px; + font-size: 55px; + padding-left: 50px; +} +/*section 3 +.section-3-values-div { + display: flex; + flex-direction: column; +} + +#img-Japan { + max-width: 100%; + max-height: 100%; + margin: auto; + display: block; +} +*/ + +/* +/*article*/ +article { + background-color: #333; + color: rgba(255, 255, 255, 0.7); + padding: 200px; + margin: 10px 0; +} + +article h1 { + text-align: left; + color: #8491a0; + + font-size: 20px; +} + +.img-article { + border-radius: 10px; +} + +.publication :first-child { + text-align: center; + color: #89b3e8; +} + +.publication :last-child { + text-align: left; + margin-top: 30px; +} + +/*footer*/ +footer { + background-color: #181823; + text-align: center; + color: #8491a0; + padding: 20px; +} + +.contact-details { + font-weight: bolder; +} + +.publication { + display: flex; + justify-content: center; + flex-direction: column; +} + +/*page container*/ +.container { + max-width: 100%; + margin: 0 auto; +} diff --git a/img/AlexZ.png b/img/AlexZ.png new file mode 100644 index 00000000..98a2c306 Binary files /dev/null and b/img/AlexZ.png differ diff --git a/img/LinkedIn_icon_circle.svg.png b/img/LinkedIn_icon_circle.svg.png new file mode 100644 index 00000000..f1a87534 Binary files /dev/null and b/img/LinkedIn_icon_circle.svg.png differ diff --git a/index.html b/index.html index 67dfc7f5..9d2031e5 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Alex Zablotskyi - - +
+ + +
+
+
+
+ Photo of Alex wearing a blue shirt +
+ +
+

+ I am Alex Zablotsky. +
+ An Attorney based in London. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

+
+
+
+
+

Work Experience

+

Companies I have worked for in the past.

+
+

01

+

02

+

03

+

04

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+
+
+ +
+

My Publications

+
+

Name of the article

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. Sed ut + perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore + magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis + nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut + aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae + consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla + pariatur? Read more +

+
+
+

Name of the article

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. Sed ut + perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore + magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis + nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut + aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae + consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla + pariatur? Read more +

+
+
+

Name of the article

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. Sed ut + perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore + magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis + nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut + aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae + consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla + pariatur? Read more +

+
+
+
+ +