Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

create new branch for multipage clone #208

Open
SyedArslanHaider wants to merge 22 commits into
base: main
Choose a base branch
from
Open

create new branch for multipage clone #208

Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bb88349
create new branch for multipage clone
SyedArslanHaider Sep 14, 2024
e0cf203
first commit multipage
SyedArslanHaider Sep 29, 2024
f4f9ec6
my second commit
SyedArslanHaider Sep 29, 2024
b961583
my third commit I create first page in web view
SyedArslanHaider Sep 30, 2024
db4165f
4rth commit add some media queries
SyedArslanHaider Sep 30, 2024
3bac1c7
i added some changes inside media query
SyedArslanHaider Sep 30, 2024
6064a87
change footer size
SyedArslanHaider Sep 30, 2024
98c99f3
change media quires
SyedArslanHaider Sep 30, 2024
701a504
I change some css for footer using media query
SyedArslanHaider Oct 1, 2024
3d5f391
adjusting media quieries
SyedArslanHaider Oct 1, 2024
c64cde0
adjusting footer
SyedArslanHaider Oct 1, 2024
ac03464
change some font sizes in main section
SyedArslanHaider Oct 1, 2024
a4404de
I created resume.html and resume.css and create mobile design first
SyedArslanHaider Oct 1, 2024
536ff65
I add code inside resume.html and resume.css using media query for web
SyedArslanHaider Oct 2, 2024
5516b6f
Add an active class in nav header and some changes in footer
SyedArslanHaider Oct 3, 2024
28bdebc
i add project page for html and css both and code according to mobile…
SyedArslanHaider Oct 6, 2024
ffdbaf2
add media quieries according to 1200px screen on project.html
SyedArslanHaider Oct 7, 2024
2ec1d35
fix some padding and margin on media quieries
SyedArslanHaider Oct 7, 2024
3fa97e4
delete some extra media quieries inside project.css file
SyedArslanHaider Oct 8, 2024
e71e0c2
added contact.html and contact.css
SyedArslanHaider Oct 8, 2024
a9759b1
add 2 buttons onclick code in index.html page and also set position o…
SyedArslanHaider Oct 9, 2024
de60727
adjust card box-shadow background color
SyedArslanHaider Oct 12, 2024
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
156 changes: 148 additions & 8 deletions MultiPage-Clone/css/project.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ ul {
margin: 5px;
transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
nav {
position: relative;
Expand Down Expand Up @@ -208,13 +209,13 @@ ul {
}
@media screen and (min-width: 1200px) {
main {
margin-top: 6rem;
margin-top: 9rem;
width: 100vw;
height: auto;
background-color: var(--clr-Dark-beige);
}
nav {
height: 90px;
height: 150px;
}
.empty {
height: 20px;
Expand Down Expand Up @@ -251,9 +252,11 @@ ul {
width: 60%;
font-size: 1.2rem;
height: 102px;
font-family: Quicksand;
margin-left: auto;
margin-right: auto;
}
letter-spacing: 2px;
}
.main-container {
display: flex;
flex-direction: column;
Expand All @@ -263,7 +266,7 @@ ul {
gap: 1.8rem;
}

.container {
.container{
background-color: var(--clr-White);
border-radius: 3px;
box-shadow: 0 1px 1px var(--clr-Black);
Expand All @@ -272,7 +275,12 @@ ul {
width: 750px;
height: 404px;
}

.container p{
padding: 0.6rem;
font-family: Quicksand;
font-size: 0.99rem;
letter-spacing: 0.5px;
}
.small-box {
width: 10px;
height: 50px;
Expand Down Expand Up @@ -326,6 +334,139 @@ ul {
}
}

@media screen and (min-width: 900px) {
Copy link

@nsi88 nsi88 Oct 8, 2024

Choose a reason for hiding this comment

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

Will complicate a bit the task for you)
Do all the properties below change comparing to other screen sizes?
If not it's better to have them outside of the media query block.
Less code to maintain and to load to browser.

Copy link

@nsi88 nsi88 Oct 9, 2024

Choose a reason for hiding this comment

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

I saw you deleted some pieces of media queries. Well done. Keep going

main {
margin-top: 9rem;
width: 100vw;
height: auto;
background-color: var(--clr-Dark-beige);
}

nav {
height: 150px;
}

.empty {
height: 20px;
visibility: hidden;
}

.project-text {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
padding: 1rem;
}

.project-text p {
width: 1.2rem;
height: 1.2rem;
}

.project-text span {
font-family: poppins;
font-size: 2rem;
font-weight: bold;
}

.box {
width: 0.8rem;
height: 0.8rem;
background-color: var(--clr-Royal-blue);
}

.top-paragraph {
margin-top: 0;
width: 60%;
font-size: 1.2rem;
height: 124px;
margin-left: auto;
font-family: Quicksand;
margin-right: auto;
letter-spacing: 2px;
}
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.3rem;
gap: 1.8rem;
}

.container {
background-color: var(--clr-White);
border-radius: 3px;
box-shadow: 0 1px 1px var(--clr-Black);
display: grid;
grid-template-columns: 1fr 1fr;
width: 750px;
height: 404px;
}
.container p {
padding: 0.6rem;
font-family: Quicksand;
font-size: 0.99rem;
letter-spacing: 0.5px;
}
.small-box {
width: 10px;
height: 50px;
background-color: var(--clr-Royal-blue);
margin: 0;
padding: 0;
}

.box-one {
grid-column: 1 / 2;
grid-row: 1 / 2;
display: flex;
align-items: flex-start;
margin-top: 1.7rem;
}

.container p {
grid-column: 1 / 2;
grid-row: 2 / 3;
padding: 1rem;
font-size: 1.3rem;
margin-top: 0;
}

.text-content {
margin-left: 0.5rem;
}

.box-two {
grid-column: 2 / 3;
grid-row: 1 / 3;
align-self: center;
height: 100%;
display: flex;
justify-content: flex-end;
}

.box-two img {
width: 320px;
height: 404px;
text-align: end;
object-fit: cover;
}

.social-icons {
display: flex;
justify-content: center;
gap: 25px;
}

.social-link {
color: var(--clr-Black);
font-size: 21px;
text-decoration: none;
}
}

/* .................. Main for 400px..............*/
@media screen and (max-width: 768px) {
main {
Expand Down Expand Up @@ -409,12 +550,11 @@ ul {
flex-direction: column;
justify-content: space-between;
}
p {
padding: 0.4rem;
.container p {
padding: 0.6rem;
font-family: Quicksand;
font-size: 0.99rem;
letter-spacing: 0.5px;
margin-top: 0.5rem;
}
.text-content span {
font-family: poppins;
Expand Down