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

London 9-Leila Farsani-HTML / CSS Project 1-Week 2 #270

Open
leilafarsani wants to merge 4 commits into
base: master
Choose a base branch
from
Open

London 9-Leila Farsani-HTML / CSS Project 1-Week 2 #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f636a38
HTMAL 1
leilafarsani Oct 28, 2022
d7f228f
Initial HTML
leilafarsani Oct 28, 2022
a8dcbec
css2
leilafarsani Oct 28, 2022
4fa2b7f
better look
leilafarsani Oct 28, 2022
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 README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ It should include the following elements:
- The `.html` page and a linked `.css` file applies a consistent color scheme to links and text on your page.
- A page header with a title and description for the site.
- An articles section with three articles, each including a title, summary and a link.



- A page footer containing info about you or the site.
- Proper use of the semantic HTML tags we discussed.
- Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others.
Expand Down
108 changes: 108 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,111 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
height: 100%;
border: 0;
font-weight: 400;
}
header{
background: #d46f98;
padding: 30px;
text-align: center;
margin: auto;
margin: 0;
color: rgb(33, 4, 17);
font-family: 'Century Gothic',sans-serif;
height: 300px;
}
main {
display: flex;
flex-direction: column;
margin-top: -60px;
}
.list {
display: flex;
justify-content: center;
padding: none;
align-items: center;
flex-wrap: wrap;
list-style: none;

}

.items{
display: flex;
padding: 0 1.5rem;
}

.items:first-child > a{
color: var();

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This will have no effect

}

.items:first-child > a:hover{
color: var(--orange);
}
.article1 {

background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 12rem 0;
color: rgb(35, 124, 78);;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: none;
}
.article1 h2 {
font-weight: 200;
font-size: 45px;
text-align: center;
}

.article1 h5 {
margin-top: -1rem;
margin-bottom: 2rem;
font-weight: 50;
font-size: 40px;
}

.article1 button {
text-decoration: none;
color: #3b081d;
}
section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 4rem;
}

section h2 {
font-weight: 3ß00;
font-size: 35px;
}

footer {
padding-bottom: 2rem;
text-align: center;
}

hr {
display: block;
width: 90rem;
height: 1px;
border: 1px;
border-top: 1px solid rgb(140, 140, 141);
margin: 1em;
padding: 0.5rem;
}

.box{
width: 800px;
height: 200px;
margin: 1em;
}
49 changes: 46 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,60 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>Mathsli</title>
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1>Mathsli</h1>
<h3>Do you love Maths? </h3>

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

There's no content below this heading, so it makes more sense as a <div /> or a <p />

<h5>Or Maybe...?</h5>
<p>Here is the right place for you to be anyway.</p>
<nav>
<ul class="list">
<li class="items"><a class="links" href="#"> About Mathli</a></li>
<li class="items"><a class="links" href="#"> Testimonials</a></li>
<li class="items"><a class="links" href="#"> Contact</a></li>
<li class="items"><a class="links" href="#"> Login</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article class="article1">

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

article is suitable for content that will be shown on other web sites eg newspaper articles or blog posts

<h1>About Mathsli</h1>

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

There should only be one h1 on each page. Use it to wrap the title that best describes what the page is about

<h4>Mathsli helps you to learn and love Maths.</h4>
<img src="https://clipartion.com/wp-content/uploads/2015/11/what-are-the-top-biggest-brain-damaging-habits-magical-maths.jpg"

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

For a content image like this, set alt text to something that describes the image (eg 'A picture of a human brain working like a mechanical machine' or something)

alt="">
<h2>

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I think this is a good choice & correct as h2 because it's the next level down from the preceding heading (h1) and has content after it 👍

We are here to help.
</h2>
<button><a href="#">More About US</a></button>

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

It's invalid to wrap a in button. If it looks like a button, but it acts like a link, just use a and style it like a button using CSS

<h3>

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This isn't a heading, it doesn't have content after it, better as a p

All our teachers are professionals with strong academic backgrounds who
enjoy helping students understand concepts deeply, solving challenging questions and also familiar them with
the beauty of mathematics.
</h3>
<h4> Thank you for visiting our website.
Please write down any comment you have in the box bellow.
</h4>
</article>
<section>
</main>
<textarea name="comment"

@jonnywyatt jonnywyatt Oct 30, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Every form element should have a label associated with it, to help screen reader users. A placeholder isn't a good substitute as it disappears when the user clicks on the input box.

id="comments"
class="box"
placeholder="Enter your comment here...">
</textarea>
<footer>
<hr>
Contact us for more details from the above contact section.
</footer>
</body>
</html>