diff --git a/images/arrow.png b/images/arrow.png new file mode 100644 index 0000000..82c9403 Binary files /dev/null and b/images/arrow.png differ diff --git a/images/p3.jpg b/images/p3.jpg new file mode 100644 index 0000000..3e9bc7d Binary files /dev/null and b/images/p3.jpg differ diff --git a/images/services-1.png b/images/services-1.png new file mode 100644 index 0000000..d9030ef Binary files /dev/null and b/images/services-1.png differ diff --git a/images/services-2.png b/images/services-2.png new file mode 100644 index 0000000..cbcaf2e Binary files /dev/null and b/images/services-2.png differ diff --git a/images/services-3.png b/images/services-3.png new file mode 100644 index 0000000..20d89da Binary files /dev/null and b/images/services-3.png differ diff --git a/images/team1.jpg b/images/team1.jpg new file mode 100644 index 0000000..8cde308 Binary files /dev/null and b/images/team1.jpg differ diff --git a/images/team2.jpg b/images/team2.jpg new file mode 100644 index 0000000..e8a0c5e Binary files /dev/null and b/images/team2.jpg differ diff --git a/images/team3.jpg b/images/team3.jpg new file mode 100644 index 0000000..8332519 Binary files /dev/null and b/images/team3.jpg differ diff --git a/images/team4.jpg b/images/team4.jpg new file mode 100644 index 0000000..560aec9 Binary files /dev/null and b/images/team4.jpg differ diff --git a/images/team5.jpg b/images/team5.jpg new file mode 100644 index 0000000..dc3a667 Binary files /dev/null and b/images/team5.jpg differ diff --git a/images/team6.jpg b/images/team6.jpg new file mode 100644 index 0000000..7cfcd58 Binary files /dev/null and b/images/team6.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fe9f6d9 --- /dev/null +++ b/index.html @@ -0,0 +1,109 @@ + + + + + + WebSite Development + + + + +
+ +
+ +
+ +
+
+ + + +
+

About Us

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, eveniet temporibus reprehenderit. Veniam sunt corrupti necessitatibus quam, quia doloribus nesciunt ut eveniet, alias aspernatur eum perferendis commodi doloremque recusandae tenetur quis cumque voluptatibus officiis ea excepturi dignissimos! Repellat molestias iusto dicta facere ipsum, harum maiores illum laborum tenetur? Explicabo, cupiditate!

+
Learn More
+
+ +
+

our Services

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, porro repellendus dolore repudiandae, accusantium corporis harum vel iste suscipit maiores provident ullam itaque libero minus nesciunt consequatur iusto numquam asperiores quod fugiat veniam blanditiis.

+
+
+ service_image +

Web Development

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ service_image +

App Development

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ service_image +

PSD to HTML

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+
+
+

contact us

+
+
+ +
+
+ +
+
+ +
+
+ Submit +
+
+
+ + +
+

our team

+
+
+
Team_Images
+
Team_Images
+
Team_Images
+
+
+
Team_Images
+
Team_Images
+
Team_Images
+
+
+
+ + +
+ © 2019 Coding Market +
+ + +
+ up_arrow +
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5f37a6f --- /dev/null +++ b/styles.css @@ -0,0 +1,256 @@ +@import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + outline: none; + list-style: none; + text-decoration: none; + font-family: 'Josefin Sans', sans-serif; +} + +h1.title{ + margin-bottom: 20px; + color: #444444; + font-family: 'Allura', cursive; + text-transform: uppercase; + font-size: 38px; + word-spacing: 25px; + letter-spacing: 5px; +} + +p{ + margin-bottom: 15px; + font-size: 14px; + line-height: 20px; + color: #a9a9a9; +} + +.btn a { + width: 180px; + height: 35px; + line-height: 35px; + border: 2px solid #fb2274; + color: #fb2274; + display: block; + margin: 25px auto 0; + text-align: center; +} + +.main_container{ + position: relative; +} + +/* Navigation Bar */ +.navbar{ + width: 100%; + height: 65px; + position: absolute; + display: flex; + justify-content: space-around; + align-items: center; +} + +.logo a{ + font-family: 'Allura', cursive; + font-size: 32px; + color: #fb2274; + transition: 0.5s; +} + +.logo a:hover { + color: white; +} + +.navbar_items ul{ + display: flex; +} + +.navbar_items ul li{ + margin: 0 10px; +} + +.navbar_items ul li a{ + text-transform: uppercase; + color: #fff; +} + +/* banner_image */ +.banner_image{ + background: url('images/p3.jpg') no-repeat top center; + background-size: cover; + width: 100%; + height: 600px; + display: flex; + justify-content: center; + align-items: center; +} + +.banner_content{ + text-align: center; + color: #fff; +} + +.banner_content h1{ + text-transform: uppercase; + line-height: 38px; + margin-bottom: 15px; +} + +.banner_content h1 span{ + color: #fb2274; +} + + +/* About */ +.about, +.services, +.contactus, +.ourteam{ + text-align: center; + padding: 5% 10%; +} + +/* Services */ +.services{ + background: #f5f5f5; +} + +.diff_services { + margin-top: 35px; + display: flex; + justify-content: space-between; +} + +.diff_services .diff_services_item { + width: 30%; +} + +.diff_services .diff_services_item img { + width: 100%; + margin-bottom: 25px; +} + +.diff_services .diff_services_item h3 { + color: #fb2274; + margin-bottom: 15px; +} + +/* Contact us */ +.form_wrapper .form_input{ + margin-bottom: 15px; +} + +.form_wrapper .form_input input[type="text"]{ + width: 250px; + padding: 12px 20px; + border: 1px solid #ccc; +} + +.form_wrapper .form_input textarea{ + width: 250px; + padding: 12px 20px; + height: 80px; + resize: none; + border: 1px solid #ccc; +} +/* our team */ +.ourteam{ + background: #f5f5f5; +} + +.ourteam_wrapper{ + display: flex; + flex-direction: column; +} + +.ourteam_wrapper .team{ + display: flex; + justify-content: space-between; +} + +.ourteam_wrapper .team-1.team{ + margin-bottom: 25px; +} + +.ourteam_wrapper .team_members{ + width: 30%; + height: auto; + cursor: pointer; + overflow: hidden; + position: relative; +} + +.ourteam_wrapper .team_members img{ + display: block; + width: 100%; + height: auto; + transition: all 0.5s ease; +} + +.ourteam_wrapper .team_members:hover img{ + transform: scale(1.1); +} + +/* footer */ +.footer{ + width: 100%; + text-align: center; + background: #444444; + padding: 20px 0; +} + +.footer a{ + color: #fff; +} + + + +@media (max-width: 720px){ + + .navbar{ + height: auto; + flex-direction: column; + } + + .logo{ + margin-bottom: 25px; + } + + .navbar_items ul{ + flex-direction: column; + text-align: center; + } + + .navbar_items ul li{ + margin-bottom:5px; + } + + .banner_content{ + margin-top: 35px; + } + +} + + +/* arrow */ +.arrow{ + position: fixed; + bottom: 25px; + right: 25px; + width: 40px; + height: 40px; + line-height: 50px; + text-align: center; + cursor: pointer; + background: #fb2274; + border-radius: 50%; + display: none; +} + +.arrow img{ + width: 20px; + height: 20px; + z-index: 1; +} \ No newline at end of file