Code/news.html at main · faiz-99/Code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News</title>
</head>
  <style>
         #wrapper{
            width: 80%;
            padding: 20px;
            margin: auto;
            border: 2px solid salmon;
            border-radius: 15px;
          }

                main{
            margin-left: 170px;
            padding: 10px;
            background-color: rgb(160, 95, 131);
            color: white;
            min-height: 300px;
        }
        main img{
             float: right;
             width: 200px;
             height: 200px;
            border: 2px solid steelblue;
            border-radius: 15px;
        }
            nav{
            float: left;
            width: 150px;
            padding: 10px;
            background-color: cadetblue;
            color: white;
            min-height: 300px;
        }
          nav a{
            text-decoration: none;
            display: block;
            margin-top: 10px;

        &:hover{
            background-color: blanchedalmond;
            padding: 10px;
        }

        }
    </style>
<body>
        <div id="wrapper">
          <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="news.html">News</a>
            <a href="contact us.html">Contact us</a>
          </nav>
          <main>
            <img src="news.jpg" alt="cat's pic">
           <h1 >This is news page</h1>
            <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptates nulla eos cupiditate debitis amet consectetur, quibusdam vel suscipit! Enim, sit consectetur, consequuntur eos, ad aut labore laudantium laborum cumque obcaecati accusamus temporibus. Commodi ratione dolorem quam quaerat ullam? Veniam est autem quaerat aspernatur fugit suscipit, magni totam facilis minima nesciunt, mollitia error quae? Illum, optio. Impedit minima ex, velit ducimus repellat quam vitae! Cum suscipit itaque placeat voluptatibus ipsam molestiae nulla nisi necessitatibus velit autem! Repellat ex impedit nemo molestias nobis fugit excepturi rerum deserunt nesciunt esse enim ipsam nihil, laborum veritatis expedita delectus, eaque labore consectetur nostrum non!</p>
            </main>
        </di>

</body>
</html>