diff options
| -rw-r--r-- | img/computer_inside.jpg | bin | 642244 -> 362954 bytes | |||
| -rw-r--r-- | img/proxy.jpg | bin | 616170 -> 264403 bytes | |||
| -rw-r--r-- | img/server_room.jpg | bin | 107183 -> 43039 bytes | |||
| -rw-r--r-- | img/sever_rack2.jpg | bin | 821951 -> 365669 bytes | |||
| -rw-r--r-- | img/switch.jpg | bin | 265847 -> 198010 bytes | |||
| -rwxr-xr-x | index.html | 57 | ||||
| -rwxr-xr-x | style.css | 96 |
7 files changed, 137 insertions, 16 deletions
diff --git a/img/computer_inside.jpg b/img/computer_inside.jpg Binary files differindex d3ef487..94c16ef 100644 --- a/img/computer_inside.jpg +++ b/img/computer_inside.jpg diff --git a/img/proxy.jpg b/img/proxy.jpg Binary files differindex f87b4b5..7a42e1a 100644 --- a/img/proxy.jpg +++ b/img/proxy.jpg diff --git a/img/server_room.jpg b/img/server_room.jpg Binary files differindex 43b5139..e3a97d5 100644 --- a/img/server_room.jpg +++ b/img/server_room.jpg diff --git a/img/sever_rack2.jpg b/img/sever_rack2.jpg Binary files differindex 3788764..bcc5880 100644 --- a/img/sever_rack2.jpg +++ b/img/sever_rack2.jpg diff --git a/img/switch.jpg b/img/switch.jpg Binary files differindex 82935e6..8efa024 100644 --- a/img/switch.jpg +++ b/img/switch.jpg @@ -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 @@ -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 |
