fikrcamp · mrfarah · Apr 3, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/img/20220403_114207.png b/img/20220403_114207.png
diff --git a/img/20220403_114230.png b/img/20220403_114230.png
diff --git a/img/20220403_114258 (1).png b/img/20220403_114258 (1).png
diff --git a/img/20220403_114258.png b/img/20220403_114258.png
diff --git a/img/6218bf339a0ee9a15242dc4e_WhatsApp Image 2022-02-25 at 11.35.47-p-1080.jpeg b/img/6218bf339a0ee9a15242dc4e_WhatsApp Image 2022-02-25 at 11.35.47-p-1080.jpeg
diff --git a/img/foodphoto.png b/img/foodphoto.png
diff --git a/img/photographer logo - Google Search.html b/img/photographer logo - Google Search.html
diff --git a/img/photographer logo - Google Search_files/cb=gapi.loaded_0 b/img/photographer logo - Google Search_files/cb=gapi.loaded_0
diff --git a/img/photographer logo - Google Search_files/dark_thumbnail2.png b/img/photographer logo - Google Search_files/dark_thumbnail2.png
diff --git a/img/photographer logo - Google Search_files/device_default_thumbnail2.png b/img/photographer logo - Google Search_files/device_default_thumbnail2.png
diff --git a/img/photographer logo - Google Search_files/faviconV2 b/img/photographer logo - Google Search_files/faviconV2
diff --git a/img/photographer logo - Google Search_files/faviconV2(1) b/img/photographer logo - Google Search_files/faviconV2(1)
diff --git a/img/photographer logo - Google Search_files/images b/img/photographer logo - Google Search_files/images
diff --git a/img/photographer logo - Google Search_files/images(1) b/img/photographer logo - Google Search_files/images(1)
diff --git a/img/photographer logo - Google Search_files/images(10) b/img/photographer logo - Google Search_files/images(10)
diff --git a/img/photographer logo - Google Search_files/images(11) b/img/photographer logo - Google Search_files/images(11)
diff --git a/img/photographer logo - Google Search_files/images(12) b/img/photographer logo - Google Search_files/images(12)
diff --git a/img/photographer logo - Google Search_files/images(13) b/img/photographer logo - Google Search_files/images(13)
diff --git a/img/photographer logo - Google Search_files/images(14) b/img/photographer logo - Google Search_files/images(14)
diff --git a/img/photographer logo - Google Search_files/images(15) b/img/photographer logo - Google Search_files/images(15)
diff --git a/img/photographer logo - Google Search_files/images(16) b/img/photographer logo - Google Search_files/images(16)
diff --git a/img/photographer logo - Google Search_files/images(17) b/img/photographer logo - Google Search_files/images(17)
diff --git a/img/photographer logo - Google Search_files/images(18) b/img/photographer logo - Google Search_files/images(18)
diff --git a/img/photographer logo - Google Search_files/images(19) b/img/photographer logo - Google Search_files/images(19)
diff --git a/img/photographer logo - Google Search_files/images(2) b/img/photographer logo - Google Search_files/images(2)
diff --git a/img/photographer logo - Google Search_files/images(20) b/img/photographer logo - Google Search_files/images(20)
diff --git a/img/photographer logo - Google Search_files/images(21) b/img/photographer logo - Google Search_files/images(21)
diff --git a/img/photographer logo - Google Search_files/images(22) b/img/photographer logo - Google Search_files/images(22)
diff --git a/img/photographer logo - Google Search_files/images(23) b/img/photographer logo - Google Search_files/images(23)
diff --git a/img/photographer logo - Google Search_files/images(24) b/img/photographer logo - Google Search_files/images(24)
diff --git a/img/photographer logo - Google Search_files/images(25) b/img/photographer logo - Google Search_files/images(25)
diff --git a/img/photographer logo - Google Search_files/images(26) b/img/photographer logo - Google Search_files/images(26)
diff --git a/img/photographer logo - Google Search_files/images(27) b/img/photographer logo - Google Search_files/images(27)
diff --git a/img/photographer logo - Google Search_files/images(28) b/img/photographer logo - Google Search_files/images(28)
diff --git a/img/photographer logo - Google Search_files/images(29) b/img/photographer logo - Google Search_files/images(29)
diff --git a/img/photographer logo - Google Search_files/images(3) b/img/photographer logo - Google Search_files/images(3)
diff --git a/img/photographer logo - Google Search_files/images(30) b/img/photographer logo - Google Search_files/images(30)
diff --git a/img/photographer logo - Google Search_files/images(31) b/img/photographer logo - Google Search_files/images(31)
diff --git a/img/photographer logo - Google Search_files/images(32) b/img/photographer logo - Google Search_files/images(32)
diff --git a/img/photographer logo - Google Search_files/images(33) b/img/photographer logo - Google Search_files/images(33)
diff --git a/img/photographer logo - Google Search_files/images(34) b/img/photographer logo - Google Search_files/images(34)
diff --git a/img/photographer logo - Google Search_files/images(35) b/img/photographer logo - Google Search_files/images(35)
diff --git a/img/photographer logo - Google Search_files/images(36) b/img/photographer logo - Google Search_files/images(36)
diff --git a/img/photographer logo - Google Search_files/images(37) b/img/photographer logo - Google Search_files/images(37)
diff --git a/img/photographer logo - Google Search_files/images(38) b/img/photographer logo - Google Search_files/images(38)
diff --git a/img/photographer logo - Google Search_files/images(39) b/img/photographer logo - Google Search_files/images(39)
diff --git a/img/photographer logo - Google Search_files/images(4) b/img/photographer logo - Google Search_files/images(4)
diff --git a/img/photographer logo - Google Search_files/images(40) b/img/photographer logo - Google Search_files/images(40)
diff --git a/img/photographer logo - Google Search_files/images(41) b/img/photographer logo - Google Search_files/images(41)
diff --git a/img/photographer logo - Google Search_files/images(42) b/img/photographer logo - Google Search_files/images(42)
diff --git a/img/photographer logo - Google Search_files/images(43) b/img/photographer logo - Google Search_files/images(43)
diff --git a/img/photographer logo - Google Search_files/images(5) b/img/photographer logo - Google Search_files/images(5)
diff --git a/img/photographer logo - Google Search_files/images(6) b/img/photographer logo - Google Search_files/images(6)
diff --git a/img/photographer logo - Google Search_files/images(7) b/img/photographer logo - Google Search_files/images(7)
diff --git a/img/photographer logo - Google Search_files/images(8) b/img/photographer logo - Google Search_files/images(8)
diff --git a/img/photographer logo - Google Search_files/images(9) b/img/photographer logo - Google Search_files/images(9)
diff --git a/img/photographer logo - Google Search_files/light_thumbnail2.png b/img/photographer logo - Google Search_files/light_thumbnail2.png
diff --git a/img/photographer logo - Google Search_files/m=_b,_tp b/img/photographer logo - Google Search_files/m=_b,_tp
diff --git a/img/photographer logo - Google Search_files/rs=AA2YrTtjMF9WQwiK6CWnW4NDlTfNmKzm3w b/img/photographer logo - Google Search_files/rs=AA2YrTtjMF9WQwiK6CWnW4NDlTfNmKzm3w
diff --git a/img/photographer logo - Google Search_files/rs=AA2YrTup3RJMCvI-FqyI7ts_cgaGMTRbSA b/img/photographer logo - Google Search_files/rs=AA2YrTup3RJMCvI-FqyI7ts_cgaGMTRbSA
@@ -0,0 +1 @@
+.gb_Qe{background:rgba(60,64,67,0.90);-webkit-border-radius:4px;border-radius:4px;color:#ffffff;font:500 12px 'Roboto',arial,sans-serif;letter-spacing:.8px;line-height:16px;margin-top:4px;min-height:14px;padding:4px 8px;position:absolute;z-index:1000;-webkit-font-smoothing:antialiased}.gb_ee{text-align:left}.gb_ee>*{color:#bdc1c6;line-height:16px}.gb_ee div:first-child{color:white}.gb_Sa{-webkit-animation-duration:3.875s;animation-duration:3.875s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;animation-play-state:running;background-color:transparent;-webkit-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5);height:32px;position:absolute;width:32px}.gb_ha .gb_Sa{-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}.gb_Ta{-webkit-animation-name:pulse_primary;animation-name:pulse_primary}.gb_Ua{-webkit-animation-name:pulse_secondary;animation-name:pulse_secondary}.gb_ha .gb_Ta{-webkit-animation-name:d_pulse_primary;animation-name:d_pulse_primary}.gb_ha .gb_Ua{-webkit-animation-name:d_pulse_secondary;animation-name:d_pulse_secondary}@keyframes pulse_primary{33%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(217,48,37,0.5);box-shadow:0 0 0 4px rgba(217,48,37,0.5)}66%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes pulse_secondary{10%{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}43%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(217,48,37,0.5);box-shadow:0 0 0 4px rgba(217,48,37,0.5)}76%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes d_pulse_primary{32%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(238,103,92,.5);box-shadow:0 0 0 4px rgba(238,103,92,.5)}64%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes d_pulse_secondary{10%{-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}42%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(238,103,92,.5);box-shadow:0 0 0 4px rgba(238,103,92,.5)}74%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}sentinel{}
diff --git a/img/photographer logo - Google Search_files/unnamed.jpg b/img/photographer logo - Google Search_files/unnamed.jpg
diff --git a/index.html b/index.html
@@ -8,6 +8,104 @@
     <link rel="stylesheet" href="style/style.css" />
   </head>
   <body>
-    <!-- start here -->
+    <!-- This is heading parts -->
+  <header class="nav-bar">
+    <img class="logo" src="img/foodphoto.png" alt="Food photographer">
+
+    <div>
+      <ul class="nav">
+        <li>Services</li>
+        <li>Contact</li>
+        <li>About me</li>
+
+      </ul>
+
+    </div>
+      <button class="btn">Connect</button>
+  </header>
+    <!-- This is heading parts -->
+
+    <!-- Main -->
+    <main class="main-section">
+      <h2>My work</h2>
+      <div class="main-content" >
+        <img class="img" src="img/20220403_114207.png" alt="">
+         <img class="img" src="img/20220403_114230.png" alt="">
+          <img class="img" src="img/20220403_114258 (1).png" alt="">
+      </div>
+
+
+
+    </main>
+
+    <div class="text-show">
+      <h4 class="h4">Why work whith me?</h4>
+      <div class="show-text">
+        <p class="lorem">Lorem ipsum dolor sit amet consequaerat quasi ullam aperiam!</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Venia</p>
+    </div>
+    </div>
+
+
+
+
+
+    <!-- Main -->
+    <!-- Testimonial section -->
+    <section>
+       <div class="testimonia-text"> 
+      <h3 class="testimonia">Testimonial</h3>
+      <div class="testmonia-text">
+        <h2 class="h4">Your madcam in safe hand</h2>
+        <p>Here are a few lines from people we've worked in</p>
+        </div>
+        </div>
+        <div class="main-text">
+          <div>
+            <img class="img" src="img/6218bf339a0ee9a15242dc4e_WhatsApp Image 2022-02-25 at 11.35.47-p-1080.jpeg">
+          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam dolor nihil saepe quisquam labore illo officia velit quidem recusandae at!</p>
+        </div>
+        <div>
+          <img class="img" src="img/6218bf339a0ee9a15242dc4e_WhatsApp Image 2022-02-25 at 11.35.47-p-1080.jpeg" alt="">
+          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt natus eaque dolorum aliquam necessitatibus ut odit ea modi, harum earum!</p>
+        </div>
+        <div>
+            <img class="img" src="img/6218bf339a0ee9a15242dc4e_WhatsApp Image 2022-02-25 at 11.35.47-p-1080.jpeg">
+          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam dolor nihil saepe quisquam labore illo officia velit quidem recusandae at!</p>
+        </div>
+        </div>
+
+
+
+    </section>
+
+
+
+
+
+     <!-- Testimonial section -->
+     <!-- Footer part -->
+     <footer>
+      <div class="footer">
+        <div><img src="img/foodphoto.png" alt="logo" class="logo" /></div>
+        <div>
+          <ul>
+            <li>Home</li>
+            <li>About</li>
+            <li>Contact</li>
+          </ul>
+        </div>
+        <div>
+          <h4>Address</h4>
+          <p>Jigjiga Yar</p>
+          <p>Hargesia, Somaliland</p>
+        </div>
+      </div>
+      <div class="copyright">Copyright &copy;2022</div>
+    </footer>
+     <!-- Footer part -->
+
+
+
   </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Lobster&family=Merienda&display=swap');
+ .logo {
+  height: 150px;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 10px 0px;
+  background: white;
+  border-bottom: 1px solid #d8d8d8;
+}
+
+.nav {
+  display: flex;
+  gap: 10px;
+}
+.nav li {
+  list-style-type: none;
+}
+
+.nav li:hover {
+  cursor: pointer;
+  color: #004ca6;
+}
+
+.btn {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 5px;
+  background: black;
+  color: white;
+}
+/* Main css */
+.main-section {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+
+}
+.main-content{
+  display: flex;
+  flex-direction: row;
+  width: 70px;
+ gap: 20px;
+  justify-content: center;
+
+}
+.img{
+  width:300px;
+}
+.main-text{
+  display: flex;
+ justify-content: center;
+}
+
+.text-show {
+  display: flex;
+  flex-direction: row;
+justify-content: center;
+
+
+}
+ .text-show div{
+  width: 30%;
+text-align: center;
+ padding-left: 100px;
+margin: 10px;
+
+}
+.lorem{
+  margin-bottom: 50px;
+  font-family: 'Inter', sans-serif;
+font-size:xx-large;
+
+}
+.h4{
+  display: flex;
+  align-items: center; 
+ flex-direction: column;
+ text-align: center;
+} 
+/*testmonia css*/
+.testimonia-text{
+  display: flex;
+ justify-content: center;
+}
+.testimonia{
+  width: 50%;
+  text-align: center;
+}
+.main-text{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap:40px;
+  margin: 10px;
+  padding-top: 20px;
+  text-align: center;
+  border-radius: 20px;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+}
+
+
+/*testmonia css*/
+/* footer css */
+footer {
+  font-size: 15px;
+}
+.footer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 20px 0px;
+}
+
+.footer ul li {
+  list-style-type: none;
+}
+.footer ul li:hover {
+  cursor: pointer;
+  color: #004ca6;
+}
+.copyright {
+  text-align: center;
+  border-top: 1px solid #d8d8d8;
+  padding: 5px 0px;
+  font-size: 12px;
+  font-weight: bold;
+}
+/* footer css */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		.gb_Qe{background:rgba(60,64,67,0.90);-webkit-border-radius:4px;border-radius:4px;color:#ffffff;font:500 12px 'Roboto',arial,sans-serif;letter-spacing:.8px;line-height:16px;margin-top:4px;min-height:14px;padding:4px 8px;position:absolute;z-index:1000;-webkit-font-smoothing:antialiased}.gb_ee{text-align:left}.gb_ee>*{color:#bdc1c6;line-height:16px}.gb_ee div:first-child{color:white}.gb_Sa{-webkit-animation-duration:3.875s;animation-duration:3.875s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;animation-play-state:running;background-color:transparent;-webkit-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5);height:32px;position:absolute;width:32px}.gb_ha .gb_Sa{-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}.gb_Ta{-webkit-animation-name:pulse_primary;animation-name:pulse_primary}.gb_Ua{-webkit-animation-name:pulse_secondary;animation-name:pulse_secondary}.gb_ha .gb_Ta{-webkit-animation-name:d_pulse_primary;animation-name:d_pulse_primary}.gb_ha .gb_Ua{-webkit-animation-name:d_pulse_secondary;animation-name:d_pulse_secondary}@keyframes pulse_primary{33%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(217,48,37,0.5);box-shadow:0 0 0 4px rgba(217,48,37,0.5)}66%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes pulse_secondary{10%{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}43%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(217,48,37,0.5);box-shadow:0 0 0 4px rgba(217,48,37,0.5)}76%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes d_pulse_primary{32%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(238,103,92,.5);box-shadow:0 0 0 4px rgba(238,103,92,.5)}64%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}@keyframes d_pulse_secondary{10%{-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}42%{-webkit-animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);animation-timing-function:cubic-bezier(0.0,0.0,0.2,1);-webkit-box-shadow:0 0 0 4px rgba(238,103,92,.5);box-shadow:0 0 0 4px rgba(238,103,92,.5)}74%{-webkit-animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);animation-timing-function:cubic-bezier(0.4,0.0,0.2,1);-webkit-box-shadow:0 0 0 0 rgba(238,103,92,.5);box-shadow:0 0 0 0 rgba(238,103,92,.5)}to{-webkit-box-shadow:0 0 0 0 rgba(217,48,37,0.5);box-shadow:0 0 0 0 rgba(217,48,37,0.5)}}sentinel{}