challenge 01 added

71ba4032 · Kristijan Gelmanovski · 24d7f4e5 · 71ba4032 · 71ba4032 · 71ba4032
Commit 71ba4032 authored 1 year ago by Kristijan Gelmanovski
Hide whitespace changes
Inline Side-by-side

Showing

with 316 additions and 0 deletions
+316 -0
--- a/Challenge01/apple-devices.png
+++ b/Challenge01/apple-devices.png
--- a/Challenge01/apple-logo.png
+++ b/Challenge01/apple-logo.png
--- a/Challenge01/apple-logo2.jpg
+++ b/Challenge01/apple-logo2.jpg
--- a/Challenge01/index.html
+++ b/Challenge01/index.html
+<!DOCTYPE html>
+<html  lang="en">
+    <head>
+        <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Apple Products</title>
+        <script src="https://kit.fontawesome.com/4dddc47b6f.js"></script>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+
+    <body>
+    <div class="clear">
+        <div class="header">
+            <img src="./apple-logo.png" alt="" class="apple-logo">
+
+            <span class="navbar">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#ipad">iPad</a></li>
+                    <li><a href="#iphone">iPhone X</a></li>
+                    <li><a href="#macbook">MacBookAir</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </span>
+        </div>
+    </div>  
+    
+        <div class="devices-container">
+            <img src="./apple-devices.png" alt="Apple Devices" class="apple-devices" />
+        </div>
+
+    <div class="clear">
+        <div class="content-header">
+            <div class="mac-book">
+                <i class="fa-solid fa-laptop devices"></i>
+                <p><b>MacBookAir</b></p>
+            </div>
+
+            <div class="ipad">
+                <i class="fa-solid fa-tablet-screen-button devices"></i>
+                <p><b>iPad</b></p>
+            </div>
+    
+            <div class="iphone">
+                <i class="fa-solid fa-mobile-screen-button devices"></i>
+                <p><b>iPhone X</b></p>
+            </div>
+
+            <div class="about">
+                <i class="fa-regular fa-comments devices"></i>
+                <p><b>About</b></p>
+            </div>
+        </div>
+    </div>
+
+    <div class="clear">
+        <div class="content">
+            <div class="lightBlue">
+                <img src="./tablet.png" alt="Tablet" class="tablet" />
+            </div>
+    
+            <div id="ipad" class="ipadText">
+                <span class="captions"><p><b>iPad</b></p></span>
+                <p>
+                    iPad is a line of tablet computers designed, developed and marketed by
+                    Apple Inc., which run the IOS mobile operating system.The first iPad was
+                    released on April 3,2010; the most recent iPad models are ipad (2018),
+                    released on March 27,2018,the 10.5-inch (270mm) and 12.9-inch (330mm) 2G
+                    iPad Pro released on June 13,2017.The user interface is build around the
+                    device's multi-touch screen,including a virtual keyboard.All iPads can
+                    connect via Wi-Fi; some models also have cellular connectivity.
+                </p>
+            </div>
+    
+            <div id="iphone" class="iphoneText">
+                <span class="captions"><p><b>iPhone X</b></p></span>
+                <p>
+                    iPhone X is a smartphone designed, and marked by Apple Inc. It was announced on September 12, 2017, alongside the iPhone 8 and iPhone 8 Plus at the Steve Jobs Theater in the Apple Park campus.The phone was released on November 3, 2017. This device marks the iPhone series' tenth anniversary, with "X" being the symbol for "ten" in Roman numerals.
+                </p>
+            </div>
+    
+            <div class="lightBlue">
+                <img src="./iphoneX.png" alt="iPhone X" class="iphoneX">
+            </div>
+    
+            <div class="lightBlue">
+                <img src="./macbook.png" alt="MacBookAir" class="macbook">
+            </div>
+    
+            <div id="macbook" class="macbookText">
+                <span class="captions"><p><b>MacBookAir</b></p></span>
+                <p>
+                    the MacBook Air is a line of Macintosh subnotebook computer developed and manufactured by Apple Inc. It consist of a full-size keyboard , a machined aluminum case,and a thin light structure. The Air is available with a screen size of (measured diagonally) 13.3in (33.782cm) with different specifications produced by Apple. Since 2011, all MacBook Air models have used solid-state drive storage and intel Core i5 or i7 CPUs.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div class="clear">
+        <div class="content-footer">
+            <div class="team">
+                <span class="captions"><p><b>Team</b></p></span>
+                <p class="bg-white">80,000+ employees are working for Apple around the world</p>
+            </div>
+        
+            <div class="salary">
+                <span class="captions"><p><b>Salary</b></p></span>
+                <p class="bg-white">US&#36 125,000 a year is the average employee salary at Apple HQ</p>
+            </div>
+        
+            <div class="earnings">
+                <span class="captions"><p><b>Earnings</b></p></span>
+                <p class="bg-white">US&#36 300,000 per minute. This is the earning of Apple</p>
+            </div>
+        </div>
+    </div>
+
+        <div class="contactContainer">
+            <div id="contact" class="socialMedia">
+                <a href="https://www.facebook.com/apple/" target="_blank"><i class="fa-brands fa-facebook-f "></i></a>
+                <a href="https://www.apple.com/mk/" target="_blank"> <i class="fa-brands fa-google-plus-g"></i></a>
+                <a href="https://twitter.com/apple?lang=en" target="_blank"><i class="fa-brands fa-twitter"></i></a>
+                <a href="https://www.youtube.com/user/Apple/videos" target="_blank"><i class="fa-brands fa-youtube"></i></a>
+                <a href="https://www.instagram.com/apple/?hl=en" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+            </div>
+        </div>
+
+        <div class="footer">
+            <span class="footer-text">
+                &copy; Apple 2019
+            </span>
+        </div>
+    </body>
+</html>
\ No newline at end of file
--- a/Challenge01/iphoneX.png
+++ b/Challenge01/iphoneX.png
--- a/Challenge01/macbook.png
+++ b/Challenge01/macbook.png
--- a/Challenge01/style.css
+++ b/Challenge01/style.css
+body {
+    background-color:rgb(94, 135, 168);
+    margin: 0;
+}
+
+.header {
+    overflow: auto;
+    padding-left: 70px;
+    padding-right: 70px;
+}
+
+.apple-logo {
+    float: left;
+    max-width: 100%;
+    height: 30px;
+}
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 20 0 0 0px;
+    float: right;
+}
+
+.navbar li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+.navbar li:last-child {
+    margin-right: 0;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: white;
+}
+
+.navbar a:hover {
+    color: rgba(211, 211, 211, 0.521);
+    text-decoration: underline;
+}
+
+.devices-container {
+    height: 300px;
+    position: relative;
+}
+
+.apple-devices {
+    height: 70%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.content-header, .content {
+    width: 100%;
+    position: relative;
+}
+
+.content-header div {
+    text-align: center;
+    width: 25%;
+    float: left;
+    box-sizing: border-box;
+    height: 6em;
+    padding: 10px;
+}
+
+.devices {
+    font-size: 40px;
+}
+
+.mac-book {
+    background-color: gainsboro;
+}
+
+.ipad, .iphoneText, .salary {
+    background-color: rgb(186, 187, 170);
+}
+
+.iphone, .earnings {
+    background-color: rgba(177, 253, 228, 0.801);
+}
+
+.about, .ipadText, .team {
+    background-color:rgba(211, 211, 211, 0.5);
+}
+
+.content div {
+    box-sizing: border-box;
+    padding: 50px 10px;
+    height: 300px;
+    text-align: center;
+}
+
+.lightBlue, .ipadText, .iphoneText, .macbookText {
+    width: 50%;
+    float: left;
+    color: white;
+}
+
+.lightBlue img, .iphoneX, .macbook {
+    max-width: 100%;
+    height: 200px;
+}
+
+.lightBlue {
+    background-color: rgb(187, 210, 218);
+}
+
+.macbookText {
+    background-color:rgb(248, 170, 141);
+}
+
+.content-footer {
+    overflow: hidden;
+    width: 100%;
+}
+
+.team, .salary, .earnings {
+    text-align: center;
+    float: left;
+    width: 33.33%;
+    box-sizing: border-box;
+    padding: 50px 10px;
+}
+
+.contactContainer {
+    height: 150px;
+    width: 100%;
+    position: relative;
+}
+
+.socialMedia {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.socialMedia a{
+    color: white;
+    text-decoration: none;
+    margin: 80px;
+}
+
+.socialMedia a:first-child {
+    margin-left: 0px;
+}
+
+.socialMedia a:last-child {
+    margin-right: 0px;
+}
+
+.footer {
+    width: 100%;
+    background-color: rgb(102, 85, 102);
+    position: relative;
+    height: 50px;
+    color: white;
+    text-align: center;
+}
+
+.footer-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.clear {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.captions {
+    font-size: 25px;
+}
+
--- a/Challenge01/tablet.png
+++ b/Challenge01/tablet.png