Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

ZA2- Claudia Agulhas blog #148

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

ZA2- Claudia Agulhas blog #148

Show file tree
Hide file tree
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
37 changes: 29 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

@import url('https://fonts.googleapis.com/css2?family=Joan&family=Roboto:wght@100&display=swap');

body {
background-color: pink;
font-family: Joan, Roboto;
margin: 0;
}
main{
background-color: rgb(218, 139, 188);
width: 600px;
padding: 25px;
border: none;
border-radius: 10px;
margin: 50px auto;
}
header {
padding:25px 0;
background-color: hotpink;
text-align: center;
margin-bottom: 25px;
}

footer {
padding: 25px 0;
background-color: hotpink;
text-align: center;
margin-top: 25px;
}
105 changes: 91 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1>Claudia's Corner</h1>
<p>On this page you can read about all that I find interesting. Some of my favorite topics to discuss are music, books and movies.</p>
<nav aria-label="Main Site Links." id="mainsitelinks">
<a href=""><strong>Home</strong></a>
<a href=""><strong>About</strong></a>
<a href=""><strong>Contact</strong></a>
</nav>
</header>

<main>
<h2>My 5 favorite movies of all time</h2>
<br>
<img src="https://m.media-amazon.com/images/M/MV5BNTYxOTYyMzE3NV5BMl5BanBnXkFtZTcwOTMxNDY3Mw@@._V1_.jpg" alt="A scene from the movie The Shawshank Redemption. Tim Robbins is seated on the left while Morgan Freeman stands with his arms folded on the right" width="500px" height="300px"/>
<h3>The Shawshank Redemption</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<br>
<img src="https://cdn.cnn.com/cnnnext/dam/assets/200320084342-life-is-beautiful-super-tease.jpg" alt="Scene from the move Life is Beautiful. The father, mother and child are riding on a bike through town." width="500px" height="300px"/>
<h3>Life is Beautiful</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<br>
<img src="https://www.gannett-cdn.com/-mm-/6529c574b8c445525658b1690ef08203e790f0a2/c=0-0-5170-2921/local/-/media/2015/09/10/DetroitFreePress/DetroitFreePress/635774743137114770-somewhere-in-time-cast.jpg?" alt="Christopher Reeve and Jane Seymour staring at each other" width="500px" height="300px"/>
<h3>Somewhere in Time</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<img src="https://www.silverpetticoatreview.com/wp-content/uploads/2015/12/tuck-everlasting-featured.jpg" alt="A scene from Tuck everlasting the boy and girl are looking into each others eyes." width="500px" height="300px"/>
<h3>Tuck Everlasting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<br>
<img src="https://media.newyorker.com/photos/5da4a5c756dcd400082a63ba/master/pass/Brody-Parasite.jpg" alt="A scene from the movie parasite where the family is eating pizza together" width="500px" height="300px"/>
<h3>Parasite</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<br>
<h2>That one go-to spiritual book for all seekers</h2>
<img src="https://kbimages1-a.akamaihd.net/ac0c9f86-1a37-4f1c-a68f-ac34dae8a609/353/569/90/False/the-autobiography-of-a-yogi-3.jpg" alt="The book An autobiography of a yogi" width="500px" height="500px"/>
<h3>An Autobiography of a Yogi by Parahamsa Yogananda</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam cursus, erat egestas auctor lobortis, arcu justo vestibulum metus, a consectetur magna diam sit amet lorem.
Curabitur lobortis a sem quis rutrum. Donec pharetra orci sapien, in tempus libero vestibulum elementum.
Pellentesque sed felis quis tellus condimentum scelerisque. Cras massa nulla, varius bibendum vehicula at, fringilla a ligula.
In imperdiet est et ligula feugiat, non venenatis est varius. Phasellus nibh turpis, consectetur at accumsan rutrum, hendrerit at odio.
</p>
</main>

<footer>
<div class="blog">
<h2>Claudia's Corner</h2>
<p>I love interacting with my readers, so why not hop on my social's and @ me?</p>
<a href="https://www.facebook.com/"><strong>Facebook</strong></a><br>
<a href="https://www.Twitter.com/"><strong>Twitter</strong></a><br>
<a href="https://www.LinkedIn.com/"><strong>LinkedIn</strong></a>
</footer>

</body>
</html>