Role4Initiative · Role4Initiative · Aug 5, 2021 · Aug 6, 2021 · Aug 9, 2021 · Aug 9, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Rusinowski"
+    ]
+}
diff --git a/img/project.jpg1.jpg b/img/project.jpg1.jpg
diff --git a/img/project.jpg2.jpg b/img/project.jpg2.jpg
diff --git a/img/project.jpg3.jpg b/img/project.jpg3.jpg
diff --git a/img/project.jpg4.jpg b/img/project.jpg4.jpg
diff --git a/img/projectbackgroundjpg.jpg.jpg b/img/projectbackgroundjpg.jpg.jpg
diff --git a/index.html b/index.html
@@ -2,10 +2,66 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style/index.css">
+    <title>Portfolio-Ben Rusinowski</title>
 </head>
 <body>
-
+    <header>
+        <h1>Hello World, I am Ben Rusinowski!</h1>
+        <nav>
+            <div class="links">
+                <button>
+                    <a href="index.html">Home</a>
+                </button>
+                <button>
+                    <a href="about.html">About</a>
+                </button>
+                <button>
+                    <a href="contact.html">Contact</a>
+                </button>
+                <button>
+                    <a href="projects.html">Projects</a>
+                </button>
+            </div>
+        </nav>
+        <h1>Formal Introductions are in order.</h1>
+        <p>My name is Ben Rusinowski, welcome to my portfolio site!<br><br>I am a full stack web developer learning new things and making a career path of my own.<br>Please enjoy my site.</p>
+    </header>
+    <Section id="top">
+        <img src="../img/projectbackgroundjpg.jpg.jpg" alt="Castle bridge entrance.">
+    </Section>
+    <section id="projects">
+        <div class="one">
+            <img src="../img/project.jpg1.jpg" alt="A blue circle hobbit door in a grassy hillside.">
+        </div>
+        <div class="two">
+            <img src="../img/project.jpg2.jpg" alt="Blue glowing mushrooms near a tree trunk.">
+        </div>
+        <div class="three">
+            <img src="../img/project.jpg3.jpg" alt="A girl in a white dress underwater looking up.">
+        </div>
+        <div class="four">
+            <img src="../img/project.jpg4.jpg" alt="A armored guard holding a flaming torch up standing in the entrance of a dungeon archway.">
+        </div>
+        <div class="five">
+            <p>Some text will<br>go here<br>describing all<br>of the projects<br>to the left</p>
+        </div>
+
+    </section>
+    <footer>
+        <div class="footerbuttons">
+            <button>
+                <a href="contact.html">Contact Me</a>
+            </button>
+            <div class="socials">
+                <a href=""></a>
+                <a href=""></a>
+                <a href=""></a>
+            </div>
+        </div>
+    </footer>
+
+
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,242 @@
-/* Add CSS styling here */
+/* Reset code start */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/* Reset code end */
+
+/* General styles */
+html{
+    font-size:62.5%;
+}
+*{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    max-width: 100%;
+}
+body{
+    font-size:1.6rem;
+    line-height:1.5;
+    background-color: whitesmoke;
+    color:#4f4f4f; 
+}
+h1{
+    font-size:5rem;
+    color: #4f4f4f;
+}
+p{
+    font-size: 2rem;
+    color: black;
+}
+
+/*Helper classes*/
+
+a{
+    text-decoration: none;
+    color: #4f4f4f;
+}
+h1{
+    padding: 2.5%;
+    text-align: center;
+}
+p{
+    padding-bottom: 2.8%;
+    text-align: center;
+}
+.bgimg{
+    background-size:cover;
+    background-repeat: no-repeat;
+}
+
+
+/* Header styles */
+nav{
+    text-decoration: none;
+    background-color: darkblue;
+    padding: .8%;
+    color: #4f4f4f;
+}
+.links{
+    display: flex;
+    justify-content: center;
+    flex-flow: row;
+    padding: .5%;
+}
+
+
+/* Top section styles */
+#top img{
+    object-fit: cover;
+    object-position: 50% 0;
+    height: auto;
+    width: 100%;
+    overflow: hidden;
+}
+/* Project section styles */
+#projects{
+    padding-right: .8%;
+    padding-bottom: .5%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+#projects img{
+    padding: .5%;
+    object-fit: cover;
+    object-position: 50% 0;
+    height: 100%;
+    width: auto;
+    overflow: hidden;
+}
+#projects p{
+    display: flex;
+    align-self: center;
+    text-align: center;
+    font-size: 2rem;
+    color: black;
+}
+.five{
+    text-align: center;
+}
+
+/* Footer styles */
+footer{
+    background-color: darkblue;
+    padding: 2.5%;
+}
+.footerbuttons{
+    text-align: center;
+    flex-direction: row;
+    font-size: 3rem;
+}
+button{
+    text-decoration: none;
+    background-color: white;
+    color: #4f4f4f;
+    padding: .5%;
+    border: 5px solid black;
+    border-radius: 999px;
+    font-size: 3rem;
+}
+button:hover{
+    background-color: lightseagreen;
+    color: blue;
+    padding: 1%;
+    border-radius: 0;
+    font-size: 3.5rem;
+}
+
+/*Media Queries go here*/
+/*
+desktop first design - means we scale down - we use max-width
+mobile first design - means we scale up - we use min-width
+*/
+/*tablet view - 800px*/
+/*when the screen size reaches 800px or smaller these rules apply*/
+@media (max-width: 800px){
+    *{
+        text-align: center;
+        font-size: 2.5rem;
+    }
+    #projects{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        padding: 2%;
+    }
+    .one{
+        order:1;
+        object-fit: cover;
+        height: auto;
+        width: 50%;
+        overflow: hidden;
+    }
+    .two{
+        order:1;
+        object-fit: cover;
+        height: auto;
+        width: 50%;
+        overflow: hidden;
+    }
+    .three{
+        order:2;
+        object-fit: cover;
+        height: auto;
+        width: 50%;
+        overflow: hidden;
+    }
+    .four{
+        order:2;
+        object-fit: cover;
+        height: auto;
+        width: 50%;
+        overflow: hidden;
+    }
+    .five{
+        order:3;
+        align-content: center;
+    }
+    .links{
+        display: flex;
+        justify-content: center;
+        flex-flow: column;
+    }
+    .footerbuttons{
+        flex-direction: column;
+    }
+}
+
+/*when the screen size reaches 500px or smaller these rules apply*/
+/*mobile view 500px*/
+@media (max-width: 500px){
+    *{
+        font-size: 2rem;
+    }
+    .footerbuttons{
+        flex-direction: column-reverse;
+    }
+}