Assignment-/news.html at main · faiz-99/Assignment- · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!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>
*{
    box-sizing: border-box;
}

body{
    background-color: antiquewhite;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#wrapper{
    width: 80%;
    padding: 20px;
    margin: auto;
    border: 2px solid salmon;
    border-radius: 15px;
}

header{
    background-color: aqua;
    color: blue;
    font-size: 80px;
    padding: 15px;
    text-align: center;
}

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;
}

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

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;
    max-width: 100%;
}

footer{
    background-color: coral;
    text-align: center;
    padding: 25px;
    clear: both;
}

/* Responsive Design */
@media screen and (max-width: 768px){

    #wrapper{
        width: 100%;
        padding: 10px;
    }

    nav{
        float: none;
        width: 100%;
        min-height: auto;
    }

    main{
        margin-left: 0;
        width: 100%;
    }

    main img{
        float: none;
        display: block;
        margin: 10px auto;
    }

    header{
        font-size: 40px;
    }
}
</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>