aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--img/computer_inside.jpgbin642244 -> 362954 bytes
-rw-r--r--img/proxy.jpgbin616170 -> 264403 bytes
-rw-r--r--img/server_room.jpgbin107183 -> 43039 bytes
-rw-r--r--img/sever_rack2.jpgbin821951 -> 365669 bytes
-rw-r--r--img/switch.jpgbin265847 -> 198010 bytes
-rwxr-xr-xindex.html57
-rwxr-xr-xstyle.css96
7 files changed, 137 insertions, 16 deletions
diff --git a/img/computer_inside.jpg b/img/computer_inside.jpg
index d3ef487..94c16ef 100644
--- a/img/computer_inside.jpg
+++ b/img/computer_inside.jpg
Binary files differ
diff --git a/img/proxy.jpg b/img/proxy.jpg
index f87b4b5..7a42e1a 100644
--- a/img/proxy.jpg
+++ b/img/proxy.jpg
Binary files differ
diff --git a/img/server_room.jpg b/img/server_room.jpg
index 43b5139..e3a97d5 100644
--- a/img/server_room.jpg
+++ b/img/server_room.jpg
Binary files differ
diff --git a/img/sever_rack2.jpg b/img/sever_rack2.jpg
index 3788764..bcc5880 100644
--- a/img/sever_rack2.jpg
+++ b/img/sever_rack2.jpg
Binary files differ
diff --git a/img/switch.jpg b/img/switch.jpg
index 82935e6..8efa024 100644
--- a/img/switch.jpg
+++ b/img/switch.jpg
Binary files differ
diff --git a/index.html b/index.html
index c8fcb97..4b1acf7 100755
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
+ <title>Adjutech</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
@@ -52,7 +52,7 @@
<div class="text">I.T. Consulting</div>
</div>
- </div>
+ </div>
<br>
<div style="text-align:center">
@@ -60,7 +60,6 @@
<span class="dot"></span>
<span class="dot"></span>
</div>
- <script src="slideshow.js"></script>
<div id="desc-and-pic-container">
<div id="description">
@@ -70,23 +69,63 @@
<br/>
<img src="img/experience.png" alt="26 years experience working">
</div>
- <div id="picture">
+ <div id="server_rack_img">
<img src="img/sever_rack.jpg" alt="server racks">
</div>
</div>
+
<div id="project-list-container">
<div id="latest-title"><b>Latest Projects</b></div>
- <div id="menu-project">
+ <div id="menu-links">
<nav>
<a href="#"><b>All</b></a>
<a href="#"><b>Hardware</b></a>
<a href="#"><b>Servers</b></a>
</nav>
+ <div><a href="#"><i>View All Projects</i></a></div>
</div>
- <div><a href="#" id="view-all"><i>View All Projects</i></a></div>
- <div id="latest-project-pics"><img src="img/server_room.jpg" alt="server_room"></div>
</div>
- <div id="review-container"></div>
-
+
+ <div id="latest-project-pics">
+
+ <img id="server-room" src="img/server_room.jpg">
+
+ <img id="server-rack" src="img/sever_rack2.jpg">
+
+ <img id="proxy" src="img/proxy.jpg">
+
+ <img id="switch" src="img/switch.jpg">
+ </div>
+
+ <div id="review-container">
+ <p><b>From Great Our Clients</b></p>
+ <div id="reviews">
+ <div class="container">
+ <img src="img/customer_pics/" alt="Avatar" style="width:90px">
+ <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum reprehenderit temporibus atque sunt totam ratione blanditiis harum possimus repellendus cumque nihil, soluta culpa asperiores officia amet repellat magni, alias nam?</p>
+ </div>
+ <div class="container">
+ <img src="img/customer_pics/" alt="Avatar" style="width:90px">
+ <p><span>Rebecca Flex.</span> CEO at Company.</p>
+ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus possimus deleniti repellendus quas, ratione maiores esse quae reiciendis earum animi, cumque at ipsa sit perferendis ipsum aliquam tempora dolores temporibus.</p>
+ </div>
+ </div>
+ </div>
+
+ <div id="latest-news">
+ <p><b>Latest News</b></p>
+ <div id="latest-news-pics">
+ <img src="img/computer_inside.jpg" alt="inside_a_computer">
+ </div>
+ </div>
+
+ <footer>
+ <div id="logo">
+ <img src="img/logo.png" alt="adjutor technology"/>
+ </div>
+ </footer>
+
+ <script src="slideshow.js"></script>
</body>
</html> \ No newline at end of file
diff --git a/style.css b/style.css
index 66a183c..fd191b5 100755
--- a/style.css
+++ b/style.css
@@ -109,9 +109,11 @@ header{
max-width: 35%;
}
-#picture img{
- height: 100%;
- width: 100%;
+#server_rack_img img{
+ max-width: 80%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
@media screen and (min-width: 1000px) {
@@ -125,10 +127,9 @@ header{
#project-list-container{
display: flex;
- flex-wrap: wrap;
justify-content: space-around;
align-items: center;
- padding-top: 10px;
+ padding-top: 50px;
}
#project-list-container a {
@@ -136,7 +137,88 @@ header{
text-decoration: none;
}
+#menu-links nav {
+ display: none;
+}
+
+@media screen and (min-width: 530px) {
+ #menu-links {
+ display: flex;
+ justify-content: space-between;
+ }
+ #menu-links nav {
+ display: block;
+ padding-right: 10px;
+ }
+ #menu-links a {
+ padding-right: 5px;
+ }
+}
+
+
+#latest-project-pics{
+ display: flex;
+ justify-content: space-around;
+ align-items: stretch;
+ padding-top: 10px;
+}
#latest-project-pics img{
- height: 100%;
- width: 100%;
+ max-width: 20%;
+}
+
+#reviews {
+ display: flex;
+}
+
+.container {
+ border: 2px solid white;
+ background-color: black;
+ border-radius: 5px;
+ padding: 16px;
+ margin: 16px 0
+}
+
+.container::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.container img {
+ float: left;
+ margin-right: 20px;
+ border-radius: 50%;
+}
+
+.container span {
+ font-size: 20px;
+ margin-right: 15px;
+}
+
+@media (max-width: 500px) {
+ .container {
+ text-align: center;
+ }
+ .container img {
+ margin: auto;
+ float: none;
+ display: block;
+ }
+}
+
+#latest-news-pics {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#latest-news-pics img {
+ height: auto;
+ max-width: 35%;
+}
+
+footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
} \ No newline at end of file