Design updates - minor

Minor edits were made in design/CSS. And responsive code.
link for a portfolio item was fixed in portfolio.json

index.html

@@ -306,7 +306,7 @@ <h4>Description:</h4>
 			<p class="details-box-description"></p>
 		</div>
 		<img src alt="thumbnail" />
-		<span class="fa fa-close"></span>
+		<span class="close">X - CLOSE</span>
 	 </div>
 	</div>
 
@@ -317,7 +317,7 @@ <h4>Description:</h4>
   <div id="contact">
    <h1><span class="fa fa-angle-right"></span>Contact</h1>
    <main>
-   <blockquote>Wanna hire me? Use the contact form below to write your word to me. Or check out others links to professional sites and social accounts below the Contact form. You can use them to contact me.</blockquote>
+   <blockquote>Wanna hire me? Use the contact form below to write your word to me. Or check out others links to professional sites and social accounts below the contact form. You can use them to contact me.</blockquote>
 	<h3>E-mail Me Now:</h3>
 	<form>
 		<input type="text" name="name" placeholder="Name" /></br></br>

portfolio.json

@@ -9,15 +9,15 @@
 },
 {
 	"title": "Rusted Byte",
-	"thumbnail": "./images/portfolio/rbt.png",
+	"thumbnail": "./images/portfolio/rbt.jpg",
 	"type": "blog",
 	"category": "dev",
 	"description": "A blog site featuring technical articles, how-to guides and more.",
 	"link": "http://www.rustedbyte.blogspot.com"
 },
 {
 	"title": "Rusted Byte",
-	"thumbnail": "./images/portfolio/rbt.png",
+	"thumbnail": "./images/portfolio/rbt.jpg",
 	"type": "blog",
 	"category": "dev",
 	"description": "A blog site featuring technical articles, how-to guides and more.",

scripts/script.js

@@ -84,7 +84,7 @@ $(document).ready(function () {
 			$(".details-box .details-box-description").html(ele.description);
 			$(".details-box").addClass("active");
 		});
-		$(".details-box .fa-close").on("click", function () {
+		$(".details-box .close").on("click", function () {
 			$(".details-box").removeClass("active");
 		});
 	})

styles/responsive.css

@@ -23,8 +23,8 @@
 		width: 97%;
 		margin-left: 0;
 	}
-	#portfolio main .details-box .fa-close {
-		top: -2%;
+	#portfolio main .details-box img {
+		width: 85%;
 	}
 	#contact form input, textarea {
 		width: 90%;

styles/style.css

@@ -212,7 +212,7 @@ div.view span:hover {
 #portfolio main .details-box {
 	background-color: rgba(0, 0, 0, 0.7);
 	position: fixed;
-	top: 100%;
+	top: 105%;
 	left: 0;
 	z-index: 1;
 	transition: 0.3s linear;
@@ -223,7 +223,7 @@ div.view span:hover {
 	height: 100%;
 	margin-top: 5%;
 	margin-left: 8%;
-	padding-top: 3%;
+	padding-top: 5%;
 	padding-left: 3%;
 	background-color: #FFF;
 }
@@ -237,14 +237,14 @@ div.view span:hover {
 	height: 100%;
 	top: 0;
 }
-#portfolio main .details-box .fa-close {
+#portfolio main .details-box .close {
+	color: #B90606;
 	position: absolute;
-	top: -4%;
+	top: 2%;
 	right: 2%;
-	background-color: rgb(218, 57, 57);
-	font-size: 32px;
+	font-size: 16px;
 	padding: 1%;
-	border-radius: 50%;
+	cursor: pointer;
 }
 #portfolio main .item .fa-link {
 	float: right;