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

ZA2-ChrisKoetzee-HTML-CSS-Coursework-Week1 #132

Open
ChrisKoetzee wants to merge 2 commits into
base: master
Choose a base branch
from
Open

ZA2-ChrisKoetzee-HTML-CSS-Coursework-Week1 #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b720767
still need to add a navbar and a serch bar
ChrisKoetzee May 30, 2022
b910f1a
Completed Project
ChrisKoetzee Jun 2, 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
Binary file added Kobe Bryant wallpaper 1920x1080 image bank Imagenes Gratis.jpg
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.
131 changes: 131 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,134 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

body {
color: red;
font-weight: bolder;
justify-content: center;
}
.nav-link {
display: inline-block;
margin-top: 0;
padding: 1px;
text-align: right;
height: 0vh;
}

#navbar {
border: solid red 5px;
border-radius: 10px;
padding: 1px;
margin: 1px;
background-color: yellow;
font-size: 15px;
position: fixed;
top: 0;
width: 100%;
font-weight: bolder;
overflow: hidden;
height: auto;
z-index: 2;
}

header {
text-align: center;
font-weight: bolder;
font-size: 3rem;
}

#Home {
/* display: block; */
background-image: url("https://pbs.twimg.com/media/EPO6ep0WoAAN9ri.jpg");
background-size: 100%;
color: aqua;
border: solid red 5px;
border-radius: 10px;
padding-top: 50em;
padding: 2em;
justify-content: center;
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
height: 100vh;
}

#img-div {
justify-content: center;
position: relative;
padding: 5px;
}

#image {
border: 5px white solid;
border-radius: 25px;
margin-top: 5em;
height: 30rem;
width: 50rem;
z-index: -1;
}

#img-caption {
color: rgb(246, 250, 3);
text-align: center;
font-size: 30px;
}

#intro {
padding-left: 180px;
padding-right: 180px;
font-size: 20px;
}

main {
margin: 0 auto;
}

article:first-child {
background-color: yellow;
color: red;
border: solid aqua 3px;
border-radius: 4px;
padding: 2rem;
font-style: italic;
}


#Articles {
background-image: url("https://pbs.twimg.com/media/EPO6ep0WoAAN9ri.jpg");
background-size: 100%;
color: aqua;
border: solid red 5px;
border-radius: 10px;
justify-content: center;
padding: 8rem;
margin-top: 2em;
margin-bottom: 2em;
height: 100vh;
}

.links {
color: blue;
}

#Gallery {
background-image: url("https://pbs.twimg.com/media/EPO6ep0WoAAN9ri.jpg");
background-size: 100%;
color: aqua;
border: solid red 5px;
border-radius: 10px;
padding: 10em;
margin-top: 2em;
margin-bottom: 2em;
justify-content: center;
height: 100vh;

}

footer {
background-color: yellow;
color: red;
border: solid red 5px;
border-radius: 10px;
padding: 2rem;
}
150 changes: 130 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,132 @@
<!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>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>
<nav id="navbar">
<header>Kobe Bryant - Dr of Work Ethic</header>
<a class="nav-link" href="#Home">Home</a>
<a class="nav-link" href="#Articles">Articles</a>
<a class="nav-link" href="#Gallery">Gallery</a>
</nav>

<main>
<section id="Home">
<div id="img-div">
<img id="image" src="Kobe Bryant wallpaper 1920x1080 image bank Imagenes Gratis.jpg">
<figcaption id="img-caption"><strong>Winners don't rest in the middle, they rest at the end</strong></figcaption>
</div>

<p id="intro">
Kobe Bryant entered the NBA with supreme confidence, chart-topping machismo and unbelievable athletic skills,
ready to compete at age 17. And for nearly two decades, his manic-driven will to compete set him apart. In all
facets of life. He never thought twice about taking a shot in any of his 1,280 NBA regular-season games or any
playoff contest. He was gutsy. NBA GMs, scouts and opposing coaches consistently called him one of the top clutch
players in the game.
</p>
</section>



<section id="Articles">
<article>
<h2>Life of the Mamba</h2>
<p>
Kobe Bryant was born the year 1978 in Philadelphia U.S.A. on the 23rd of August to Mother (Pamela Bryant) and
Father (Joe "Jellybean" Bryant). He was the youngest of 3 syblings and had 2 older sisters (Sharia and Shaya
Bryant). Survived by his Wife and 3 daughters, Kobe Bryant as well as his oldest Daughters (Gianna) lives
tragically ended on the 26 January 2020 along with 7 other passengers. Born in Philly, but he was raised in
Italy until the age of 13 years old, when his family returned to the U.S.A. Coming back he wasnt one of the
popular kids so this gave him time to work on his craft and put in the work
</p>
<a class="links" href="https://en.wikipedia.org/wiki/Kobe_Bryant"><strong>The life of Kobe</strong></a>
</article>
<article>
<h2>Mamba Achievements</h2>
<p>
He was the 13th overall pick for the Charlotte Hornets at the 1996 NBA draft, but was then traded to the LA
Lakers as a rookie. In 1997 he earned the reputation of being a high flyer by winning the slam dunk contest and
was named an allstar by his second season. He was a 5 Time NBA Champion, 2 Time NBA Finals MVP, 18 Time NBA
Allstar, 4 Time, NBA Allstar MVP, 11 Time NBA All star First team, 2 Time NBA Allstar Second team, 9 Time NBA
All Defensive First team, 3 Time NBA All Defensive Second team, 2 Time NBA Scoring Champion, NBA Slam Dunk
Contest Champion, 1 Time NBA All Rookie Second team, NBA 75TH Anniversary team, First team Parade All American
1996, Fourth team Parade All American 1996, MacDonalds All American 1996
</p>
<a class="links" href="https://en.wikipedia.org/wiki/List_of_career_achievements_by_Kobe_Bryant">The Achievements
of Kobe</a>
</article>
<article>
<h2>Mamba Mentality</h2>
<p>
Known as one of the fiercest competitors in sports history, Kobe Bryant saw his ‘Black Mamba’ alter ego as an
assassin, obsessed with greatness and eliteness. That pursuit and drive to conquer even the most basic
fundamentals — of whatever it is you’re trying to achieve or accomplish — quickly became a hashtag and then a
movement and brand known as the “Mamba Mentality”. “The Mamba mentality is a way of life,” Bryant said. “It’s
not an attitude per se but a way to live. Just trying to get better every single day. It’s not living with
a bravado or anything like that, it’s just the simplest form of trying to get better at whatever it is you’re
doing. … That’s all the Mamba mentality is: Just trying to get better every single day.”
</p>
<a class="links"
href="https://www.etonline.com/kobe-bryant-day-what-mamba-mentality-meant-in-his-own-words-140424">The Mamba
Mentality</a>
</article>
</section>
<section id="Gallery">
<h1>Gallery</h1>
<iframe width="300" height="200" src="https://www.youtube.com/embed/lUcdx4W8Xes" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/9_tYXFbgjZk" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/kq7OLZGDwDk" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/4gi9y3sTrXE" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/_0nkF0OPu_w" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/9HO7KxO3nGc" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/_nKGvbcbNrI" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/h3Z3bFSutP0" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<iframe width="300" height="200" src="https://www.youtube.com/embed/q6iwKGA6bEs" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

</section>
</main>

<footer>
Because of his work ethic Kobe Bryant proves that greatness is possible for everyone if you are will to put in the
work
<a class="links" href="https://mambaandmambacita.org/">Mamba Sports Institute</a>
</footer>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>

</html>