🎤 • Podcast With Teachers

School website project focused on integrating and getting to know teachers through student-led podcasts. 
[only website, no podcasts]

💻 • Demo site

table of contents

1. html

   1. index.html
   2. podcast.html
   3. aboutProject.html
   4. aboutAuthors.html

2. css

   1. style.css
   2. styleAboutAuthors.css
   3. styleAboutProjects.css
   4. styleHomePageInf.css
   5. stylePodcast.css
   6. styleScroll.css

files of html

index.html

link with:

1. styles/styleHomePageInf (content under banner)
2. styles/style.css (main style)
3. style/styleScroll.css (scroll)
4. Google Fonts (font)
5. Fontello (icon)
6. (icon)

.wrapper

Connect #TopSite (header), .nav (navigation), .content (Main Content), footer.

#TopSite (header)

#TopSite is over navigation

logo In this class is logo and next to logo is text "Podcast".

.nav (Navigation)

.nav is responsible for navigation bar.

.content (Main Content)

.content (Main Content). In this class is all content.

Animate Banner

.glassEffect This class is responsible for glass effect (background article) and size of article.

in .glassEffect:

1. h1 for title
2. span for gold color font

footer

.footer_text is responsible for copyright.

Div with p is responsible for icon.

A with .totop is responsible for scroll to top.

And script to keep navi bar on screen when scrolling down.

podcast.html

link with:

1. styles/style.css (main style)
2. styles/stylePodcast.css (style for podcast.html)
3. styles/styleScroll (scroll)
4. Google Fonts (font)
5. Fontello (icon)
6. (icon)

.wrapper

Connect #TopSite (header), .nav (navigation), .content (Main Content), footer.

#TopSite (header)

#TopSite is over navigation

logo In this class is logo and next to logo is text "Podcast".

.nav (Navigation)

.nav is responsible for navigation bar

.content (Main Content)

.content (Main Content) In this class is all content.

.glassEffect This class is responsible for glass effect (background player) and responsible for size player Link to podcast player https://www.youtube.com/watch?v=7UZbS-NBiD8 . In music player remain right site (later rename for .podcastPlayer) and volume bar. In .glassEffect:

1. h1 for title
2. span for gold color font
3. p for text in article

footer

.footer_text is responsible for copyright.

Div with p is responsible for icon.

A with .totop is responsible for scroll to top.

And script to keep navi bar on screen when scrolling down.

aboutProject.html

link with:

1. styles/styleAboutProject.css (style for aboutProject.html)
2. styles/style.css (main style)
3. styles/styleScroll (scroll)
4. Google Fonts (font)
5. Fontello (icon)
6. (icon)

.wrapper

Connect #TopSite (header), .nav (navigation), .content (Main Content), footer.

#TopSite (header)

#TopSite is over navigation

logo In this class is logo and next to logo is text "Podcast".

.nav (Navigation)

.nav is responsible for navigation bar

.content (Main Content)

.content (Main Content) In this class is all content.

.glassEffect This class is responsible for glass effect (background) and size for article. In .glassEffect:

1. h1 for title
2. span for gold color font
3. p for text in article

footer

.footer_text is responsible for copyright.

Div with p is responsible for icon.

A with .totop is responsible for scroll to top.

And script to keep navi bar on screen when scrolling down.

aboutAuthors.html

Link with:

1. styles/styleAboutAuthors.css (style for aboutAuthors.html)
2. styles/style.css (main style)
3. styles/styleScroll (scroll)
4. Google Fonts (font)
5. Fontello (icon)
6. (icon)

.wrapper

Connect #TopSite (header), .nav (navigation), .content (Main Content), footer.

#TopSite (header)

#TopSite is over navigation

logo In this class is logo and next to logo is text "Podcast".

.nav (Navigation)

.nav is responsible for navigation bar

.content (Main Content)

.content (Main Content) In this class is all content.

.glassEffect This class is responsible for glass effect (background article) and size for article. In .glassEffect:

1. h1 for title
2. span for gold color font
3. p for text in article

footer

.footer_text is responsible for copyright.

Div with p is responsible for icon.

A with .totop is responsible for scroll to top.

And script to keep navi bar on screen when scrolling down.

podcast player

Copied from YT: https://bit.ly/3tdPJ89