diff --git a/index.html b/index.html index dc73fbe..c72f7c7 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,117 @@ + + +
+ + + +
+
+ +
+

Hiring a Full-stack developer?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero cumque voluptas, corrupti molestias temporibus natus.

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

ABOUT ME

+ +

Introduction

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ea, adipisci minima maiores laborum distinctio itaque cum perspiciatis quia rerum ipsa, aspernatur nam facilis, eaque cumque eligendi deserunt repellat eveniet neque ullam in veniam laudantium doloribus vero? Laboriosam maxime sapiente doloribus odio assumenda ipsam, exercitationem incidunt pariatur doloremque inventore ipsum.

+
+ +

Technical Skills

+ + +
+ +
+ +
+ +
+ +

Portfolio

+ +
+
+ +
+

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?

+ Read More + Git Hub Repo +
+
+

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?

+ Read More + Git Hub Repo +
+
+

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?

+ Read More + Git Hub Repo +
+ +
+
+ +
+ +
+ +
+ +

Experience

+
+
+
+

Job Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime repellat magni neque culpa dicta aspernatur voluptate consequatur autem, cupiditate sunt eveniet porro excepturi! Unde reiciendis inventore veritatis iure, laboriosam repudiandae tempora incidunt. Laborum maxime placeat dignissimos ad nesciunt iure, perferendis quo iusto esse illo similique, facilis, neque dolorem explicabo eum.

+ +

Job Title

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae fuga natus maxime alias velit optio numquam et debitis eos. Doloremque sint eligendi officiis iure in enim ea saepe repudiandae fuga. Fugiat quidem aliquid expedita tenetur rem illum culpa quos, labore autem nulla aspernatur maxime! Modi ut accusantium asperiores libero incidunt?

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b4d2dea --- /dev/null +++ b/style.css @@ -0,0 +1,245 @@ +* { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + scroll-behavior: smooth; +} + +hr { + height: 5px; + background-color: black; + border: none; +} + +.main { + height: 100vh; + background-color: rgb(48, 121, 204); +} + +nav { + padding: 10px; + overflow: auto; +} + +nav h1 { + font-weight: bolder; + float: left; + font-size: 1.7em; + padding-top: 8px; + color: aliceblue; +} + +nav ul a { + font-weight: bold; + font-size: 1.5em; + display: inline; + float: right; + padding: 4px 15px 3px 15px; + margin: 10px 15px 0px 0px; + text-decoration: none; + text-align: center; + color: rgb(48, 121, 204); + background-color: aliceblue; + border-radius: 5px; + transition-duration: 0.5s; +} + +nav ul a:hover { + color: aliceblue; + background-color: rgb(48, 121, 204); +} + +.main main { + display: grid; + height: 100vh; + grid-template-columns: 1fr 0.9fr 1fr; + grid-template-rows: 20vh 1fr; + padding: 10px; + grid-template-areas: + '. . .' + '. main .'; +} + +.container { + grid-area: main; + +} + +.container h1 { + max-width: 500px; + color: aliceblue; + justify-self: center; + font-size: 5em; + overflow-wrap: break-word; + position: relative; +} + +.container p { + justify-self: end; +} + +.about { + display: grid; + height: 75vh; + background-color: rgb(69, 200, 69); + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: + '. mid .'; +} + +.about main { + grid-area: mid; + font-size: 20px; +} + +.about h2 { + font-size: 20px; +} + +.about h1 { + grid-area: mid; + padding-top: 45px; + font-size: 2.2em; + text-align: center; + height: 100px; + color: rgb(14, 14, 39); + position: relative; +} + + +.about p { + justify-self: end; +} + +.about ul { + justify-self: end; + grid-column-start: 2; + columns: 2; + margin-bottom: 50px; + margin-top: 20px; + padding-left: 50px; +} + +.portfolio { + min-height: 90vh; + max-height: auto; + background-color: rgb(231, 231, 59); + padding-bottom: 50px; +} + +.portfolio h1 { + text-align: center; + font-size: 2.2em; + padding-top: 45px; +} + +.portfolio h2 { + font-size: 2.2em; + margin-bottom: 10px; +} + +.portfolio p { + font-size: 1.3em; + margin-bottom: 50px; +} + +.grid { + display: grid; + height: 80%; + grid-template-columns: 100px 1fr 1fr 1fr 100px; + grid-template-rows: 1fr; + grid-gap: 45px; + grid-template-areas: + '. left middle right .'; +} + +.item-1 { + grid-area: left; +} + +.item-2 { + grid-area: middle; +} + +.item-3 { + grid-area: right; +} + +.item-1, .item-2, .item-3 { + border: 10px solid purple; + border-radius: 10px; + padding: 50px 50px 0px 50px; + display: grid; + margin-top: 30px; +} + +.grid a { + display: block; + text-align: center; + align-self: self-end; + padding: 10px; +} + +.read-more { + text-decoration: none; + background-color: purple; + padding: 10px 0; + font-size: 1.5em; + border-radius: 5px; + color: aliceblue; + transition-duration: 0.5s; +} + +.read-more:hover { + background-color: aliceblue; + color: purple; +} + +.repo { + margin-top: 10px; + margin-bottom: 20px; + color: purple; +} + +.experience { + height: 90vh; + background-color: rgb(224, 57, 57); +} + +.experience h1 { + text-align: center; + padding: 30px; + font-size: 2.2em; +} + +.exp-grid { + display: grid; + grid-template-columns: 1fr 1.5fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: + '. main .'; +} + +.exp-main{ + grid-area: main; +} + +.experience h2, p { + font-size: 20px; + padding: 10px; +} + +footer { + max-height: 10vh; + background-color: rgb(22, 22, 73); + color: aliceblue; + padding: 4vh; + padding-top: 5vh; + font-size: 1.5em; +} + +footer a { + text-decoration: none; + float: right; + color: aliceblue; +}