Skip to content

HTML CSS Module Project #660

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
SyedArslanHaider wants to merge 18 commits into
base: master
Choose a base branch
from
Open

HTML CSS Module Project #660

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
7f6c8bb
first commit
SyedArslanHaider Sep 17, 2024
c6c1878
Add new section Level 2
SyedArslanHaider Sep 17, 2024
d2feb82
change li to a tag on header nav
SyedArslanHaider Sep 17, 2024
bc4ef0d
add some style on header nav element
SyedArslanHaider Sep 17, 2024
5797317
i created store.html file and write all code inside
SyedArslanHaider Sep 18, 2024
1ae7743
i created new css file store.css and make all css inside
SyedArslanHaider Sep 18, 2024
9b36993
i change html file and add store page link on header store button
SyedArslanHaider Sep 18, 2024
ce8c5ba
add a div on master
SyedArslanHaider Sep 19, 2024
9aa5d25
Merge branch 'level2'
SyedArslanHaider Sep 19, 2024
0bafeb3
i add burger button inside both pages when mobile view
SyedArslanHaider Oct 2, 2024
3260cd0
remove targer=blank on link
SyedArslanHaider Oct 2, 2024
749b0c9
add page links on header
SyedArslanHaider Oct 2, 2024
3384caa
adjust section 2 image using media query and adjust first image text …
SyedArslanHaider Oct 2, 2024
ffd877e
set some margin and paddings and fix some errors adjust element
SyedArslanHaider Oct 2, 2024
0b2b635
one change in store.html and css redia button selection and and activ…
SyedArslanHaider Oct 4, 2024
9113024
add some decoration on header nav and transform scale on buttons
SyedArslanHaider Oct 4, 2024
0d45a6d
set some margin and paddings on header element
SyedArslanHaider Oct 4, 2024
e926886
remove buttons border radius and adjust some other settings
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
289 changes: 289 additions & 0 deletions css/store.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@
header {
height: 100px;
display: flex;
position: relative;
Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

Did you already learn the differences between position static, relative, absolute, etc?
Why do you need relative in this case?

Copy link
Copy Markdown
Author

@SyedArslanHaider SyedArslanHaider Oct 4, 2024

Choose a reason for hiding this comment

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

"I used position: relative on the header because I want to reposition the navigation when applying media queries for mobile devices. On mobile, the navigation (header nav) is set to position: absolute, allowing me to control its position using the top, bottom, left, and right properties. By setting the parent (header) to position: relative, I ensure that the absolutely positioned navigation is placed relative to the header, making it easier to position the nav exactly where needed for mobile layouts."

Copy link
Copy Markdown

@nsi88 nsi88 Oct 5, 2024

Choose a reason for hiding this comment

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

Makes sense. Nice one

}
header :nth-child(2) {
Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

A similar feedback as in the past. nth-child in css is unreadable. Also it's problematic to use in more real life scenarios when content is added dynamically to the page.
Can you think of a way to avoid using it in here?

Copy link
Copy Markdown
Author

@SyedArslanHaider SyedArslanHaider Oct 4, 2024

Choose a reason for hiding this comment

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

"It's a bad habit of mine to use nth-child without fully considering the potential issues, but I'll make sure to avoid it in the future and look for more reliable solutions."

margin-left: auto;
gap: 50px;
margin-right: 30px;
}
.burger-button {
display: none;
Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

Why is it hidden? Just work in progress? Or it's not needed for this design?

Copy link
Copy Markdown
Author

@SyedArslanHaider SyedArslanHaider Oct 4, 2024

Choose a reason for hiding this comment

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

Nice Question!
"The burger button is hidden because it's unnecessary when the page is displayed in the web view (for larger screens). I activate the burger button for mobile displays using media queries. This way, it's only visible and usable when the page is viewed on a mobile device."

font-size: 30px;
cursor: pointer;
margin-left: auto;
text-decoration: none;
}
header img {
width: 70px;
height: 50px;
padding: 15px;
margin-left: 3rem;
}
.nav-header {
display: flex;
gap: 10px;
padding: 15px;
align-items: center;
}
a {
text-decoration: none;
color: rgb(129, 121, 121);
}

a:hover {
color: brown;
font-weight: bold;
}

.nav-header :nth-child(1) {
font-weight: bold;
color: rgb(85, 81, 81);
}

.container {
display: flex;
}
.element1 {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.element2 {
width: 50%;
height: 100%;
}
.element2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
text-align: center;
font-size: 50px;
padding: 30px;
margin-top: 3rem;
color: rgba(240, 81, 18, 0.904);
}
form {
width: 80%;
height: auto;
}
.form {
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-address {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input[type="text"],
select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
.address11 {
Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

address11 and address12 are exactly the same.
We can use just address.

Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

Again try to create reusable classes. What I wrote in another comment.
Class is "one of". For example "One of address fields"
Whenever there is a class address1 in your code, it's a sign that we need two classes in there:

  1. Common for all address fields;
  2. A modifier for a particular address field.

Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

Continuing with the address example.
Let's say you have 2 address fields. The first is required and has to be filled, the second is optional.
Instead of creating classes "address1" and "address2", a better way is to create classes "address" and "required".
This way if you later need a third address field, you don't need to edit your css. You will just reuse the "address" class.
Also maybe you will have other required fields having some similarities. Then the "required" class can be reused as well.

Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

A bit more on the "required" class for address.
You could add "*" in css. It would be something like this:

.required::after {
  content: '*';
}

Haven't tested this code. Please tell if you will try and it doesn't work. Can look into it.

Copy link
Copy Markdown

@nsi88 nsi88 Oct 4, 2024

Choose a reason for hiding this comment

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

"::after" above is a so called "pseudoelement" You can read more in here for example https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Copy link
Copy Markdown
Author

@SyedArslanHaider SyedArslanHaider Oct 4, 2024

Choose a reason for hiding this comment

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

"Yes, it's a good approach to use just one class instead of multiple. I completely agree with you, and I'll work on resolving it. Thank you so much for your support!"

Copy link
Copy Markdown
Author

@SyedArslanHaider SyedArslanHaider Oct 4, 2024

Choose a reason for hiding this comment

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

A bit more on the "required" class for address. You could add "*" in css. It would be something like this:

.required::after {
  content: '*';
}

Haven't tested this code. Please tell if you will try and it doesn't work. Can look into it.

"I used the .quote class to automatically add quotation marks before and after the content, and it works well. I’ve tested it, and everything seems fine."

margin-top: 1rem;
width: 64%;
}
.address12 {
margin-top: 1rem;
width: 64%;
}
.input-group {
width: 31%;
}
.radio-group {
width: 66%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-left: 10px;
}
.radio {
gap: 7px;
display: flex;
}
legend {
margin-left: 8rem;
font-weight: bold;
margin-top: 10px;
padding: 10px;
margin-bottom: 10px;
}
.checkbox {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 7rem;
margin-bottom: 10px;
width: 350px;
margin-left: 7rem;
}
.checkbox label span {
text-decoration: underline;
color: rgba(240, 81, 18, 0.904);
}
button {
margin-top: 1rem;
background-color: rgba(240, 81, 18, 0.904);
padding: 10px;
border-radius: 5px;
width: 200px;
text-decoration: none;
font-size: 1.2rem;
border-color: rgba(240, 81, 18, 0.904);
color: white;
}
.button_div {
margin-left: 9rem;
}
.fot img {
width: 20px;
}
footer {
margin-top: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}

footer :nth-child(1) {
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 20px;
}

a {
padding: 20px;
}

footer :nth-child(3) {
color: rgb(177, 173, 173);
}

@media (max-width: 768px) {
header {
align-items: center;
height: auto;
padding: 20px;
}

header :nth-child(2) {
flex-direction: column;
gap: 10px;
margin-left: 0;
}
header img {
width: 50px;
height: 40px;
padding: 15px;
margin-left: 1rem;
}
.burger-button {
display: block;
}
.form {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 0.5rem;
}
.input-group {
width: 80%;
}
.address11 {
margin-top: 0.5rem;
width: 80%;
}

.address12 {
margin-top: 0.5rem;
width: 80%;
}
legend {
margin-left: 2rem;
margin-bottom: 10px;
}
h1 {
font-size: 20px;
}
.checkbox {
margin-left: 2rem;
width: 200px;
}
.button_div {
margin-left: 3rem;
}
.radio-group {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.radio {
padding: 10px;
width: 150px;
}
.container {
display: flex;
flex-direction: column;
}
.element1 {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.element2 {
margin-top: 3rem;
height: auto;
width: 100%;
}
.nav-header {
display: none;
width: 100vw;
height: 100vh;
flex-direction: column;
gap: 10px;
right: 0;
left: 0;
position: absolute;
top: 100%;
z-index: 10;
background: white;
}

.nav-header.active {
display: flex;
}

header :nth-child(2) {
margin-left: 0;
}
}
Loading