Skip to content
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

Create grid elements #1

Merged
merged 4 commits into from
Aug 20, 2024
Merged

Create grid elements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee59107
Creation of grid
GolimarGit Jan 5, 2024
dd6e450
Update style.css
GolimarGit Feb 2, 2024
24be1cf
Window Color Testing
GolimarGit Feb 2, 2024
4ea935e
Changed Home Page Layout
GolimarGit Aug 16, 2024
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
37 changes: 37 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critique Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="header">
<h1>Golimar's Critique Blog</h1>
</div>

<section id="navbar-section">
<div id="navbar-div">
<ul id="navbar-ul">
<li id="navbar-li"><a href="index.html">Home</a></li>
<li id="navbar-li"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">About Me</a></li>
<li id="navbar-li"><a href="mailto:laurenzgomez23@gmail.com">Contact Me</a></li>
</ul>
</div>
</section>


<div id="body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, aliquam! Ut blanditiis minus, fugiat autem animi nesciunt sit adipisci beatae expedita magni officia inventore officiis similique dignissimos vitae eos aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem veritatis mollitia porro sunt reprehenderit officiis aliquid atque totam omnis ipsum, cum quas magnam sequi blanditiis accusantium ab commodi quidem saepe? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate nam quas enim voluptates maiores. Dolorem suscipit sequi ad enim quis, beatae molestias soluta delectus architecto possimus aliquid libero quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, temporibus voluptatem! Officia facilis libero beatae quia explicabo accusamus commodi inventore, alias debitis ex laudantium perspiciatis soluta. Provident alias neque soluta. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam iusto asperiores aliquid deserunt consequatur eius, natus qui, facere consectetur pariatur distinctio provident quam similique reprehenderit sit in iure tenetur sapiente. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero atque sint minima earum facere nesciunt itaque tempore repellendus unde! Omnis magni alias quas similique voluptates praesentium, sequi facere! Saepe, corporis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dolores sint consectetur reiciendis commodi consequuntur error, vitae pariatur quas eveniet perferendis voluptatibus laboriosam accusamus, assumenda optio libero unde tenetur repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, voluptatem perferendis dicta rem, sequi officia eum recusandae, aspernatur veritatis quos error ipsam corporis. In soluta esse molestiae odio, dolorum deserunt! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus distinctio hic sint. Ad ratione architecto mollitia laudantium officiis hic quo voluptates dolor, enim, id laborum assumenda tempore accusantium placeat quod?
</div>


<div class="footer">
<img id="wott" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a719e8f0-9f65-4188-a7a9-2a77c96f4640/d47kjfh-208175cd-d0e2-48ab-8a64-175216c669fd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MTllOGYwLTlmNjUtNDE4OC1hN2E5LTJhNzdjOTZmNDY0MFwvZDQ3a2pmaC0yMDgxNzVjZC1kMGUyLTQ4YWItOGE2NC0xNzUyMTZjNjY5ZmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.SQTDBzx94QV4b0V6uCpmQiUaFJ9IkR8oOwMzYPMpaME"
alt="wott-sprite">
</div>
</div>
</body>
</html>
86 changes: 86 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/* Gets rid of borders */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

.flex-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}

/* .window-layout {
display: grid;
grid-template-rows: 1 fr, 1 fr, 1fr;
grid-template-columns: repeat(3, 1fr);
width: 100 vw;
height: 100 vh;
background-color: gray;
} */

.header {
/* grid-row: 1 / 1;
grid-column: 1 / 3; */
text-align: center;
background-color: #448899;
}

#body {
width: 100%;
height: 100%;
background-color: #77ddee;
}


#navbar-section {
background-color: #dddddd;
}

#navbar-div {
/* grid-row: 2 / 2;
grid-column: 1 / 3; */
display: flex;
justify-content: center;
}

#navbar-ul {
display: block;
list-style-type: none;
overflow: hidden;
}

#navbar-li {
float: left;
display: block;
text-align: center;
padding: 16px;
}

#navbar-li a {
text-decoration: none;
list-style-type: none;
color: #448899;
}

#navbar-li:hover {
background-color: #ffffff;
}


.footer {
background-color: royalblue;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

#wott {
padding-top: 5px;
width: 100px;
height: 100px;
}