ryan youtube project

In this example below you will see how to do a ryan youtube project with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ryan youtube project </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
	<head>
		<meta charset="utf-8"> <!-- this is the code for saying its english -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- code for using the latest Interexploler edge -->
		<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- device code ex-iphone -->
		<title>Dharma Yoga - Connect With Us</title>
		<link href="css/jquery.bxslider.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet">
		<link href="css/nav.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet"/>
		<link rel="shortcut icon" type="image/png" href="http://www.w3newbie.com/wp-content/uploads/yoga_favicon.png"/>
	</head>
<body>

<!--- Start Navigation -->
		<script src="js/jquery-1.11.2.min.js"></script>
		<script src="js/main.js"></script> <!--- For Navigation -->

<!--- End Navigation -->
<!--- Start Slider -->
		<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
			
		<script type="text/javascript">
			$('.slider1').bxSlider({
				mode: 'fade',
				captions: false,
				auto:true,
				pager:false,
				
			});
			$('.slider2').bxSlider({
				pager:false,
				captions: true,
				maxSlides: 3,
				minSlides: 1,
				slideWidth: 230,
				slideMargin: 10
			});
			$('.slider3').bxSlider({
				mode: 'fade',
				captions: false,
				auto:true,
				pager:false,
				controls:false,
			});
		</script>
<!--- End Slider -->

<div id="hidden-drew-credit">
  <a href="http://www.w3newbie.com">Designed by Drew Ryan</a>
</div>
	</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/ryan-youtube-project-VjWvAY */
@import url(https://fonts.googleapis.com/css?family=Merienda:400,700); /*--- Nav Font --*/
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700); /*--- Body Font --*/
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two); /*--- Heading Font --*/



/*--- Start Navigation Style --*/
nav {
    box-shadow: 3px 4px 24px 0 rgba(0, 0, 0, 0.07);
	margin-top: 2px;
	background: #FCEBB6;
font-family: 'Merienda', cursive;
}
.nav ul {
	width: 100%;
	overflow:hidden;
	list-style:none;
}
.nav-button:hover {
	cursor:pointer;
}
.navigation {
	clear: both;
	width: 100%;
	position: relative;
}
.nav a {
	color:#5E412F;
	text-transform: uppercase;
	text-decoration:none;
}
body .nav .nav-menu li a {
	display:inline-block;
	padding:15px 20px;
	color:#5E412F;
	font-size: 18px;
	font-weight: 700;
}
.nav.yoga .nav-menu li.active a {
	color: #5E412F;
	text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
	color: #5E412F;
	text-decoration: underline;
}
.nav.yoga .nav-toggled {
	/*width:100%;*/
	min-height:36px;
	border-radius:6px;
}
.nav.yoga .nav-toggled-controls {
	display:block;
	height:36px;
	color: #5E412F;
	text-align:left;
	position:relative;
}
.nav.yoga .nav-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
}
.nav.yoga .nav-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}
.nav.yoga .nav-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background: #5E412F;
	width:24px;
}
.nav-toggled-controls{
	border-bottom: 0px solid #5E412F;
}
.nav.yoga .nav-toggled ul li a {
	display:block;
	width:100%;
	background-color:#FCEBB6;
	text-align:left;
	padding:10px 0px 10px 15px;
	border-bottom:1px solid #444444;
	text-align: center;
	font-size: 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li a:active {
	background-color:#FCEBB6;
	color: #5E412F;
	border-top:1px solid #5E412F;
}
.nav.yoga .nav-toggled ul li a:hover {
	background: #FCEBB6;
	text-decoration: none;
	color: #5E412F;
	border-bottom: 1px solid #F07818;
}
.nav.yoga .nav-toggled ul li {
	position: relative;
}
.toggle-sm:after {
	position: absolute;
	right: 15px;
	top: 10px;
	font-size: 18px;
	line-height: 25px;
}
.nav .nav-menu {
	text-align: center;
	overflow: visible;
	min-height: 56px;
}
.nav .nav-menu li {
	display:inline-block;
	padding:0px;
	margin:0px !important;
	position: relative;
}
.nav-button:hover {
	cursor:pointer;
}
.nav .nav-toggled ul {
	display:none;
	margin:0px ;
	padding:0px ;
}
.nav ul {
	overflow: visible;
}
body .nav .nav-menu li a {
	padding: 15px 30px;
}
#hidden-drew-credit a {
	visibility: hidden;
}
/*--- End Navigation Style --*/

Comments