-
Notifications
You must be signed in to change notification settings - Fork 2
/
mainpage.html
69 lines (63 loc) · 5.34 KB
/
mainpage.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS layout and media queries </title>
<style>
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'section section section bar'
'section section section aside'
'footer footer footer footer ';
}
.item{
background-color: aqua;
border: 3px solid black;
padding: 12px 23px;
}
#navbar{
grid-area: bar;
background-color: yellow;
}
#section{
grid-area: section;
}
#aside{
grid-area: aside;
}
footer{
grid-area: footer;
display: flex;
justify-content: space-around;
align-items: center;
}
#ad{
margin: 17px 0;
padding: 23px 23px;
border: 5px solid blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div id="navbar" class="item">
<a href="index.html" target="_blank">Sign-up</a> Login About Subscribe to our Newsletter
</div>
<div id="section" class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi consequuntur quos accusamus iste omnis aut illo expedita facere veniam, sapiente ullam possimus suscipit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, rerum assumenda facere et voluptas praesentium dolores sequi dolorem dolorum labore vel asperiores, odit, saepe soluta quibusdam beatae quasi dignissimos minima! Obcaecati facere ducimus, beatae illo laboriosam officiis esse a rerum quibusdam. Autem laboriosam, veniam vel, voluptates, dolor voluptatem voluptatum fugiat unde tenetur quia ad dolorum tempore quas corporis! Ut distinctio inventore dolorum quis odio totam aliquame dolorum nesciunt. Nisi omnis necessitatibus voluptatum cupiditate doloribus, magni quasi iste quos deleniti voluptas qui
<img id="ad" src="prose.webp" alt="Advertisement" height="550px" width="30%">
</div>
<div id="aside" class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas soluta expedita quis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam beatae laudantium nihil aliquam quisquam, suscipit, tempora maxime excepturi vitae animi voluptatem dignissimos cumque nobis obcaecati, eius temporibus voluptas? Numquam ullam atque cum minima quod deleniti quae qui! Possimus doloribus ea odio explicabo vel. Nemo saepe suscipit ipsa eum tenetur quidem laborum alias corrupti! Ad doloribus voluptas laudantium fugiat odit temporibus, minima in assumenda cupiditate nihil aliquid sit ullam porro esse tempore neque! Error et illo sit deleniti voluptates. Exercitationem fuga quos, autem ea explicabo minima animi impedit, corporis obcaecati qui esse fugiat a illum dicta quam quis, non repellendus saepe dolores sequi vero eveniet ipsum! Qui enim soluta non eveniet pariatur totam ipsa alias vitae, eum minus rerum facere magnam nesciunt inventore exercitationem praesentium voluptatibus blanditiis mollitia ipsum illo asperiores animi quas distinctio veniam! Sit enim numquam, consequuntur eius inventore sint quidem praesentium iusto, commodi itaque eligendi atque expedita perferendis quam quae quod eaque totam culpa quia sed ad. Error nisi voluptates doloribus ab, enim porro tenetur? Nulla eligendi minus deleniti omnis quae blanditiis, tempora voluptas incidunt beatae obcaecati? Facilis animi delectus quaerat, rem quidem totam iure cum maiores dolore ut magni. Consequuntur cum magnam dolor officiis, harum ipsum blanditiis dicta amet iusto quos, sed eaque ipsa atque provident voluptas rem. Nesciunt minima esse, facilis recusandae quod adipisci magnam assumenda necessitatibus! Dolor blanditiis exercitationem quas vero officia quia ipsam, vel maiores distinctio minus autem eveniet consequuntur magni. Id nostrum, sunt cum nesciunt dolore quisquam eligendi dolorem recusandae, beatae quis eveniet, aut velit itaque neque necessitatibus quasi laudantium commodi illo adipisci minima! Id suscipit quae omnis. Veritatis, temporibus. Delectus, eligendi! Magnam itaque veritatis reprehenderit eos odit, explicabo recusandae incidunt vitae voluptate saepe hic blanditiis pariatur officia. Necessitatibus suscipit quo nostrum! Expedita nostrum dolore perspiciatis id, itaque repudiandae tempora doloribus amet quas, dicta quam! Nam dolorem voluptatum incidunt iure cum eos enim voluptate, iusto voluptatibus modi repudiandae quo, ipsum, quos qui soluta. Eos architecto, adipisci rem ipsam unde reiciendis officiis eveniet, suscipit eaque quae tempora omnis earum ipsum sapiente nostrum neque itaque consequuntur maiores. Saepe officia dolores inventore! Natus et aliquid dolorem eius delectus, architecto dolor non atque beatae aperiam ipsum numquam quae deserunt voluptates voluptate maxime, cum quis ex quia quaerat placeat illo. Distinctio, atque, adipisci officia alias excepturi facere iure minus non voluptas dolore quidem architecto impedit nostrum optio delectus expedita possimus hic, repudiandae iste ipsa eveniet tempore. Impedit, cupiditate.
</div>
<footer class="item"><center>Made by dyno@YASH</center></footer>
</div>
</body>
</html>
</body>
</html>