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

West Midlands Class 2 - Nirmeet Kaur Baweja - HTML/CSS - Week 1 #14

Closed
nirmeet-baweja wants to merge 6 commits into from
Closed

West Midlands Class 2 - Nirmeet Kaur Baweja - HTML/CSS - Week 1 #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b1f3899
Basic layout of the blog
nirmeet-baweja Nov 10, 2020
fe92957
Added brief description about the videos in index.html.
nirmeet-baweja Nov 10, 2020
9772795
Added the articles to index.html
nirmeet-baweja Nov 13, 2020
f3c3919
Added the css styling to the page
nirmeet-baweja Nov 13, 2020
1577c72
Added the header image to git repository
nirmeet-baweja Nov 13, 2020
1575dcf
Added details to pull_request_template
nirmeet-baweja Nov 13, 2020
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
10 changes: 5 additions & 5 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ London Class 7 - Chris Owen - HTML/CSS - Week 1

# Your Details

- Your Name:
- Your City:
- Your Slack Name:
- Your Name: Nirmeet Kaur Baweja
- Your City: West Midlands
- Your Slack Name: Nirmeet Kaur Baweja

# Homework Details

- Module:
- Week:
- Module: HTML/CSS
- Week: Week 1
1 change: 1 addition & 0 deletions css/illustration-learn-videos.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
155 changes: 154 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,157 @@
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
*/

/* color palette suggestion
purple : #240747
red : #eb2632
peach : #f0ab8d
beige : #f6e4ad
*/

/* Contains the styles applied to whole HTML document */
html {
font: 1rem/1.56 ubuntu,Verdana,Arial,sans-serif;
}

/* Contains the styles applied to the body of the document */
body {

}

/* Contains styles applied to the main content of the document */
main {
display : flex;
flex-direction: row;
justify-content: space-around;
background-color : #f05748;
/* flex: row; */
/* margin : auto auto auto 5%; */
}

/* Contains styles applied to the main content of the document */
.mainArticles {
width : 60%;
/* margin : auto auto auto 5%; */
}

/* Contains the styling applied to the side bar of the page */
.sideBar {
width : 40%;
}

.mainArticles, .sideBar {
margin : 1%;
background-color : #f2f4f6;
}

/* Specify maximum width for objects so that they do not overflow the container */
image, object, video, embed {
max-width : 100%;
}

/* Contains styles applied to the header of the page -
which comprises of the main heading, paragraph and image */
header {
position : relative;
background-color: white;
}

header img {
width : 100%;
opacity: 80%;
}

.headerText h1 {
text-align : center;
position : absolute;
top : 15%;
left : 60%;
transform : translate(-75%, -50%);
color : black;
}

.headerText p {
text-align : center;
position : absolute;
top : 37%;
left : 60%;
transform : translate(-75%, -50%);
color : black;
}

article {
margin : 2rem;
padding : 2rem;
}

article p {
margin-bottom : 2rem;
}

.mainArticles article:first-of-type {
background-color: #c0c6ce;
}

.mainArticles article:first-of-type:hover {
font-size : 102%;
color : white;
background-color : #125394;
}

.videoWrapper {
position : relative;
height : 0;
padding-bottom : 56.25%; /* 16:9 */
}

.videoWrapper iframe {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}

.signUp {
width : 60%;
margin : 10% auto;
padding : 2rem;
background-color: #125394;
border-radius: 10%;
color : #f3f3f3;
text-align : center;
}

.signUp .emailField {
min-height : 30px;
min-width : 40px;
}

button {
min-width : 58px;
min-height : 48px;
margin : 1rem;
padding : 1rem;
border-radius : 10%;
background-color: #de8d3c;
font-size : 1.25rem;
}

.signUp :last-child {
color : #749cc1;
}

a {
color : #f05748;
text-decoration : none; /* Remove underline from links */
}

a:visited {
color : #de8d3c;
}

footer {
text-align : center;
}
158 changes: 138 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,140 @@
<!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" />
<title>Curated Collection Of Amazing Videos</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>
<header>
<img src="css/illustration-learn-videos.svg">
<div class="headerText">
<h1>
A Personal Curated Collection Of My Favourite Videos
</h1>
<p>
In this blog you will find a vast collection of videos created by creators on Youtube on topics ranging from philosophy to science to everyday life issues.
</p>
</div>
</header>

<main role="main">
<section class="mainArticles">
<article>
<h2>
The tyranny of merit | Michael Sandel
</h2>
<p>
What accounts for our polarized public life, and how can we begin to heal it? Political philosopher Michael Sandel
offers a surprising answer: those who have flourished need to look in the mirror. He explores how "meritocratic hubris"
leads many to believe their success is their own doing and to look down on those who haven't made it, provoking
resentment and inflaming the divide between "winners" and "losers" in the new economy. Hear why we need to reconsider
the meaning of success and recognize the role of luck in order to create a less rancorous, more generous civic life.
</p>
<div class="videoWrapper">
<iframe width="983" height="553" src="https://www.youtube.com/embed/Qewckuxa9hw" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</article>

<article>
<h2>
Hexagons are the Bestagons | CGP Grey
</h2>
<p>
Why hexagons can be seen everywhere in nature? Why does nature prefer the hexagon over all other shapes? What is so special about a hexagon that makes it stand out from rest of the polygons? CGP Grey dives deep into this question and explains why the 'Hexagons are the Bestagons'!
</p>
<div class="videoWrapper">
<iframe width="983" height="553" src="https://www.youtube.com/embed/thOifuHs6eY" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</article>

<article>
<h2>
There's No Such Thing As Orange | exurb1a
</h2>
<p>
“We have been to the moon, we have charted the depths of the ocean and the heart of the atom, but we have a fear of
looking inward to ourselves because we sense that is where all the contradictions flow together.” – Terence McKenna
</p>
<p>
We know so much about the world around us. But, we don't know yet how matter, how chemistry end up going from the electrical signals in your brain to the experience in your mind. This is called the 'Hard Problem Of Consciousness'. And this is the greatest mystery in history!
</p>
<div class="videoWrapper">
<iframe width="983" height="553" src="https://www.youtube.com/embed/WX0xWJpr0FY" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</article>
</section>

<aside class="sideBar">
<section class="signUp">
<p>
Stay up to date with our latest collections.
</p>
<input class="emailField" type="email" placeholder="Your email address">
<br>
<button>Subscribe</button>
<br>
<p>
Your email is safe with us. We do not spam.
</p>
</section>

<article>
<h2>
What’s up with... Net neutrality, QR codes, Regulating platforms
</h2>
<p>
<ul>
<li>Net neutrality under the Democrats</li>
<li>QR Codes are doing very well in Asia and South America</li>
<li>How the German government is approaching platform regulation</li>
<li>Smartphone ups and downs</li>
</ul>
</p>
<p>
If Joe Biden becomes US president - an increasingly likely scenario - it could start another phase in the net neutrality
saga. <a target="_blank" href="https://www.telecomtv.com/content/transformation/what-s-up-with-net-neutrality-qr-codes-regulating-platforms-40066/">...Read more</a>
</p>
</article>

<article>
<h2>
Millennial Cracks YouTube Algorithm — Makes $1.8 Million In 2020 (So Far)
</h2>
<p>
As an aspiring YouTube superstar myself, I’ve been following the progress of a very young but already well-established
YouTube superstar by the name of Graham Stephan.
</p>
<p>
I first wrote about him in July 2019 in How This Real Estate Agent Made $100,000 In One Month From His YouTube Channel.
While that was certainly remarkable and time, Graham Stephan has continued to power forward throughout 2019 and 2020.
That’s why it’s time for an update. <a target="_blank" href="https://www.forbes.com/sites/jrose/2020/10/28/millennial-cracks-youtube-algorithm---makes-18-million-in-2020-so-far/">...Read more</a>
</p>
</article>
</aside>

</main>

<hr>

<footer>
All the content linked on this page is the rightful property of their owners and creators. I have simply embedded the links to the videos for educational purposes only.
</footer>

</body>

</html>