Skip to content
This repository has been archived by the owner on Jan 14, 2024. It is now read-only.

London10-Afsha Hossain-HTML/CSS - Week 1 #332

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

London10-Afsha Hossain-HTML/CSS - Week 1 #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 53 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,56 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
header, footer {
margin: 0 2em;
padding: 1em 0em;
background-color: aquamarine;
}

h1 {
font-size: 40px;
}

img {
width: 40rem;
height: 18rem;
display: block;
margin: 2rem 0;
}


body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: lightcyan;
}

.menu {
display: flex;
flex-direction: row;
justify-content: center;
}
Comment on lines +32 to +36
Copy link

Choose a reason for hiding this comment

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

this is great. It is best practise using the class


button {
padding: 1rem 1rem;
margin: 1rem;
font-size: 20px;
border-radius: 10px;
}

main {
padding: 2rem;
}

article {
margin: 5rem 0;
}


article:first-child {
font-size: larger;
color: darkblue;
}

footer {
text-align: center;
}
Comment on lines +38 to +61
Copy link

Choose a reason for hiding this comment

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

The styles are good. Maybe try and do it with the css class like you did on line 32

30 changes: 30 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,36 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<nav>
<h1>Peace and Joy</h1>
Copy link

Choose a reason for hiding this comment

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

very good you only have 1 h1

<div class="menu">
<button>Experiencing Peace and Joy</button>
<button>Experiencing Peace</button>
<button>Experiencing Joy</button>
</div>

<p class="description">I am a coder who loves to feel peaceful and joyful. So I am going to create a website where I can talk about things that make me feel peaceful and add joy to my life.</p>
</nav>
</header>
<main>
<article>
<h2>Experiencing Peace and Joy</h2>
<img src="http://data.freehdw.com/bridge-over-the-green-river.jpg" alt="Lake reflecting green trees surronding the lake. There is a long wooden bridge over the lake">
Copy link

Choose a reason for hiding this comment

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

can we download the image and link to it with a relative path <img src="images/picture.jpg">

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium officiis ipsa rerum, deserunt nihil quod blanditiis dolorem, omnis possimus aspernatur maxime at eos ex pariatur! Things that bring me both peace and joy. Read more...</p>
</article>
<article>
<h2>Experiencing Peace</h2>
<img src="http://images.freehdw.com/800/nature-landscapes_other_wooden-house-in-forest_3295.jpg" alt="Small house in a forest. Morning sunrays falling over the trees and top of the house."
Copy link

Choose a reason for hiding this comment

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

can we download the image and link to it with a relative path <img src="images/picture.jpg">

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, vero inventore quas nam mollitia excepturi? Things that bring me peace. Read more...</p>
</article>
<h2>Experiencing Joy</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dignissimos sed aut culpa ullam cumque!Things that bring me joy. Read more...</p>
<article>

</article>
</main>
<footer>© 2023 Created with 💚 by Afsha</footer>
Copy link

Choose a reason for hiding this comment

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

Can we use a html entity, see https://www.w3schools.com/html/html_entities.asp
&copy;

<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
Comment on lines 49 to 50
Copy link

Choose a reason for hiding this comment

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

Can we delete these lines that are comments

</body>
Expand Down