Added S16 Capstone1

individual/frontend/s16-s17/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

individual/frontend/s16-s17/capstone.json

@@ -1,6 +1,6 @@
 {
     "capstone": {
-        "liveLink":
+        "liveLink": "https://snaked2018.github.io/web-developer-portfolio/",
         "name": "Ron",
         "ismulti": false
     }

individual/frontend/s16-s17/index.css

@@ -0,0 +1,268 @@
+/* General Start */
+body {
+    font-family: 'Open Sans', sans-serif;
+}
+:root {
+    /* Branding Color */
+    --bg-primary: blue;
+    --bg-secondary: #fff;
+    --clr-neutral-100: rgb(236, 236, 236);
+    --clr-font-primary: rgb(131, 131, 131);
+
+    --box-shadow: 1px 1px 10px #ececec,
+    -1px -1px 10px #ffffff;
+
+    /* Font Styles */
+    --fs-primary: 'Open Sans', sans-serif;
+    --fs-secondary: 'Poppins', sans-serif;
+
+    /* Font Weight */
+    --ff-sz-300:  300;
+    --ff-sz-400:  500;
+    --ff-sz-600:  600;
+    --ff-sz-900:  900;
+    /* Font Size */
+    --fs-ld1: 3.875rem;
+    --fs-h1: 2.875rem;
+    --fs-h2: 2rem;
+    --fs-h6: 1.5rem;
+    --fs-p: 1.125rem;
+    --fs-p1: 1.25rem;
+    --fs-lp: 1rem;
+}
+.bg-primary {
+    background-color: var(--bg-primary) !important;
+}
+.bg-secondary {
+    background-color: var(--bg-secondary) !important;
+}
+.box-shadow {
+    box-shadow: var(--box-shadow);
+}
+.hd-1 {
+    font-size: var(--fs-ld1);
+    font-weight: var(--ff-sz-900);
+}
+.h1 {
+    font-size: var(--fs-h1);
+    font-weight: var(--ff-sz-600);
+}
+.h2 {
+    font-size: var(--fs-h2);
+    font-weight: var(--ff-sz-600);
+}
+.p-1 {
+    font-size: var(--fs-p);
+}
+span {
+    font-weight: var(--ff-sz-600);
+    color: var(--bg-primary);
+}
+.p {
+    font-size: var(--fs-p1);
+    font-style: var(--fs-primary);
+    color: var(--clr-font-primary);
+}
+.navbar {
+    padding: 0 !important;
+}
+.py-cus {
+    margin-top: 8rem;
+    width: 400px;
+}
+.py-cus-mobile {
+    margin: 5rem 0;
+    width: 350px;
+}
+.py-cus-mobile h1{
+    font-size: var(--fs-h1);
+    font-weight: var(--ff-sz-600);
+}
+.skills-container span {
+    color: var(--clr-font-primary);
+    
+}
+.html,.css,.javascript,.shopify,.wordpress,.github,.sqlbasics,.linux,.figma,.graphicdesign,.photoshop,.illustrator,.premiere {
+    color: rgb(103, 103, 103);
+    font-size: var(--fs-p);
+    line-height: 6rem;
+    padding: 18px;
+    border-radius: 5px;
+    background: #ffffff;
+    box-shadow:  1px 1px 10px #ececec,
+                -1px -1px 10px #ffffff;
+    margin: 10px 10px 10px 0px;
+    border: 3px solid blue;
+    }   
+@media (max-width: 567px) {
+    .navbar {
+        padding-left: 12px !important;
+    }    
+}  
+@media (max-width: 768px) {
+    .navbar-toggler {
+        display: block;
+    }
+    .navbar-collapse {
+        display: none;
+    }
+    .navbar-toggler.collapsed + .navbar-collapse {
+        display: block;
+    }
+    #landing {
+        display: none;
+    }
+}
+/* General End */
+.logo {
+    padding: 0;
+    width: 70px;
+    border-radius: 5px;
+}
+.logo-container {
+    width: 300px;
+    height: auto;
+    position: relative;
+}
+.logo-container strong,
+.logo-container p {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+}
+.logo-container strong {
+    top: -16px;
+    font-size: var(--fs-h1);
+    font-weight: var(--ff-sz-600);
+    font-family: var(--fs-secondary);
+}
+.logo-container p {
+    bottom: -22px;
+    font-size: var(--fs-h1);
+    font-family: var(--fs-secondary);
+    font-weight: var(--ff-sz-300);
+}
+ul li {
+    text-decoration: none;
+    list-style: none;
+    transition: 0.5s;
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+}
+ul li:hover {
+    background-color: var(--clr-neutral-100);
+    cursor: pointer;
+}
+@media (max-width: 1200px) {
+    .logo-container strong {
+        top: -5px;
+        font-size: var(--fs-h2);
+    }
+    .logo-container p {
+        bottom: -5px;
+        font-size: var(--fs-h2);
+    }
+}    
+@media (max-width: 768px) {
+    .navbar-toggler {
+        display: block;
+    }
+    .navbar-collapse {
+        display: none;
+    }
+    .navbar-toggler.collapsed + .navbar-collapse {
+        display: block;
+    }
+}
+/* Header End */
+#landing {
+    min-height: 87vh;
+    background-image: url('images/background.gif');
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+
+}
+@media (max-width: 1920px) {
+    .py-cus {
+        margin-top: 13rem !important;
+    }
+}   
+@media (max-width: 1600px) {
+    #landing {
+        min-height: 77vh;
+    }
+    .py-cus {
+        margin-top: 11rem !important;
+    }
+}    
+@media (max-width: 1440px) {
+    #landing {
+        min-height: 67vh;
+    }
+}    
+@media (max-width: 1200px) {
+    #landing {
+        min-height: 55vh;
+    }
+    .p-1 {
+        font-size: var(--fs-lp) !important;
+    }
+    .py-cus {
+        margin-top: 9rem !important;
+        width: 300px !important;
+    }
+}    
+@media (max-width: 992px) {
+    #landing {
+        min-height: 45vh;
+    }
+    .hd-1 {
+        font-size: var(--fs-h1) !important;
+    }
+    .p-1 {
+        font-size: var(--fs-lp) !important;
+    }
+    .py-cus {
+        margin-top: 6rem !important;
+        width: 250px !important;
+    }
+} 
+/* Tablet Display Settings */
+/* Display None =< Medium Screen */
+@media (min-width: 768px) {
+    #landing-mobile {
+        display: none;
+    }
+}  
+button {
+    font-size: var(--fs-p);
+    font-weight: 500;
+    padding: 10px 2rem 10px 2rem;
+    border: 2px solid blue;
+    background: blue;
+    color: white;
+    transition: 0.5s;
+    cursor: pointer;
+}
+button:hover {
+    background: white;
+    color: blue;
+}
+/* Main End */
+.footer {
+    background-color: var(--bg-primary);
+    color: white; 
+    padding: 30px 0;
+}
+#awesome i{
+    font-size: 2rem;
+    color: white;
+    transition: 0.5s;
+}
+#awesome i:hover {
+    color: var(--clr-font-primary);
+}
+/* Footer End */

individual/frontend/s16-s17/index.html

@@ -26,8 +26,8 @@
                 <div class="logo-container row">
                     <img src="images/logo.png" class="logo" alt="Ron Reciproco">
                     <div class="col d-none d-sm-inline-block">
-                        <strong>John</strong>
+                        <strong>Ron</strong>
-                        <p>Carter</p>
+                        <p>Reciproco</p>
                     </div>
                 </div>
               </a>
@@ -63,7 +63,7 @@
             </div>
             <div class="py-cus text-end">
                 <h1 class="hd-1">&lt;Coder&gt;</h1>
-                <p class="p p-1">Frontend developer who writes clean, elegant and efficient codes.</p>
+                <p class="p p-1">Full-Stack Web Developer who writes clean, elegant and efficient codes.</p>
             </div>
         </div>
     </section>
@@ -173,12 +173,12 @@
                     <!-- Email Address -->
                     <div class="form-group">
                         <label for="textInput">Email Address</label>
-                        <input type="text" class="form-control" id="textInput" placeholder="Enter text" required>
+                        <input type="text" class="form-control" id="textInput" placeholder="Enter Email" required>
                     </div>
                     <!-- Text Area -->
                     <div class="form-group">
                         <label for="textareaInput">Message</label>
-                        <textarea class="form-control" id="textareaInput" rows="4" placeholder="Enter text"></textarea>
+                        <textarea class="form-control" id="textareaInput" rows="4" placeholder="Message"></textarea>
                     </div>
                     <!-- Button -->
                     <button type="button" class="m-5" data-toggle="modal" data-target="#modalDiv">Submit</button>

individual/frontend/s16-s17/main.css

@@ -1,6 +1,6 @@
 #landing {
     min-height: 87vh;
-    background-image: url('images/background.gif');
+    background-image: url('images/background-2.gif');
     background-size: cover;
     background-repeat: no-repeat;
     display: flex;