Skip to content

Commit

Permalink
finished the full layout arrangemet and style
Browse files Browse the repository at this point in the history
  • Loading branch information
Fantahun Bishaw committed May 2, 2024
1 parent 0078d5d commit 77c96e6
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 65 deletions.
143 changes: 103 additions & 40 deletions ...ect week - (Rebuilding Apple.com's homepage)/Apple-HomePage-Project/Project/CSS/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ nav {
}

.inner-container {
padding: 2rem 1rem;
padding: 1rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -85,8 +85,10 @@ nav ul {

.nav-icons {
width: 1.8rem;

}


nav ul li a {
/* center the nav icons vertically center */
display: flex;
Expand All @@ -105,18 +107,22 @@ nav ul li a:hover {
.model {
font-weight: 600;
margin-top: 1rem;
font-size: 2rem;
line-height: 3.5rem;
}

.main-highlight-wrapper{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: space-around;
line-height: 7rem !important;

}

.main-highlight-wrapper .item-title {
font-size: 4rem;
font-size: 7rem;
margin: 0 auto;
}

Expand All @@ -126,39 +132,62 @@ nav ul li a:hover {
}

.main-highlight-wrapper .item-description {
font-size: 2.5rem;
font-weight: 500;
font-size: 4rem;
font-weight: 400;
}

.main-highlight-wrapper .info-links{
margin-top: 0;
line-height: 3rem;
}

.info-links {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin: 1.5rem;
font-weight: 500;
/* font-size: 1.5rem; */
font-size: 1.8rem;
}

.info-links a{
color:#06c;;
}

.info-links a:hover {
color: black;
}
.second-highlight-wrapper a:hover,.apple-airpods a:hover{
color: white;
}

.item-img-wrapper img {
margin: 20px auto;
width: 40vw;
margin: 3rem auto;
width: 45vw;

/* try to add a box shadow for the images after correcting the asset on PS */
}

/* second section - iphone 11 pro section */
.highlight-bg .item-title{
font-weight: 600;
}



.second-highlight-wrapper {
background: url("../images/home/iphone11-pro-bg.jpg");
}

.item-title {
margin-top: 10px;
font-size: 3.5rem;
margin-top: .5rem;
font-size: 5rem;
}

.price {
color: #89898b;
margin-top: .5rem;
}

/* Third section - iphone 11 pro section */
Expand All @@ -185,20 +214,41 @@ nav ul li a:hover {
.first-row,
.second-row,
.third-row {
display: flex;
justify-content: space-between;
gap: 2rem;
margin: 10px;
/* margin: 1rem; */
display: flex;
justify-content: space-between;
/* gap: 1rem; */
width: 90vw;
}

.card-bg{
width: 50%;
border: .2rem solid rgba(164, 163, 163, 0.1);
border-radius: 1rem;
height: 50rem;
margin: 1rem;
padding: 2rem;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-color: #f9f9f9 !important;
}

.bg-bottom{
background-position: bottom !important;
background-size: initial !important;
background-repeat: no-repeat !important;
}

.product-logo {
margin: 2rem auto auto auto;
width: 20rem;
margin: 0 auto;
/* margin: auto; */
padding-top: .5rem;

}

.brief {
max-width: 40rem;
max-width: 35rem;
margin: 1rem auto;
}

Expand All @@ -208,6 +258,7 @@ nav ul li a:hover {

.apple-watch {
background: url("../images/home/watch-series-5.jpg");

}

.apple-card {
Expand All @@ -216,47 +267,59 @@ nav ul li a:hover {

.apple-tv {
background: url("../images/home/apple-tv-background.jpg");
display: flex;
flex-direction: column;
justify-content: space-between !important;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}


.learn-more a{
position: relative;
}

/* play icon for the apple tv watch trailer */
.watch-more a::after{
font-family: fontAwesome;
content: "\f144";
margin-left: .6rem;
vertical-align: middle;

}

.apple-airpods {
background: url("../images/home/air-pods.jpg");
color: #fff;
background-size: initial;
background-color: #000;
background-position: bottom;
background-color: black !important;
color: white;

background-repeat: no-repeat;
}

.macbook-pro {
background: url("../images/home/macbook-pro2.jpg");
background-size: initial;
background-size: initial !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
}

.model2,.item-description2 {
font-weight: 600;
}

.item-title2{
font-size: 3rem;
font-weight: 800;
}

.ipad {
background: url("../images/home/new-ipad.jpg");
}

.card-bg {
width: 50rem;
height: 5rem;
/* border: 2px solid blue; */
background-color: #f9f9f9;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 1rem;
}


/* footer part */
.footer-wrapper{
margin: 40px auto auto;
margin: 1rem auto auto;
padding: 1.5rem;
background-color: #f5f5f7;
color: #1d1d1f;
}
Expand All @@ -283,7 +346,7 @@ nav ul li a:hover {
text-align: justify;
line-height: 4rem;
padding-bottom: 1rem;
border-bottom: 1px solid #d2d2d7;
border-bottom: .1rem solid #d2d2d7;
color: #86868b;
margin: auto auto 2rem auto;
}
Expand Down Expand Up @@ -324,7 +387,7 @@ nav ul li a:hover {
}

.my-apple-wrapper{
border-bottom: 1px solid #d2d2d7;
border-bottom: .1rem solid #d2d2d7;
width: 100%;
text-align: left;
margin: .5rem;
Expand Down
53 changes: 28 additions & 25 deletions ...roject week - (Rebuilding Apple.com's homepage)/Apple-HomePage-Project/Project/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />

<!-- fontAwsome -->
<!-- fontAwsome for i tags -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
Expand Down Expand Up @@ -74,17 +74,19 @@
<!-- Main Highlight Section Starts here -->
<section class="main-highlight-wrapper">
<div class="inner-container">
<p class="model">16-inch model</p>
<h2 class="item-title">MacBook Pro</h2>
<p class="item-description">The best for the brightest.</p>
<ul class="info-links">
<li class="learn-more">
<a href="">Learn More <i class="fa-solid fa-angle-right"></i></a>
</li>
<li class="buy">
<a href="">Buy <i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>
<div>
<p class="model">16-inch model</p>
<h2 class="item-title">MacBook Pro</h2>
<p class="item-description">The best for the brightest.</p>
<ul class="info-links">
<li class="learn-more">
<a href="">Learn More <i class="fa-solid fa-angle-right"></i></a>
</li>
<li class="buy">
<a href="">Buy <i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>
</div>
<div class="item-img-wrapper">
<img src="./images/home/macbook-pro.png" alt="" />
</div>
Expand Down Expand Up @@ -131,7 +133,7 @@ <h2 class="item-title">iphone 11</h2>
<section class="products-list">
<div class="inner-container">
<div class="first-row">
<div class="apple-watch card-bg">
<div class="apple-watch card-bg bg-cover">
<div class="product-logo">
<img src="./images/icons/watch-series5-logo.png" alt="" />
</div>
Expand All @@ -150,7 +152,7 @@ <h2 class="item-title">iphone 11</h2>
</li>
</ul>
</div>
<div class="apple-card card-bg">
<div class="apple-card card-bg bg-cover">
<div class="product-logo">
<img src="./images/icons/apple-card-logo.png" alt="" />
</div>
Expand All @@ -171,21 +173,23 @@ <h2 class="item-title">iphone 11</h2>
</div>

<div class="second-row">
<div class="apple-tv card-bg">
<div class="apple-tv card-bg bg-cover">
<div class="product-logo">
<img src="./images/icons/apple-tv-logo.png" alt="" />
</div>
<div class="servant-logo">
<img src="./images/icons/servant-logo.png" alt="" />
</div>
<ul class="info-links">
<li class="learn-more">
<a href="">Watch the trailer <i class="fa-solid fa-play"></i></a>
</li>
</ul>
<div>
<div class="info-links watch-more">

<a href="">Watch the trailer</a>

</div>
</div>
</div>

<div class="apple-airpods card-bg">
<div class="apple-airpods card-bg bg-bottom">
<p class="item-title2">AirPods Pro</p>
<div class="brief">
<p>Magic like you&apos;ve never heard.</p>
Expand All @@ -202,7 +206,7 @@ <h2 class="item-title">iphone 11</h2>
</div>

<div class="third-row">
<div class="macbook-pro card-bg">
<div class="macbook-pro card-bg bg-bottom">
<p class="model2">16-inch model</p>
<p class="item-title2">MacBook Pro</p>
<p class="item-description2">The best for the brightest.</p>
Expand All @@ -214,15 +218,14 @@ <h2 class="item-title">iphone 11</h2>
<a href="">Buy <i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>
<!-- <img src="./images/home/mac-laptop2.jpg" alt="" /> -->
</div>

<div class="ipad card-bg">
<div class="ipad card-bg bg-cover">
<div class="product-logo">
<img src="./images/icons/new-ipad-logo.png" alt="" />
</div>
<div class="brief">
<p></p>
<p class="item-description2">Like a computer. Unlike any computer.</p>
</div>
<ul class="info-links">
<li class="learn-more">
Expand Down

0 comments on commit 77c96e6

Please sign in to comment.