Sunday, August 15, 2021

Responsive Website Design

Responsive Website Design CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>web design</title>

</head>


<body>

    <div class="header">

        <h1>Weblayout</h1>

        <p>Resize the browser window to see the responsive effect</p>

    </div>

    <div class="nav">

        <ul>

            <li><a href="#">link</a></li>

            <li><a href="#">link</a></li>

            <li><a href="#">link</a></li>

        </ul>

    </div>

    <div class="row">

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

    </div>

</body>

</html>

CSS STYLESHEET CODE

*{
    box-sizing: border-box;
}
body{
    margin: 0px;
}
.header{
    background-color: gray;
    text-align: center;
    padding:20px;
}
.nav{
    overflow: hidden;
    background-color: #333;
}
.nav li{
    float: left;
}
.nav a{
    display: block;
    color: #fff;
    padding:14px 20px;
    text-align: center;
    text-decoration: none;
}
.row{
    content: "";
    display: table;
    clear: both;
}
.column{
    float: left;
    width:33.33%;
    padding:15px ;
}
@media screen and (max-width:600px;){
    .column{
        width:100% ;
    }
}
nav:hover{
    background-color: red;
    color: #000;
}
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...