Skip to content

text updates #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

text updates #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 105 additions & 71 deletions Mini-projects/CSS GRID Advance/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,118 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS GRID</title>
<!-- Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Manjari:wght@100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>

<body>
<body>
<p>This is a contribution from a beginner</p>
<header>
<h1>CSS GRID</h1>
<h1>CSS GRID</h1>
</header>

<div class="container">
<header class="header">
<h1>Logo</h1>
</header>
<main class="content">
<div></div>
<article class="article">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit aspernatur esse cupiditate
quibusdam assumenda ducimus fuga nobis, eaque quis deserunt.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
</article>
<article class="article">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit aspernatur esse cupiditate
quibusdam assumenda ducimus fuga nobis, eaque quis deserunt.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
</article>
<article class="article">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit aspernatur esse cupiditate
quibusdam assumenda ducimus fuga nobis, eaque quis deserunt.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, tempora.</p>
</article>
</main>

<aside class="sidebar">
<div>
<img src="https://loremflickr.com/320/240/sport" alt="">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, eos.</p>
</div>
<div>
<img src="https://loremflickr.com/g/320/240/random" alt="">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, eos.</p>
</div>
<div>
<img src="https://loremflickr.com/320/240/cities" alt="">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, eos.</p>
</div>
</aside>
<header class="header">
<h1>Logo</h1>
</header>
<main class="content">
<div></div>
<article class="article">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
aspernatur esse cupiditate quibusdam assumenda ducimus fuga nobis,
eaque quis deserunt.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
</article>
<article class="article">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
aspernatur esse cupiditate quibusdam assumenda ducimus fuga nobis,
eaque quis deserunt.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
</article>
<article class="article">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
aspernatur esse cupiditate quibusdam assumenda ducimus fuga nobis,
eaque quis deserunt.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
tempora.
</p>
</article>
</main>

<div class="relasted-post">
Another post
</div><div class="relasted-post">
Another post
</div><div class="relasted-post">
Another post
</div><div class="relasted-post">
Another post
</div><div class="relasted-post">
Another post
<aside class="sidebar">
<div>
<img src="https://loremflickr.com/320/240/sport" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, eos.
</p>
</div>
<footer class="footer">
<h4>Footer</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, a.</p>
</footer>
</div>

<div>
<img src="https://loremflickr.com/g/320/240/random" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, eos.
</p>
</div>
<div>
<img src="https://loremflickr.com/320/240/cities" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, eos.
</p>
</div>
</aside>

<div class="relasted-post">Another post</div>
<div class="relasted-post">Another post</div>
<div class="relasted-post">Another post</div>
<div class="relasted-post">Another post</div>
<div class="relasted-post">Another post</div>
<footer class="footer">
<h4>Footer</h4>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, a.
</p>
</footer>
</div>
</body>

</html>
<!-- </div> -->
</body>
</html>