Skip to content

B
BasicCssDemo
Commit 5f36fade authored by rakeshrrajan's avatar rakeshrrajan
Browse files
Options

init commit - Sync with Orgin 

* Css Basics
* Create Sample responsive website
   using css
parents
Pipeline #1041 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 485 additions and 0 deletions
      BasicCssDemo/Index.html 0 → 100644
      View file @ 5f36fade
      <!DOCTYPE html>
      <html>
      <head>
      <title>CSS Sample</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      </head>
      <body>
      <div class="container">
      <div class="box-1">
      <h1>Martin Luther King</h1>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans, the economically disadvantaged and all victims of injustice through
      peaceful protest. He was the driving force behind watershed events such as the Montgomery Bus Boycott
      and the 1963 March on Washington, which helped bring about such landmark legislation as the Civil Rights
      Act and the Voting Rights Act. King was awarded the Nobel Peace Prize in 1964 and is remembered each
      year on Martin Luther King, Jr. Day, a U.S. federal holiday since 1986.</p>
      </div>
      <div class="box-2">
      <h1>Goodbye World</h1>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,</p>
      <a class="button" href="">Read More</a>
      </div>
      <div class="categories">
      <h2>Categories</h2>
      <ul>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
      <li><a href="test.html">Category 5</a></li>
      </ul>
      </div>
      <form class="my-form">
      <div class="form-group">
      <label>Name: </label>
      <input type="text" name="name">
      </div>
      <div class="form-group">
      <label>Email: </label>
      <input type="text" name="email">
      </div>
      <div class="form-group">
      <label>Message: </label>
      <textarea name="message"></textarea>
      </div>
      <input class="button" type="submit" value="Submit" name="">
      </form>
      <div class="block">
      <h3>Heading</h3>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,
      </p>
      </div>
      <div class="block">
      <h3>Heading</h3>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,
      </p>
      </div>
      <div class="block">
      <h3>Heading</h3>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,
      </p>
      </div>
      <div class="clr"></div>
      <div id="main-block">
      <h3>Heading</h3>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,
      </p>
      </div>
      <div id="sidebar">
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans,
      </p>
      </div>
      <div class="clr"></div>
      <div class="p-box">
      <h1>Hello</h1>
      <h2>Goodbye</h2>
      </div>
      <ul class="my-list">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      </ul>
      </div><!-- ./container -->
      <a class="fix-me button" href="">Hello</a>
      <div style="margin-top:500px;"></div>
      </body>
      </html>
      \ No newline at end of file
      BasicCssDemo/css/Style.css 0 → 100644
      View file @ 5f36fade
      /*
      *{
      margin:0;
      padding:0;
      }
      */
      body{
      background-color:#f4f4f4;
      color:#555555;
      font-family: Arial, Helvetica, sans-serif;
      font-size:16px;
      font-weight:normal;
      /* Same as above */
      font: normal 16px Arial, Helvetica, sans-serif;
      line-height:1.6em;
      margin:0;
      }
      a{
      text-decoration: none;
      color:#000;
      }
      a:hover{
      color:red;
      }
      a:active{
      color:green;
      }
      a:visited{
      }
      .container{
      width:80%;
      margin:auto;
      }
      .button{
      background-color:#333;
      color:#fff;
      padding:10px 15px;
      border:none;
      }
      .button:hover{
      background:red;
      color:#fff;
      }
      .clr{
      clear:both;
      }
      .box-1{
      background-color:#333;
      color:#fff;
      border-right:5px red solid;
      border-left:5px red solid;
      border-top:5px red solid;
      border-bottom:5px red solid;
      border-width:3px;
      border-bottom-width:10px;
      border-top-style:dotted;
      border: 5px red solid;
      padding-top:20px;
      padding-bottom:20px;
      padding-right:20px;
      padding-left:20px;
      /* Same as above */
      padding:20px;
      margin-top:20px;
      margin:20px 0;
      }
      .box-1 h1{
      font-family:Tahoma;
      font-weight:800;
      font-style:italic;
      text-decoration:underline;
      text-transform:uppercase;
      letter-spacing: 0.16em;
      word-spacing: 0.6em;
      }
      .box-2{
      border:3px dotted #ccc;
      padding:20px;
      margin:20px 0;
      }
      .categories{
      border:1px #ccc solid;
      padding:10px;
      border-radius:15px;
      }
      .categories h2{
      text-align:center;
      }
      .categories ul{
      padding:0;
      padding-left:20px;
      list-style:square;
      list-style:none;
      }
      .categories li{
      padding-bottom:6px;
      border-bottom:dotted 1px #333;
      list-style-image: url('../images/check.png');
      }
      .my-form{
      padding:20px;
      }
      .my-form .form-group{
      padding-bottom:15px;
      }
      .my-form label{
      display:block;
      }
      .my-form input[type="text"], .my-form textarea{
      padding:8px;
      width:100%;
      }
      .block{
      float:left;
      width:33.3%;
      border:1px solid #ccc;
      padding:10px;
      box-sizing:border-box;
      }
      #main-block{
      float:left;
      width:70%;
      padding:15px;
      box-sizing: border-box;
      }
      #sidebar{
      float:right;
      width:30%;
      background-color:#333;
      color:#fff;
      padding:15px;
      box-sizing: border-box;
      }
      .p-box{
      width:800px;
      height:500px;
      border:1px solid #000;
      margin-top:30px;
      position:relative;
      background-image:url('../images/bgimage.jpg');
      background-repeat: no-repeat;
      background-position:100px 200px;
      background-position:center top;
      }
      .p-box h1{
      position:absolute;
      top:100px;
      left:200px;
      }
      .p-box h2{
      position:absolute;
      bottom:40px;
      right:100px;
      }
      .fix-me{
      position:fixed;
      top:400px;
      }
      .my-list li:first-child{
      background: red;
      }
      .my-list li:last-child{
      background: blue;
      }
      .my-list li:nth-child(5){
      background: yellow;
      }
      .my-list li:nth-child(even){
      background: grey;
      }
      SampleWebsite/css/style.css 0 → 100644
      View file @ 5f36fade
      body{
      background-color:#f4f4f4;
      color:#555;
      font-family:Arial, Helvetica, sans-serif;
      font-size:16px;
      line-height:1.6em;
      margin:0;
      }
      .container{
      width:80%;
      margin:auto;
      overflow:hidden;
      }
      #main-header{
      background-color:rgb(6, 78, 172);
      color:#fff;
      }
      #navbar{
      background-color:#333;
      color:#fff;
      }
      #navbar ul{
      padding:0;
      list-style: none;
      }
      #navbar li{
      display:inline;
      }
      #navbar a{
      color:#fff;
      text-decoration: none;
      font-size:18px;
      padding-right:15px;
      }
      #showcase{
      background-image:url('../images/showcase.jpg');
      background-position:center right;
      min-height:300px;
      margin-bottom:30px;
      text-align: center;
      }
      #showcase h1{
      color:#fff;
      font-size:50px;
      line-height: 1.6em;
      padding-top:30px;
      }
      #main{
      float:left;
      width:70%;
      padding:0 30px;
      box-sizing: border-box;
      }
      #sidebar{
      float:right;
      width:30%;
      background: #333;
      color:#fff;
      padding:10px;
      box-sizing: border-box;
      }
      #main-footer{
      background: #333;
      color:#fff;
      text-align: center;
      padding:20px;
      margin-top:40px;
      }
      @media(max-width:600px){
      #main{
      width:100%;
      float:none;
      }
      #sidebar{
      width:100%;
      float:none;
      }
      }
      \ No newline at end of file
      SampleWebsite/images/showcase.jpg 0 → 100644
      View file @ 5f36fade
      This diff is collapsed.
      SampleWebsite/index.html 0 → 100644
      View file @ 5f36fade
      <!DOCTYPE html>
      <html>
      <head>
      <title>Sample Website</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      </head>
      <body>
      <header id="main-header">
      <div class="container">
      <h1>Sample Website</h1>
      </div>
      </header>
      <nav id="navbar">
      <div class="container">
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      </ul>
      </div>
      </nav>
      <section id="showcase">
      <div class="container">
      <h1>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968.
      </h1>
      </div>
      </section>
      <div class="container">
      <section id="main">
      <h1>Welcome</h1>
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. King sought equality and human
      rights for African Americans, the economically disadvantaged and all victims of injustice through
      peaceful protest. He was the driving force behind watershed events such as the Montgomery Bus Boycott
      and the 1963 March on Washington, which helped bring about such landmark legislation as the Civil Rights
      Act and the Voting Rights Act. King was awarded the Nobel Peace Prize in 1964 and is remembered each
      year on Martin Luther King, Jr. Day, a U.S. federal holiday since 1986.</p>
      </section>
      <aside id="sidebar">
      <p>Martin Luther King, Jr. was a social activist and Baptist minister who played a key role in the American
      civil rights movement from the mid-1950s until his assassination in 1968. </p>
      </aside>
      </div>
      <footer id="main-footer">
      <p>Copyright &copy; 2020 Sample@Website</p>
      </footer>
      </body>
      </html>
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment