diff --git a/images/Hero_1.jpg b/images/Hero_1.jpg new file mode 100644 index 0000000..310df38 Binary files /dev/null and b/images/Hero_1.jpg differ diff --git a/images/apple.jpeg b/images/apple.jpeg new file mode 100644 index 0000000..2a1d339 Binary files /dev/null and b/images/apple.jpeg differ diff --git a/images/project_1.jpg b/images/project_1.jpg new file mode 100644 index 0000000..89ade00 Binary files /dev/null and b/images/project_1.jpg differ diff --git a/images/project_2.jpg b/images/project_2.jpg new file mode 100644 index 0000000..1a5595a Binary files /dev/null and b/images/project_2.jpg differ diff --git a/images/project_3.jpg b/images/project_3.jpg new file mode 100644 index 0000000..e5e6a5f Binary files /dev/null and b/images/project_3.jpg differ diff --git a/images/project_4.jpg b/images/project_4.jpg new file mode 100644 index 0000000..bc76f72 Binary files /dev/null and b/images/project_4.jpg differ diff --git a/images/project_5.jpg b/images/project_5.jpg new file mode 100644 index 0000000..078a7fd Binary files /dev/null and b/images/project_5.jpg differ diff --git a/images/projects.jpg b/images/projects.jpg new file mode 100644 index 0000000..5a372eb Binary files /dev/null and b/images/projects.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e2222fd --- /dev/null +++ b/index.html @@ -0,0 +1,99 @@ + + + + + + + + Personal-web-site + + + + + + + +
+
+

DS_Alex

+

Front End Developer

+
+ +
+ + + +
+
+
+

Hey there I am Alex

+
+ +
+ +
+ +
+
+ +

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.Lorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+ + +
+
+
+
+ projects +
Project Title go to project
+
+
+
+
+ projects +
Project Title go to project
+
+
+
+
+ projects +
Project Title go to project
+
+
+
+
+ projects +
Project Title go to project
+
+
+
+
+ projects +
Project Title go to project
+
+
+
+
+ projects +
Project Title go to project
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..b898840 --- /dev/null +++ b/main.css @@ -0,0 +1,247 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #4f4f4f; + background-color: #fff; + font-family: "Titillium web", sans-serif; + line-height: 1.6rem; + font-size: 1.2em; +} + +/*=======Header section=======*/ + +header { + padding-top: 80px; + padding-bottom: 15px; + display: flex; + justify-content: center; +} + +.header_inner { + max-width: 1200px; + display: flex; + justify-content: space-between; + flex: 1; + margin-left: 40px; + margin-right: 40px; +} + +/*======hr element=========*/ + +ul { + display: flex; + flex-direction: column; + align-items: center; + list-style-type: none; +} + +li { + width: 90%; + height: auto; + flex: 1; + padding-bottom: 30px; +} + +hr { + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); +} + +/*========Hero & aside sections=========*/ + +.hero-container { + display: flex; + justify-content: center; + flex: 1; + padding-left: 40px; +} + +.hero { + max-width: 1200px; + height: auto; + display: flex; + flex: 1; +} + +.hero_img { + width: 80%; + height: auto; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/Hero_1.jpg); + background-size: cover; + background-position: center; + display: flex; + justify-content: flex-end; + align-items: flex-end; +} + +.hero_img, h2 { + color: #d24301; + font-size: 1.5em; + padding-bottom: 30px; + padding-right: 10px; +} + +aside img { + width: 200px; + height: 200px; + border-radius: 50%; +} + +aside { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 15px; + flex: 1; +} + +aside p { + padding-top: 50px; + padding-left: 33px; + font-size: 16px; + line-height: 36px; + text-align: center; +} + +/*=======Article section======*/ + +article { + display: flex; + flex-direction: row; + justify-content: center; +} + +.article_inner { + width: 90%; + height: auto; + align-items: center; + padding: 90px; + text-align: center; +} + +/*========gallery========*/ + +.galery-grid-container { + display: flex; + justify-content: center; + padding-bottom: 80px; +} + +.photo-grid { + width: 1200px; + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-left: 3px; + margin-right: 3px; +} + +img { + width: 100%; + height: auto; + max-width: 350px; + height: 350px; +} + +figure { + min-width: 350px; + text-align: center; + font-style: italic; + font-size: 1em; + text-indent: 0; + border: thin #c0c0c0 solid; + margin: 10px; +} + +a { + text-decoration: underline; + font-weight: bold; + color: #fff; +} + +figure:hover { + background-color: #d24301; + /*#ed490a*/ + ; + color: #fff; +} + +/*===stilyng elements====*/ + +.fa-phone-square { + font-size: 24px; + color: #d24301; +} + +h1 { + font-family: "Krona one", sans-serif; + color: #000; + font-size: 2em; +} + +span { + color: #d24301; +} + +.header>p { + font-size: 2em; +} + +/*======Media Queries========*/ + +@media screen and (max-width:850px) { + .hero { + max-width: 1200px; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + } + .hero_img { + min-width: 100%; + height: 50vh; + margin-right: 40px; + } + .hero_img, h2 { + font-size: 1.3em; + } + .aside { + padding-top: 100px; + width: 100%; + padding-right: 40px; + } + .article { + width: 100%; + font-size: 16px; + } +} + +@media screen and (max-width:690px) { + .header { + display: flex; + flex-direction: column-reverse; + align-items: center; + margin-left: 40px; + margin-right: 40px; + } + h1, .header>p { + padding: 20px; + font-size: 1.5em; + } + .article { + text-align: left; + line-height: normal; + } +} + +@media screen and (max-width:320px) { + .article, h2 { + display: none; + } +} \ No newline at end of file