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

North West 4- Bimbola Lasisi- Html/Css -Week1 #55

Closed
blasisi wants to merge 1 commit into from
Closed

North West 4- Bimbola Lasisi- Html/Css -Week1 #55

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
17 changes: 9 additions & 8 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,22 @@ Please complete the details below this message

# Your Details

- Your Name:
- Your City:
- Your Slack Name:
- Your Name: Bimbola lasisi
- Your City: Manchester
- Your Slack Name: Bimbola(Bee)

# Homework Details

- Module:
- Week:
- Module: css/html project
- Week: Week 1

# Notes

- What did you find easy?

Answer: css
- What did you find hard?

Answer: resizing and adjusting image on blog
- What do you still not understand?

Answer: adding column
- Any other notes?
Answer: N/A
121 changes: 120 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,125 @@
/**
* Add your custom styles below
*
* <style>

/* Create four equal columns that sits next to each other */

/* General style */
html, body{
margin: 0;
}

html{
box-sizing: border-box;
font-size: 15px;
}

/* 1. header style */
.header {
width: 100%;
background-color: rgb(179, 45, 45);
height: 70px;
display: flex;
justify-content: center;
align-items: center;
grid-column: 1fr;

}
header li{
list-style-type: none;

}

header li a{
text-decoration: none;
}

/* General style */
h1{
text-align:center;
text-transform: uppercase;
}

h2{
text-align:center;
text-transform: uppercase;
margin-bottom: 0;
font-size: 20%;
}

p{
text-align: center;
width:100%;
}
/* 2. Nav style */

.nav ul {
list-style: none;
}

.nav ul li{
display: inline-block;
}

.nav ul li a {
display: block;
text-decoration: none;
color:black;
padding: 10px 15px;
font-size: 10px;
}

/* 3. Main style */
main {
width: 100%;
background-color:white;

}
body{
font-family: Arial, Helvetica, sans-serif;
font-Size:15px;
margin: 0 auto;
text-align: center;
background-color: white;
color:black;
padding:10px;
}
/* first child style -target first element of the article */

article:first-child {
background-color: black;
color: white;
}

.article-header {
display: flex;

}

articles img {
max-width:140px;

}

section{
margin-bottom: 5em;
padding: 2.4rem;
}

/* Footer */
footer{
background-color: black;
color: white;
grid-column: 1fr 1fr;

}
footer li{
list-style-type: none;
}

@media screen and (max-width: 600px) {

/*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
Expand Down
113 changes: 93 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
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" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This is a description of my blog">
<title> MY Javascript 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" />

</head>

<body>
<!-- Add your HTML markup here -->

<header>
<h1> JS Documentation</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>

<main>
<section class="article">
<article>
<header>
<h2>
What is Lorem Ipsum?
</h2>
<img
src="https://dvg5hr78c8hf1.cloudfront.net/2016/06/17/13/45/01/cc2fac88-2f81-4cc5-9ec9-334042781fd0/1*OsjnQFK1i6CkjXQmTErAtw.jpeg"
alt=" JavaScript image">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
Comment on lines +31 to +47

@nax2uk nax2uk May 24, 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.

Well done you have added a title using the <h2> tag. 👍🏽
Please see below for improvements:

  1. You are missing a closing tag </header> in between the <articles></articles> block. Actually, you have instead put the closing </header> tag outside the <articles></articles> block
  2. The task also requires you to include a <summary></summary> block within the <articles></articles> block. Please can you add that to your code.

@blasisi blasisi May 25, 2021

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you , I will work on it Asap

</header>

<article>
<header>
<h2>
Why do we use it?
</h2>
<img src="https://www.tutorialrepublic.com/lib/images/javascript-illustration.png" alt=" JavaScript image">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</article>
Comment on lines +50 to +64

@nax2uk nax2uk May 24, 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.

Well done you have added a title using the <h2> tag. 👍🏽
Please see below for improvements:

  1. You are missing a closing tag </header> in between the <articles></articles> block. Actually, you have instead put the closing </header> tag outside the <articles></articles> block
  2. The task also requires you to include a <summary></summary> block within the <articles></articles> block. Please can you add that to your code.

</header>

<article>
<header>
<h2>
Where does it come from?
</h2>
<img src="https://cdn.educba.com/academy/wp-content/uploads/2019/03/introduction-to-javascript.png.webp"
alt=" An introduction to JavaScript image">
<p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem
Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32.</p>
</article>
Comment on lines +67 to +82

@nax2uk nax2uk May 24, 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.

Please see previous two comments above regarding the closing </header> tag and <summary> tag and improve on this code. Thanks.

</header>
</section>
</main>

<footer>
<h3>By Bimbola Lasisi</h3>
<p> Get to know us better </p>
<ul>
<li> CopyRight</li>
<li> Javascript</li>
</ul>
<a href="https://www.lipsum.com"> click me </a>
</footer>