Skip to content

Step2#23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abdalrazaq94 wants to merge 11 commits into
base:master
Choose a base branch
from
Open

Step2 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8532e93
Abdalrazaq94 Jan 19, 2020
0615d9d
i have changed
Abdalrazaq94 Jan 19, 2020
1fd912a
Abdalrazaq94 Jan 19, 2020
5913e55
Abdalrazaq94 Jan 19, 2020
082dada
here we chancged
Abdalrazaq94 Jan 22, 2020
9c2a1e2
here is level 3 step 1
Abdalrazaq94 Feb 1, 2020
28fc09f
Merge branch 'step1'
Abdalrazaq94 Feb 1, 2020
f128c8d
Merge branch 'master' into step1
Abdalrazaq94 Feb 1, 2020
7fa2a9f
step 1level 3
Abdalrazaq94 Feb 1, 2020
06e8b85
Merge branch 'step1'
Abdalrazaq94 Feb 1, 2020
cb30d08
step 2 level 3
Abdalrazaq94 Feb 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions level-1/step-1/step-1.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@
/* Use float to get this container in its desired location. */

.content-left {
float:left;
width: 34%;
/* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
height: 100px;
Expand All@@ -18,6 +19,7 @@

.content-mid {
width: 66%;
float: right;
/* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
height: 100px;
background: #B0B0B0;
Expand All@@ -26,6 +28,7 @@
/* Use float to get this container to the bottom of the screen */

.footer {
float:clear;
width: 100%;
height: 100px;
background: #3A3A3A;
Expand Down
14 changes: 13 additions & 1 deletion level-1/step-2/step-2.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,50 @@
/* Step-2 You can assign padding to all sides of a container by using the padding shorthand property. */

.content-left {

padding: 20 20 20 20 px;

@Abadi11Abadi11Nov 25, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can write 20px once that will be the same you did, less code is better

}

/* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */

.header {

padding: 20 20 20 20 px;

@Abadi11Abadi11Nov 25, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

}


/* Step-2 One option to get the container to fill the parent container is to use width: auto; */

.profile-image-container {
height:auto ;
width:auto ;
margin-bottom: auto;
background: #96F0F2;
}

/* Step-2 One option to get the container to fill the parent container is to use width: auto; */

.profile-links-container {
background: #12F3F7;
height:auto ;
width: auto;
}

/* Step-2 You can either use float left to get this element to in the desired location. */

.logo-container {
background: #4F4949;
height:auto ;
width: auto;
float: left;
}


/* Step-2 You can either use float right to get this element to in the desired location. */

.menu-container {
height:auto ;
width: auto;
float:right;
background: #4F4949;
}

Expand Down
10 changes: 10 additions & 0 deletions level-1/step-3/step-3.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
/* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */

.content-mid {
padding: 80 80 80 80px;

@Abadi11Abadi11Nov 25, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here


}

.content-mid-header {
width:auto ;
height:auto ;
background: #444;
}

.content-container {
width:auto ;
height:auto ;

}

.content {
background: #D8D8D8;
width:auto ;
height:auto ;
text-align: center;
padding: 20 20 20 20px;

}
7 changes: 4 additions & 3 deletions level-2/step-2/step-2.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
/* Step-2 add a text-align that will align items in the center. */
.main-bottom-section {
margin-top: 65px;
text-align: center;
/* alignment property */
}

/* Step-2 Add a width, height and display property to make these containers look like the design. */
.item {
/*width*/
/*height*/
/*display*/
width :20;
height : 40;
display :inline;
margin: 0 20px 30px;
background: #DED6D3;
margin-bottom: 30px;
Expand Down
20 changes: 10 additions & 10 deletions level-3/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,59 +20,59 @@
<header class="top-header">

<div class="menu">
<img class="menu-icon" src="" alt="menu icon">
<img class="menu-icon" src="HTML-CSS-Practice-Problems\level-3\img\bottoms.png" alt="menu icon">
</div>

<div class="logo">
<img class="logo-icon" src="" alt="logo icon">
<img class="logo-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\dev-shop.png" alt="logo icon">
</div>

<div class="sign-in">
<img class="sign-in-icon" src="" alt="sign in icon">
<img class="sign-in-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\Sign_In.png" alt="sign in icon">
</div>

</header>

<div class="bottom-container">
<img class="shop-icon" src="" alt="shop icon">
<img class="shop-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\Shop_Deals.png" alt="shop icon">
</div>
</section>

<section class="main-bottom-section">

<div class="item tops">

<img class="item-image" src="" alt="tops">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\Tops.png" alt="tops">

</div>

<div class="item bottoms">

<img class="item-image" src="" alt="bottoms">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\bottoms.png" alt="bottoms">

</div>

<div class="full-width-item accessories">

<img class="item-image" src="" alt="accessories">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\accessories.png" alt="accessories">

</div>

<div class="large-item">

<img class="item-image" src="" alt="collection">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\collection.png" alt="collection">

</div>

<div class="item kicks">

<img class="item-image" src="" alt="kicks">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\kicks.png" alt="kicks">

</div>

<div class="item hats">

<img class="item-image" src="" alt="hats">
<img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\hats.png" alt="hats">

</div>

Expand Down
1 change: 1 addition & 0 deletions level-3/step-1/step-1.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@
width: 100%;
height: 200px;
position: relative;
color: #F2EFE5;
}


Expand Down