diff --git a/Building Blocks.html b/Building Blocks.html new file mode 100644 index 0000000..e97e5fb --- /dev/null +++ b/Building Blocks.html @@ -0,0 +1,26 @@ + + + + Blocks Practice + + + +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + + diff --git a/Portfolio.html b/Portfolio.html new file mode 100644 index 0000000..6caf4f2 --- /dev/null +++ b/Portfolio.html @@ -0,0 +1,80 @@ + + + Portfolio + +
+

Jayne Doe

+

Masters of Shadow and Internet!

+
+
+ Profile Picture +
+ +

About...

+

Hello!! I am extremely driven and creative Full Stack developer + who is currently open for front-end or back-end web developer in the Greater Seattle Area. +
+ I am a recent graduate of Coding Dojo, a coding + school located in Bellevue, WA that teaches 3 full stacks + in three months. + I'm capable of learning new + technologies very quickly, amd am + always looking for + opportunities to further expand my skills + and grow as a developer.

+
+
+

LA MODE

+ image +

La MOde is an E commerce website for designed to market various + clothing products. Users are able to view the available garments, select + their desired quantity, and + compile a shopping cart for making a final purchase. +

+
+

Family Contacts

+ family picture +

Family Contacts is a free application for managing, sharing + and visualizing your family relationships foe both extended and + immediate family. As a essential feature of the project, your login information + determines who you can see and reveals how people are related to you. +

+ +
+
+

fiveEleven

+ img +

Five Eleven is a data visualizing project built on the Python software stack. The application transforms + the developer job-hunt into a more visual, user friendly experience. Based on location, + technology popularity, and the other vast data sets, users may easily visualize the varying + sizes and concentrations of the junior developer job market across the nation. + +

+ + + +
+ + + + + +
+ + + + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/portfolio.css b/portfolio.css new file mode 100644 index 0000000..da53e24 --- /dev/null +++ b/portfolio.css @@ -0,0 +1,63 @@ +*{ + padding: 0px; + margin: 0px;} + + .top-box{ + background-color: lightgray; + width: 1000px; + } +.big-box{ + background-color: rgb(72, 73, 73); + width: 1000px; + height: 1500px; +} + h1{ + display: inline-block; + font-family: "Comic Sans MS"; + } + + h2{ + display: block; + float: right; + } +img{ + display: inline-block; + float: left; +} + + +.about-me{ + border: solid black; + width: 500px; + height: 200px; + display: inline-block; + background-color: lightgray; + margin-left: 200px; + + +} +.left-box{ + border: solid black; + background-color: lightgrey; + width: 317px; + height: 325px; + display: inline-block; + float: left; +} + +.middle-box{ + border: solid black; + background-color: lightgrey; + width: 317px; + height: 325px; + display: inline-block; +} + +.right-box{ + border: solid black; + background-color: lightgrey; + width: 317px; + height: 390px; + display: inline-block; +} + diff --git a/style.css b/style.css index 7179b9d..34d6ecc 100644 --- a/style.css +++ b/style.css @@ -1,35 +1,92 @@ -/*CSS reset settings here*/ -*{ - margin: 0px; - padding: 0px; - } - #wrapper{ - width: 950px; - background-color: silver; - margin: 0px auto; - } - #header{ - min-height: 150px; - background-color: green; - } - #navigation{ - min-height: 300px; - width: 200px; - background-color: blue; - } - #main_content{ - min-height: 400px; - width: 700px; - background-color: red; - } - .subcontents{ - min-height: 200px; - width: 210px; - background-color: yellow; - } - #advertisement{ - min-height: 120px; - width: 660px; - background-color: purple; - } - \ No newline at end of file +*{outline: 0px dotted white; +margins: 0px; +padding: 0px;} + + + + +div.gray-wrapper { + width: 2000px; + height: 800px; + background-color: gray; + padding-top: 50px; + padding-left: 50px; + padding-right: 50px; +} +div.green-box { + width: 1500px; + height: 200px; + background-color: green; + border: solid black; + vertical-align: top; + margin-left: 100px; + margin-right: 50px; +} + + + +div.blue-box { + width: 200px; + height: 500px; + background-color: blue; + border: solid black; + display: inline-block; + margin-top: 50px; + margin-left: 50px; + margin-bottom: 200px; +} + +div.red-box{ + width: 1000px; + height: 400px; + background-color:red; + border: solid black; + display: inline-block; + margin-top: 50px; + margin-left: 100px; + + +} + +div.yellow-left{ + width: 200px; + height: 100px; + background-color:yellow; + border: solid black; + display: inline-block; + margin-top: 10px; + margin-left: 10px; + +} + + +div.yellow-middle{ + width: 200px; + height: 100px; + background-color:yellow; + border: solid black; + display: inline-block; + margin-top: 10px; + margin-left: 20px; + +} + +div.yellow-right{ + width: 200px; + height: 100px; + background-color:yellow; + border: solid black; + display: inline-block; + margin-top: 10px; + margin-left: 20px;} + + div.purple-box{ + width: 500px; + height: 100px; + background-color: purple ; + border: solid black; + margin-top: 200px; + margin-right: 100PX; + } + +