Skip to content
GitLab
Commit e603777f authored by Mihajlo-991's avatar Mihajlo-991
Browse files

added Challenge-01

parent 44800fb3
Hide whitespace changes
Inline Side-by-side
Showing
with 338 additions and 0 deletions
+338 -0
Challenge-01/images/New folder/123932-200.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/123932-200.png

988 Bytes

Challenge-01/images/New folder/1380370.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/1380370.png

10.4 KB

Challenge-01/images/New folder/191.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/191.png

3.18 KB

Challenge-01/images/New folder/319.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/319.png

2.95 KB

Challenge-01/images/New folder/412-4121775_png-file-live-chat-icon-png-white.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/412-4121775_png-file-live-chat-icon-png-white.png

61.3 KB

Challenge-01/images/New folder/live-chat-icon-png-11553726049fh5ynejwli.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/New folder/live-chat-icon-png-11553726049fh5ynejwli.png

56.3 KB

Challenge-01/images/apple-devices.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/apple-devices.png

336 KB

Challenge-01/images/apple-logo.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/apple-logo.png

46 KB

Challenge-01/images/apple-logo2.jpg 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/apple-logo2.jpg

4.7 KB

Challenge-01/images/iphoneX.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/iphoneX.png

112 KB

Challenge-01/images/macbook.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/macbook.png

117 KB

Challenge-01/images/tablet.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/images/tablet.png

58.1 KB

Challenge-01/index.html 0 → 100644
+ 105
- 0
View file @ e603777f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/3a818acd01.js" crossorigin="anonymous"></script>
</head>
<title>Apple-Store</title>
</head>
<body>
<!-- Section 1 -->
<header id="home">
<img class="apple-logo" src="./images/apple-logo.png" alt="apple-logo">
<nav>
<a href="#home">Home</a>
<a href="#ipad">iPad</a>
<a href="#iphone">iPhone X</a>
<a href="#macbook">McBookAir</a>
<a href="#contact">Contact</a>
</nav>
<div class="clear"></div>
<br>
<img class="main-img" src="./images/apple-devices.png" alt="apple-devices">
</header>
<!-- Section 2 -->
<section>
<div class="macbook-logo">
<a href="#macbook"><i class="fa-solid fa-laptop"></i><P>MacBookAir</p></a>
</div>
<div class="tablet-logo">
<a href="#ipad"><i class="fa-solid fa-tablet-screen-button"></i> <p>iPad</p></a>
</div>
<div class="phone-logo">
<a href="#iphone"><i class="fa-solid fa-mobile-screen-button"></i> <p>iPhone X</p></a>
</div>
<div class="about">
<a href="#about"><i class="fa-regular fa-comments"></i><p>About</p></a>
</div>
</section>
<!-- Section 3 -->
<article>
<div class="one" >
<div id="ipad" class="ipad">
<img src="./images/tablet.png" alt="ipad-picture">
</div>
<div class="ipad-text">
<h3>iPad</h3>
<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), relesed on March27,2018, the 10,5-inch(270mm) and 12,9 (330mm) 2G iPad Pro relesed 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 class="clear"></div>
</div>
<div id="iphone" class="iphone">
<img src="./images/iphoneX.png" alt="iphoneX">
</div>
<div class="iphone-text">
<h3>iPhone X</h3>
<p>iPhone X is a smartphone designed, developed, 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 relesed on November 3, 2017. The phone was relesed on November 3, 2017. The phone was relesed 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="clear"></div>
<div id="macbook" class="macbook">
<img src="./images/macbook.png" alt="macbook">
</div>
<div class="macbook-text">
<h3>MacBookAir</h3>
<p>The MacBook Air is a Line of Macintosh subnotebook computers developed and manufactured by Apple Inc. It consists of a full-size keyboard, a machined aluminium case, and a thin light stucture. The Air is available with a screen size of (measured diagonally) 13,3inch (33.782 cm), 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 class="clear"></div>
<div id="about" class="about-text">
<div class="team">
<h3>Team</h3>
<br>
<p>80,000+ employees are working for Apple around the world.</p>
</div>
<div class="sallary">
<h3>Sallary</h3>
<br>
<p>US$ 125,000 a year is the average employee salary at Apple HQ.</p>
</div>
<div class="earnings">
<h3>Earnings</h3>
<br>
<p>US$ 300,000per minute.This is the erarning of Apple.</p>
</div>
<div class="clear"></div>
</div>
</article >
<!-- Section 4 -->
<div id="contact" class="fontawsome">
<a href="https://www.facebook.com/apple/" target="_blank"><i class="fa-brands fa-facebook-f"></i> </a>
<a href="https://www.google.com" target="_blank"> <i class="fa-brands fa-google-plus"></i>
<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?app=desktop" 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>
<footer>
<p>© Apple 2019</p>
</footer>
</body>
</html>
\ No newline at end of file
Challenge-01/screenshots/screencapture.png 0 → 100644
+ 0
- 0
View file @ e603777f
Challenge-01/screenshots/screencapture.png

941 KB

Challenge-01/styles.css 0 → 100644
+ 233
- 0
View file @ e603777f
* {
box-sizing: border-box;
}
body {
margin: 0;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
word-spacing: 3px;
text-align: center;
margin-top: 0;
}
h3{ font-size: 25px;}
.clear{clear: both;}
/* Section 1 */
header{
background-color: #638caa;
}
.apple-logo{
padding-top: 10px;
width: 50px;
margin-left: 100px;
float: left;
}
header nav{
margin-top: 15px;
float: right;
margin-right: 150px;
}
nav a{
text-decoration: none;
color: white;
padding-top: 10px;
padding-right: 12px;
}
nav a:hover{
text-decoration: underline red;
color:burlywood;
}
.main-img{
width: 50%;
margin-left: 400px;
padding-bottom: 20px;
}
/* Sectoon 2 */
.macbook-logo{
width: 25%;
text-align: center;
background-color: #dbdbdb;
float: left;
}
.tablet-logo{
width: 25%;
text-align: center;
background-color: #bcb9aa;
float: left ;
}
.phone-logo{
width: 25%;
text-align: center;
background-color: #9ce0d1;
float: left;
}
.about{
width: 25%;
text-align: center;
background-color: #9aa7b8;
float: left;
}
section a {
font-size: 30px;
text-decoration: none;
color: black;
font-weight: bold;
}
section a i{
font-size: 80px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Section 3 */
article{
background-color: #b7ced6;
}
article p { text-indent: 20px;}
.ipad{
width: 50%;
float: left;
}
.ipad img{
margin-left: 375px;
margin-right:375px;
padding-top: 5px;
padding-bottom: 5px;
width: 200px;
}
.ipad-text {
width: 50%;
background-color: #9aa7b8;
float: right;
}
.ipad-text h3{
padding-top: 10px;
color: white;
}
.ipad-text p{
text-align: justify;
color: white;
font-size: 18px;
padding-top: 35px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.iphone{
width: 50%;
float: right;
}
.iphone img{
margin-left: 375px;
margin-right:375px;
padding-top: 5px;
padding-bottom: 5px;
width: 200px;
}
.iphone-text {
width: 50%;
background-color: #bcb9aa;
float:left;
}
.iphone-text h3{
padding-top: 10px;
color: white;
}
.iphone-text p{
text-align: justify;
color: white;
font-size: 18px;
padding-top: 35px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.macbook{
width: 50%;
float: left;
}
.macbook img{
margin-left: 375px;
margin-right:375px;
padding-top: 5px;
padding-bottom: 5px;
width: 200px;
}
.macbook-text {
width: 50%;
background-color:#f09e84;
float: right;
}
.macbook-text h3{
padding-top: 10px;
color: white;
}
.macbook-text p{
text-align: justify;
color: white;
font-size: 18px;
padding-top: 35px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.about-text{width: 100%;}
.about-text p{
color: white;
}
.team{
padding-top: 10px;
padding-bottom: 10px;
width: 33.33%;
background-color: #9aa7b8;
float: left;
}
.sallary{
width: 33.33%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #bcb9aa;
float: left;
}
.earnings{
width: 33.33%;
padding-top: 10px;
padding-bottom: 10px;
background-color:#9ce0d1;
float: left;
}
/* Section 4 */
.fontawsome{
text-align: center;
padding: 40px ;
background-color:#638caa;}
.fontawsome a{
padding-right: 150px;
margin-bottom: 0px;
font-size: 30px;
color: white;
text-decoration: none;
}
footer{
padding-top: 10px;
padding-bottom: 10px;
background-color: #514354;
}
footer p{
font-size: 14px;
color: white;
margin-bottom: 0px;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment