Added dirocty from javascript to jquery

FromJavaScriptTojQuery-master/04-jQuery-TraversingMtDOM/03-traversing_sideways/css/style.css

@@ -0,0 +1,147 @@
+body{
+	font-family: 'Roboto', sans-serif;
+	/*background-image: url(img/code-institute.jpg);
+	background-size: cover;
+	color: #ffffff;*/
+	background-color: #eee;
+}
+
+h1{
+	font-size: 3em;
+	text-align: center;
+}
+h2{
+	font-size: 1em;
+	text-align: left;
+}
+p{
+	font-size: .9rem;
+}
+
+div{
+	border-radius: 4px;
+}
+
+.card_image{
+	width: 100%;
+}
+.bottom_button{
+	display: flex;
+	box-sizing:border-box;
+	border-radius: 4px;
+	display: block;
+	width: 100%;
+	background-color:rgba(129, 187, 201,.85);
+	text-align: center;
+	padding: 1em .75em;
+	text-decoration: none;
+	color: #fff;
+	
+}
+
+.card_bottom{
+	display: flex;
+	flex-flow:column;
+}
+.card_head{
+	flex:0;
+}
+.card_para{
+	flex:1 0 auto;
+}
+
+#container
+{
+	display: flex;		/* makes container a flexbox*/
+	flex-flow: row wrap; 	/* layout the boxes in rows and wrap them*/
+	box-sizing:border-box;
+	margin-right:auto;
+	margin-left:auto;
+	max-width:1050px;	
+}
+#logo{
+	width: 800px;
+	margin: auto;
+}
+
+.card{
+	flex:1; /* */
+	display: flex;	/* make the contents controllable by flexbox*/
+	flex-flow:column;	/* */
+	min-width: 240px; /**/
+	margin: 10px;
+	padding: 20px;
+	background-color: #fff;
+}
+
+#my_footer{
+	width:100%;
+	text-align: center;
+}
+#copyright{
+	margin-top:10px;
+	margin-bottom:10px;
+	
+}
+
+/*************************
+Navigation
+
+**************************/
+
+nav{
+	font-family: roboto;
+	background-color: #eee;
+	margin: 30px auto;
+	width: 100%;
+}
+ul{
+	display: flex;
+	justify-content:space-between;
+	flex-flow: row;
+	/*flex-flow: row-reverse;*/
+	/*justify-content:flex-end;*/
+	/*justify-content:space-around;*/
+	/*align-items:flex-start;*/
+	align-items:baseline;
+	border-radius: 10px;
+	list-style-type: none; /*Remove Bullets*/
+	padding: 0;	
+}
+li{
+	flex:1;
+	height: 30px;
+	/*width:10%;*/
+	/*border:2px solid #000;*/
+	/*background-color: #81BBC9;*/
+	/*border-radius: 10px;*/
+	font-family: Dosis;
+	padding:20px 20px 20px 20px;
+	text-align: center;
+	font-size: 1.3em;
+}
+
+#logoNav{
+	flex:6;
+	text-align: left;
+	font-size: 2em;
+	font-weight: bold;
+}
+
+.underline{
+	text-decoration:underline;
+}
+.border{
+	border: solid 5px #ccc;
+}
+
+
+@media screen and (max-width: 700px){
+	ul{
+		flex-flow: column;
+		align-items:center;
+	}
+	li{
+		font-size: 2em;
+	}
+}