diff --git a/images/Alay_Valley.jpeg b/images/Alay_Valley.jpeg new file mode 100644 index 000000000..eea44d41e Binary files /dev/null and b/images/Alay_Valley.jpeg differ diff --git a/images/ColorGame280x240.jpg b/images/ColorGame280x240.jpg new file mode 100644 index 000000000..2dc55246d Binary files /dev/null and b/images/ColorGame280x240.jpg differ diff --git a/images/Gmail-Clone-with-ReactJS.jpg b/images/Gmail-Clone-with-ReactJS.jpg new file mode 100644 index 000000000..574b6cae6 Binary files /dev/null and b/images/Gmail-Clone-with-ReactJS.jpg differ diff --git a/images/MM Logo.png b/images/MM Logo.png new file mode 100644 index 000000000..59f51f4ea Binary files /dev/null and b/images/MM Logo.png differ diff --git a/images/Running.jpeg b/images/Running.jpeg new file mode 100644 index 000000000..f9332058a Binary files /dev/null and b/images/Running.jpeg differ diff --git a/images/background_image.webp b/images/background_image.webp new file mode 100644 index 000000000..f4e939155 Binary files /dev/null and b/images/background_image.webp differ diff --git a/images/bug.jpeg b/images/bug.jpeg new file mode 100644 index 000000000..ca4519fd0 Binary files /dev/null and b/images/bug.jpeg differ diff --git a/images/portfolio.png b/images/portfolio.png new file mode 100644 index 000000000..df0fd9ac5 Binary files /dev/null and b/images/portfolio.png differ diff --git a/images/todolist-project.jpg b/images/todolist-project.jpg new file mode 100644 index 000000000..54984d921 Binary files /dev/null and b/images/todolist-project.jpg differ diff --git a/pages/about.html b/pages/about.html index b4ae215c4..b15bd5f7c 100644 --- a/pages/about.html +++ b/pages/about.html @@ -4,9 +4,53 @@ - Document + About Me + + - +
+
+ + +
+
+ +
+

Passion

+

Software Engineering

+ Alay_Valley +
+ +
+

My hobbies

+

Running, reading books, hiking

+ Alay_Valley +
+ +
+

Kyrgyzstan - my home country.

+ Alay_Valley +

Tulpar-Kol Lake in the Alay Valley of southern Kyrgyzstan

+
+
+ +
\ No newline at end of file diff --git a/pages/contact.html b/pages/contact.html new file mode 100644 index 000000000..b02aef1cf --- /dev/null +++ b/pages/contact.html @@ -0,0 +1,57 @@ + + + + + + + Contact me + + + + + +
+
+ + +
+
+

My Github: github.com/makhabatmaksatbekova

+

My Email: maksatbekova.m@gmail.com

+
+ +
+ + \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index b4ae215c4..d0f52cd92 100644 --- a/pages/index.html +++ b/pages/index.html @@ -4,9 +4,37 @@ - Document + Makhabat's portfolio + + - +
+
+ + +
+
+

Hello, I am Makhabat

+

I am a Software Developer

+
+ +
\ No newline at end of file diff --git a/pages/portfolio.html b/pages/portfolio.html index b4ae215c4..5d85eab75 100644 --- a/pages/portfolio.html +++ b/pages/portfolio.html @@ -4,9 +4,100 @@ - Document + Makhabat's portfolio + + + + - +
+
+ + +
+
+

Portfolio

+
+
+
+ + Alay_Valley +

Personal portfolio

+ +
+ +
+
+
+ + Alay_Valley +

Gmail clone

+ +
+
+
+
+ + Alay_Valley +

TO_DO_LIST on jQuery

+ +
+
+
+
+ + Alay_Valley +

RGB-COLOR_GUESSING-Game

+ +
+
+
+
+ +
\ No newline at end of file diff --git a/stylesheets/about.css b/stylesheets/about.css new file mode 100644 index 000000000..155ab9f5e --- /dev/null +++ b/stylesheets/about.css @@ -0,0 +1,96 @@ +body{ + margin: 0; + text-align: center; + color: white; + background-color: black; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +.container{ + display: grid; + grid-template-areas: + "header header header header header" + "main main main main main" + "main main main main main" + "main main main main main" + "footer footer footer footer footer"; + grid-template-columns: 1fr 1fr 2fr 1fr 1fr; + grid-template-rows: 0.3fr 1fr 2fr 1fr 0.4fr; +} +body::-webkit-scrollbar { + display: none; +} +.header{ + grid-area: header; + display: grid; + grid-template-areas: + "logo . . nav nav"; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; + align-items: center; +} +.logo{ + grid-area: logo; + width:8rem; + cursor: pointer; +} +.logo img{ + width:100%; +} +.nav{ + grid-area: nav; + display: flex; + justify-content: space-evenly; +} +.nav div{ + border: 1px solid black; +} +.nav div a:link{ + color: white; + text-decoration: none; +} +.nav div a:visited{ + color: white; + text-decoration: none; +} +.nav div a:hover{ + color: gray; + text-decoration: none; +} +.main{ + grid-area: main; + display: grid; + grid-template-areas: + "me me me . ." + ". . hobbie hobbie hobbie" + "country country country . ."; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + +} +.about_me{ + grid-area:me; +} +.my_hobbie{ + grid-area:hobbie; +} +.my_country{ + grid-area:country; +} +.main img{ + width: 100%; +} +.footer{ + grid-area: footer; + align-self: center; +} +.footer-icons a{ + display: inline-block; + width: 35px; + height: 35px; + cursor: pointer; + background-color: #33383b; + border-radius: 2px; + font-size: 20px; + color: #ffffff; + text-align: center; + line-height: 35px; +} \ No newline at end of file diff --git a/stylesheets/contact.css b/stylesheets/contact.css new file mode 100644 index 000000000..e69de29bb diff --git a/stylesheets/index.css b/stylesheets/index.css new file mode 100644 index 000000000..0772c3c68 --- /dev/null +++ b/stylesheets/index.css @@ -0,0 +1,80 @@ +body{ + margin: 0; + text-align: center; + color: white; + background-color: black; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} +body::-webkit-scrollbar{ + display: none; +} +.container{ + display: grid; + grid-template-areas: + "header header header header header" + "main main main main main" + "main main main main main" + "main main main main main" + "footer footer footer footer footer"; + grid-template-columns: 1fr 1fr 2fr 1fr 1fr; + grid-template-rows: 0.4fr 1fr 2fr 1fr 0.4fr; +} +.header{ + grid-area: header; + display: grid; + grid-template-areas: + "logo . . nav nav"; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; + align-items: center; +} +.logo{ + grid-area: logo; + width:8rem; + cursor: pointer; +} +.logo img{ + width:100%; +} +.nav{ + grid-area: nav; + display: flex; + justify-content: space-evenly; +} +.nav div{ + border: 1px solid black; +} +.nav div a:link{ + color: white; + text-decoration: none; +} +.nav div a:visited{ + color: white; + text-decoration: none; +} +.nav div a:hover{ + color: gray; + text-decoration: none; +} +.main{ + grid-area: main; + background-image: url('https://marvel-b1-cdn.bc0a.com/f00000000075552/www.perforce.com/sites/default/files/image/2018-07/image-blog-will-ai-replace-programmers.jpg'); + background-repeat: no-repeat; + background-size:cover; + height: 100vh; +} +.footer{ + grid-area: footer; + align-self: center; +} +.footer-icons a{ + display: inline-block; + width: 35px; + height: 35px; + cursor: pointer; + background-color: #33383b; + border-radius: 2px; + font-size: 20px; + color: #ffffff; + text-align: center; + line-height: 35px; +} diff --git a/stylesheets/portfolio.css b/stylesheets/portfolio.css new file mode 100644 index 000000000..585454ebe --- /dev/null +++ b/stylesheets/portfolio.css @@ -0,0 +1,113 @@ +.main{ + grid-area: main; + background-color:whitesmoke; + background-image: none; + color: #000; +} +body { + margin: 0; + text-align: center; + color: white; + background-color: black; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} +.imgwrap a:link { + color: black; + text-decoration: none; +} +.imgwrap a:visited { + color: black; + text-decoration: none; +} +.container { + display: grid; + grid-template-areas: + "header header header header header" + "main main main main main" + "main main main main main" + "main main main main main" + "footer footer footer footer footer"; + grid-template-columns: 1fr 1fr 2fr 1fr 1fr; + grid-template-rows: 0.4fr 1fr 2fr 1fr 0.4fr; + height: 100vh; +} +.header { + grid-area: header; + display: grid; + grid-template-areas: + "logo . . nav nav"; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; + align-items: center; +} +.logo{ + grid-area: logo; + width:8rem; + cursor: pointer; +} +.logo img{ + width:100%; +} +.nav { + grid-area: nav; + display: flex; + justify-content: space-evenly; +} +.nav div { + border: 1px solid black; +} +.nav div a:link { + color: white; + text-decoration: none; +} +.nav div a:visited { + color: white; + text-decoration: none; +} +.nav div a:hover { + color: gray; + text-decoration: none; +} +.footer{ + grid-area: footer; + align-self: center; +} +.footer-icons a{ + display: inline-block; + width: 35px; + height: 35px; + cursor: pointer; + background-color: #33383b; + border-radius: 2px; + font-size: 20px; + color: #ffffff; + text-align: center; + line-height: 35px; +} +.content{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap:5rem; + height: 20rem; +} +.content .box{ + border: 1px solid black; + width:40%; + height: 100%; + border-radius: 6px; + box-shadow:2px 4px 4px 4px grey; + align-items: center; +} +.content .box:hover { + box-shadow:4px 6px 6px 6px grey; + cursor: pointer; +} +.imgwrap { + width: 100%; + display: inline-block; +} +.imgwrap img { + width: 100%; +} +