Add cargo design agency files

parkejunior · Nov 18, 2022 · 41fb578 · 41fb578
1 parent 1e09c17
commit 41fb578
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 0 deletions.
diff --git a/css/cargo-design-agency/yara/images/logo.svg b/css/cargo-design-agency/yara/images/logo.svg
diff --git a/css/cargo-design-agency/yara/index.css b/css/cargo-design-agency/yara/index.css
@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+body {
+  background-color: #000000;
+  color: white;
+  font-family: 'Poppins', sans-serif;
+
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 10px;
+  /* border: 1px solid green; */
+}
+
+.top-links {
+  display: flex;
+  justify-content: space-around;
+  padding: 0px 20px;
+  width: 300px;
+  padding-top: 13px;
+   /* border: 1px solid red; */
+}
+
+.top-settings {
+  font-size: 13px;
+}
+
+
+.top-right button {
+  margin-left: 20px;
+}
+
+.description button {
+  margin-top: 30px;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+   /* border: 1px solid plum; */
+}
+
+.images {
+  width: 30px;
+  height: 30px;
+}
+
+.case-studies {
+  display: flex;
+  justify-content: space-between;
+  margin: 5px 50px;
+  /* border: 1px solid yellow; */
+}
+
+.black-card {
+  border:1px solid gray;
+  border-radius: 20px;
+  padding: 20px;
+  margin: 10px;
+  width: 500px;
+}
+
+.blue-card {
+  border:1px solid #3778f1;
+  background-color:#3778f1;
+  border-radius: 20px;
+  padding: 20px;
+  margin: 10px;
+  width: 500px;
+}
+
+.collections-cards {
+  display: flex;
+  margin: 5px 40px;
+   /* border: 1px solid yellow; */
+}
+
+.gray-letters {
+  color:  #929292;
+}
+
+.description {
+  text-align: center;
+  width: 400px;
+  height: 300px;
+  /* border: 1px solid orange; */
+}
+
+.botton-text {
+  padding: 1px 10px 20px 10px;
+  font-size: 15px;
+  /* color: red; */
+}
+
+h1 {
+  font-weight: 500;
+}
+
+h2 {
+  /* border: 1px solid pink; */
+  margin-bottom: 3px;
+  font-weight: 500;
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
+
+span {
+  color:  #929292;
+}
+
+button {
+  background-color: #3778f1;
+  border-radius: 35px;
+  color: white;
+  padding: 8px 25px;
+}
+
diff --git a/css/cargo-design-agency/yara/index.html b/css/cargo-design-agency/yara/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="index.css"> 
+  <script src="https://kit.fontawesome.com/c2da523f98.js" crossorigin="anonymous"></script>
+  <title>Cargo Design Agency</title>
+</head>
+<body>
+
+
+
+  <nav class="top">
+    <div><img class="images" src="images/logo.svg"> |hello@cargo.io </div> 
+    <div class="top-links">
+      <a href="#"><span>Product</span></a>
+      <a href="#">Our Work</a>
+      <a href="#"><span>Services</span></a>
+    </div>
+    <div class="top-right">
+      <a href="#">FAQ</a>
+      <button>Get Started</button>
+    </div>
+  </nav>
+
+
+  <div class="main-container">
+    <div  class="description">
+      <div>
+        <h1>Cargo <span>Design</span> Agency</h1>
+        <div>Ahead with 100+ Amazing clients with 20+ Coutry
+         Served the best design materials
+        </div>
+        <button>Get Started</button>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="case-studies">
+    <h2>Case Studies</h2>
+    <a href="#">View All</a>
+  </div>
+
+  <div class="collections-cards">
+    <div class="black-card">
+      <div class="gray-letters">
+        TECHNOLOGY 
+        Dashboard
+      </div>
+      <h2>Google</h2>
+      <div class="botton-text gray-letters"> Best technology results drive web desig
+       gray-letters and marketing agency </div>
+      <a>View Case Study  <i class="fa-solid fa-arrow-right-long"></i></a>
+      </div>
+
+    <div class="blue-card">
+      <div>
+        FINANCE 
+        Mobile App
+      </div>
+      <h2>Dunkins Tech</h2>
+      <div class="botton-text">Using a proven method of innovative design
+      marketing strategies
+      </div>
+      <a>View Case Study <i class="fa-solid fa-arrow-right-long"></i></a>
+    </div>
+
+    <div class="black-card">
+      <div class="gray-letters">
+        TRAVEL  
+        Mobile App
+      </div>
+      <h2>Nokia Gadget</h2>
+      <div class="botton-text gray-letters">Build Customise and play Using plug data
+      Driven customers 
+      </div>
+      <a>View Case Sutudy <i class="fa-solid fa-arrow-right-long"></i></a>
+    </div>
+  </div>
+
+
+</body>
+</html>