Skip to content

Commit

Permalink
css template for featured lessons added
Browse files Browse the repository at this point in the history
  • Loading branch information
@JessicaML
JessicaML committed Mar 4, 2018
1 parent a1d8e3a commit b94d589
Show file tree
Hide file tree
Showing 13 changed files with 319 additions and 991 deletions.
33 changes: 28 additions & 5 deletions atoms/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<head>
<meta charset="utf-8">
<title>Atoms</title>
<link href="../../css/bootstrap.css" rel="stylesheet">
<link href="../../css/lesson_template.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/lesson_template.css" rel="stylesheet">
<link rel='apple-touch-icon' sizes='57x57' href='../../images/favicons/apple-icon-57x57.png'>
<link rel='icon' type='image/png' , sizes='192x192' , href='../../images/favicons/android-icon-192x192.png'>
<link rel='icon' type='image/png' , sizes='96x96' , href='../../images/favicons/favicon-96x96.png'>
Expand All @@ -21,6 +21,30 @@
<body>
<!--[if lt IE 7]>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="../index.html">Home</a>
</li>
<li>
<a href="../navigation.html">All lessons</a>
</li>
</ul>
</div>
</nav>
<div class="fond">
<div id="forb" style="float:left;" class="style_prevu_kit">
</div>
<div id="button" style="float:left;" class="button-flip">
<a id="button" class="active" href="#text">
<button style="color: #fff; margin-top: 50px;" type="button" class="btn" href="#text">More info</button>
</a>
</div>
<div id="forb" style="float:right;" class="style_prevu_kit">
</div>
</div>
<section id="top">
<div class="box"></div>
<div class="box2"></div>
Expand Down Expand Up @@ -60,7 +84,7 @@
</defs>
</svg>
</section>
<section id="info">
<section id="text">
<div>
<h1>Atomic structure</h1>
<p>All substances are made from tiny particles called <span style="color:#ff4e40;">atoms</span>. An atom has a small central nucleus made up of smaller sub-atomic particles called <span style="color:#149dcc;">protons and neutrons</span>. The nucleus is surrounded by even smaller sub-atomic particles called <span style="color:#00ffb5;">electrons</span>.</p>
Expand All @@ -74,5 +98,4 @@ <h1>Atomic structure</h1>
<script src="js/script.js"></script>
</body>

</html>
Contact GitHub API Training Shop Blog About
</html>
284 changes: 0 additions & 284 deletions atoms/styles/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@
*/


body
{ margin: 0;
padding: 0;
font-family: arial;
font-size: 62.5%;
}


article,
aside,
details,
Expand Down Expand Up @@ -143,279 +135,3 @@ section#top {
}
}

section#top #pupil1 {
position: absolute;
top: -15px;
left: -32px;
width: 100%;
background: transparent url(eye/pupil.png) no-repeat center center;
height: 100%;
}


section#top #pupil2 {
position: absolute;
top: -15px;
left: -32px;
width: 100%;
background: transparent url(eye/pupil.png) no-repeat center center;
height: 100%;
}

section#top #cornea {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent url(eye/cornea.png) no-repeat center center;
height: 100%;
}

section#top #fovea {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent url(eye/fovea.png) no-repeat center center;
height: 100%;
}

section#top #cillary_muscle {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent url(eye/cillary_muscle.png) no-repeat center center;
height: 100%;
}

section#top #lens {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent url(eye/lens.png) no-repeat center center;
height: 100%;
}

section#top #conjunctiva {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent url(eye/conjunctiva.png) no-repeat center center;
height: 100%;

}

section#top #cornea_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}

section#top #pupil_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}
section#top #fovea_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}

section#top #cillary_muscle_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}

section#top #lens_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}

section#top #conjunctiva_label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;


}

.header-unit {
border: 2px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}

section#info {
position: relative;
background: grey;
width: 100%;
height: 100%;
color: #fff;
padding-top: 20px;
padding: 20px;
margin: -20px;
font-size: 1.4em;

}

section#top h1 {
font-size: 6em;
color: #444444;
text-transform: uppercase;
width: 80%;
text-align: justify;
line-height: 1.8em;
margin: 20px;
padding: 20px;
}



section#info h1 {
font-size: 3em;
text-transform: uppercase;
width: 80%;
text-align: justify;
line-height: 1.8em;
margin: 20px;
padding: 20px;
}

section#info h2 {
font-size: 2.5em;
width: 80%;
text-align: justify;
line-height: 1.8em;
margin: 20px;
padding: 20px;
}

section#info p {
font-size: 2em;
width: 80%;
text-align: justify;
margin: 20px;
padding: 20px;
}




section#info a {
color: #b5ffda;
text-decoration: none;
}


section#info a:hover
{
color:#fff;
text-decoration:none;
cursor:pointer;
}


section#about {
position: relative;
background: #b5ffda;
height: 300px;
width: 100%;
color: #555555;
padding-top: 0px;

}
section#about h1 {
font-size: 4em;
text-transform: uppercase;
margin: 20px;
padding: 20px;

}

section#about h2 {
font-size: 2.7em;
margin: 20px;
padding: 20px;
margin: 20px;
padding: 20px;

}

section#about p {
font-size: 1.4em;
width: 80%;
color: #555555;
text-align: justify;
line-height: 1.8em;
margin: 20px;
padding: 20px;


}


section#about a {
color: #3864ab;
text-decoration: none;
}


section#about a:hover
{
color:#fff;
text-decoration:none;
cursor:pointer;
}
Loading

0 comments on commit b94d589

Please sign in to comment.