updating bitguard

1 year ago · 212c8cb5a2
parent 5d5696bc4f
commit 212c8cb5a2
5 changed files with 38 additions and 9 deletions
--- a/portfolio/bitguard/004-grid.webp
+++ b/portfolio/bitguard/004-grid.webp
--- a/portfolio/bitguard/005-logo.webp
+++ b/portfolio/bitguard/005-logo.webp
--- a/portfolio/bitguard/006-colors.webp
+++ b/portfolio/bitguard/006-colors.webp
--- a/portfolio/bitguard/index.html
+++ b/portfolio/bitguard/index.html
@ -18,11 +18,29 @@
 		<hr class="nonlines">
 <body>
 	<h1>BitGuard</h1>
-	<div class="image-container">
-			<img src="001-bitguard-banner.webp">
-			<img src="002-paper.webp">
-			<img src="003-nothing.webp">
-	</div>
+  <div class="nongallery">
+    <div class="image-container">
+      <img class="nonimage" src="004-grid.webp" alt="BitGuard">
+    </div>
+    <div class="image-container">
+		<img class="nonimage" src="005-logo.webp" alt="Sihu">
+    </div>
+    <div class="image-container">
+		<img class="nonimage" src="006-colors.webp" alt="WM Tours">
+    </div>
+  </div>
+  <div class="nongallery">
+    <div class="image-container">
+      <img class="nonimage" src="001-bitguard-banner.webp" alt="BitGuard">
+    </div>
+    <div class="image-container">
+		<img class="nonimage" src="002-paper.webp" alt="Sihu">
+    </div>
+    <div class="image-container">
+		<img class="nonimage" src="003-nothing.webp" alt="WM Tours">
+    </div>
+  </div>
+	<p>BitGuard is a cybersecurity firm that specializes in data protection by using advanced algorithms and proven techniques to avoid giving bad actors their customers' data. In an era dominated by constant hacking and cybersecurity threats, BitGuard stands in the front line in its battle. This portfolio item captures the essence of the brand by using calming but bold elements to signify the purpose of the brand.</p>
 		<hr class="nonline">
 		<div class="nonfooter">
 		<p class="footername">Sufyaan A.</p>
--- a/portfolio/style.css
+++ b/portfolio/style.css
@ -3,7 +3,7 @@ b,ol,p,ul{
 	margin-left: 7.5vw;
 	margin-right: 7.5vw;
 }
-body,h1{
+h1{
    color:#121212
 }
 h1 {
@ -27,9 +27,7 @@ a:link {
 }

 .image-container img {
-	width: auto;
  max-width: 100%;
-  height: auto;
  margin-bottom: 10px;
  flex: calc(33.33% - 10px);
  border-radius: 15px;
@ -79,7 +77,7 @@ a:hover {
  margin-top: -2.5%;
  font-size: 150%;
  transition: opacity 0.3s ease-in-out;
-  border-radius: 10px;
+  border-radius: 15px;
 }

 h1.image-details {
@ -97,6 +95,13 @@ margin-left: 7vw;
 margin-right: 7vw;
 	animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s 1.5s;
 }
+ .nongallery {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content:left;
+margin-left: 7vw;
+margin-right: 7vw;
+ }

 .image-container {
   position: relative;
@ -112,6 +117,12 @@ margin-right: 7vw;
   transition: transform 0.3s;
   border-radius: 10px;
 }
+ .nonimage {
+   width: 100%;
+   height: auto;
+   transition: transform 0.3s;
+   border-radius: 10px;
+ }

 .image-container:hover .image {
   transform: scale(1.2);