Skip to content

The new Website #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
spheppner wants to merge 1 commit into
base: master
Choose a base branch
from
Open

The new Website #1

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
109 changes: 108 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,108 @@
Hello, coding teachers of this world
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
body, html {
height: 100%;
line-height: 1.8;
}
/* Full height image header */
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("/w3images/mac.jpg");
min-height: 100%;
}
.w3-bar .w3-button {
padding: 16px;
}
</style>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card-2" id="myNavbar">
<a href="#home" class="w3-bar-item w3-button w3-wide">LOGO</a>
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<a href="#podcasts" class="w3-bar-item w3-button"><i class="fa fa-th"></i> PODCASTS</a>
<a href="#home" class="w3-bar-item w3-button"><i class="fa fa-home"></i> HOME</a>
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars w3-padding-right w3-padding-left"></i>
</a>
</div>
</div>

<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
<a href="#podcasts" onclick="w3_close()" class="w3-bar-item w3-button">PODCASTS</a>
<a href="#pricing" onclick="w3_close()" class="w3-bar-item w3-button">DONATING</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">CONTACT</a>
</nav>

<!-- Header with full-height image -->
<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
<div class="w3-display-left w3-padding-xxlarge w3-text-black">
<span class="w3-jumbo w3-hide-small">Coding Teacher Podcast</span><br>
<span class="w3-xxlarge w3-hide-large w3-hide-medium">Coding Teacher Podcast</span><br>
<p><a href="#about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Podcast for coding and teaching.</a></p>
</div>
</header>

<!-- Podcast Section -->
<div class="w3-container w3-padding-128" id="podcasts">
<h3 class="w3-center">Podcasts</h3>
<a href = "">
<div class="w3-row-padding w3-center" style="margin-top:64px">
<div class="w3-quarter">
<p>03.05.2017</p>
<p class="w3-large">Interview with Simon Heppner</p>
<p>Interview with probably the youngest programming teacher of Europe.</p>
</div>
</a>
<a href = "">
<div class="w3-row-padding w3-center" style="margin-top:64px">
<div class="w3-quarter">
<p>03.05.2017</p>
<p class="w3-large">Interview with Simon Heppner</p>
<p>Interview with probably the youngest programming teacher of Europe.</p>
</div>
</a>
</div>

<!-- Promo Section "Statistics" -->
<div class="w3-container w3-row w3-center w3-dark-grey w3-padding-64">
<div class="w3-quarter">
<span class="w3-xxlarge">2+</span>
<br>Members
</div>
<div class="w3-quarter">
<span class="w3-xxlarge">1+</span>
<br>Podcasts
</div>
</div>

<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64">
<a href="#home" class="w3-button"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
<i class="fa fa-facebook-official w3-hover-text-indigo"></i>
<i class="fa fa-flickr w3-hover-text-red"></i>
<i class="fa fa-instagram w3-hover-text-purple"></i>
<i class="fa fa-twitter w3-hover-text-light-blue"></i>
<i class="fa fa-linkedin w3-hover-text-indigo"></i>
</div>
</footer>

</body>
</html>