Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!

Difference between revisions of "Cedrick"

From wiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!-- Test Trial-->
 
 
<nowiki>#</nowiki>sidebar{
 
 
float : right;
 
 
width: 30%;
 
 
background - color: #333;
 
 
color:#fff;
 
 
paddling: 15px;
 
 
box-sitting: border-box;
 
 
 
<img src="/pix/samples/18m.jpg" width="100" height="121" alt="Photo of 3 cats">
 
 
<p>This image is resized using the 'width' and 'height' attributes of the 'img' tag.</p>
 
}
 
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
 +
<link rel="stylesheet" href="https://www.google.com/w3.css">
 
<head>
 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
<style>
 
<style>
body {margin: 0;}
+
body {
 
+
   background-color: linen;
ul.topnav {
 
  list-style-type: none;
 
  margin: 0;
 
  padding: 0;
 
  overflow: hidden;
 
   background-color: #333;
 
}
 
 
 
ul.topnav li {float: left;}
 
 
 
ul.topnav li a {
 
  display: block;
 
  color: white;
 
  text-align: center;
 
  padding: 14px 16px;
 
  text-decoration: none;
 
 
}
 
}
  
ul.topnav li a:hover:not(.active) {background-color: #111;}
+
h1 {
 
+
  color: maroon;
ul.topnav li a.active {background-color: #4CAF50;}
+
  margin-left: 40px;
 
+
}  
ul.topnav li.right {float: right;}
 
 
 
@media screen and (max-width: 600px) {
 
  ul.topnav li.right,
 
  ul.topnav li {float: none;}
 
}
 
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
  
<ul class="topnav">
+
<h1>This is a heading</h1>
  <li><a class="active" href="#home">Home</a></li>
+
<p>This is a paragraph.</p>
  <li><a href="#news">News</a></li>
 
  <li><a href="#contact">Contact</a></li>
 
  <li class="right"><a href="#about">About</a></li>
 
</ul>
 
 
 
<div style="padding:0 16px;">
 
  <h2>Responsive Topnav Example</h2>
 
  <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
 
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
 
  <h4>Resize the browser window to see the effect.</h4>
 
</div>
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 09:42, 18 November 2019

<!DOCTYPE html> <html> <link rel="stylesheet" href="https://www.google.com/w3.css"> <head> <style> body {

 background-color: linen;

}

h1 {

 color: maroon;
 margin-left: 40px;

} </style> </head> <body>

This is a heading

This is a paragraph.

</body> </html>