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

London_Class_10_Jan_Softa_HTML_CSS_Coursework-Week1 #339

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

London_Class_10_Jan_Softa_HTML_CSS_Coursework-Week1 #339

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
35 changes: 35 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,38 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
h1, h2{
text-align: center;
border-left: 50px;
}
p{
font-size: larger;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}

nav{
text-align: center;
word-spacing: 8px;

}
body{
background-image: url('https://pixabay.com/get/g0367f7584f93a92922ab5a9f7798d9991cd7a5bd593b2df6f05b84f10b2b8934b88d65f1c818d715c27bb193139718fb8a57b5cb38785df8357b5901ef59102921d2051ce62538ac76ba0ff90314e5fd_1920.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
iframe{
margin-left:auto;
margin-right:auto;
width:100%;

}
.part2{
padding-top: 35px;
}

Footer
72 changes: 60 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,65 @@
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" />
</head>>

</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
<title>My Blog</title>
<img src="https://profile-images.xing.com/images/90d22e3b1045164cf0b673acd60b1b25-1/jan-softa.256x256.jpg">
<h1>Jan's love poems</h1>


<nav class="navmenu">
<a href="main">Main Page</a> |
<a href="love">Love</a> |
<a href="passion">Passion</a> |
<a href="romance">Romance</a>

</nav>

<h1>Love</h1>
<body>


<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis vitae et leo duis ut diam quam nulla porttitor. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Euismod lacinia at quis risus sed. Sed faucibus turpis in eu mi bibendum neque egestas. Neque volutpat ac tincidunt vitae. Est ullamcorper eget nulla facilisi. Vel quam elementum pulvinar etiam. Sodales ut etiam sit amet nisl purus in. Aliquam id diam maecenas ultricies mi. Malesuada fames ac turpis egestas maecenas pharetra convallis. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Vitae congue eu consequat ac felis donec et odio. Tincidunt nunc pulvinar sapien et.</p>

<iframe src="https://giphy.com/embed/R6gvnAxj2ISzJdbA63" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/warnerbrosde-R6gvnAxj2ISzJdbA63">via GIPHY</a></p>

<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"

/>
<p>Lacus luctus accumsan tortor posuere ac ut consequat. Tempor orci eu lobortis elementum. Tellus elementum sagittis vitae et leo duis ut. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Velit aliquet sagittis id consectetur purus ut. Nec nam aliquam sem et. Amet nulla facilisi morbi tempus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Quis auctor elit sed vulputate mi sit amet mauris commodo. Habitant morbi tristique senectus et netus et malesuada. Viverra nam libero justo laoreet sit amet. Natoque penatibus et magnis dis parturient montes. A erat nam at lectus urna duis convallis convallis. Aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium viverra suspendisse potenti nullam ac. Tempor commodo ullamcorper a lacus vestibulum sed. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Odio eu feugiat pretium nibh ipsum consequat nisl. Cursus euismod quis viverra nibh cras pulvinar mattis nunc.</p>
</div>

<div class="part2">
<h1>Passion</h1>
<p>
<iframe src="https://giphy.com/embed/OE8GKv0ftMKCj9To04" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/onechicago-OE8GKv0ftMKCj9To04">via GIPHY</a></p>

<p>Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ut venenatis tellus in metus vulputate eu scelerisque felis. Tincidunt id aliquet risus feugiat in. Tristique magna sit amet purus gravida quis blandit turpis cursus.</p>
</div>
<div class="part2">
<h1>Romance</h1>
<p>Urna duis convallis convallis tellus id interdum. Integer eget aliquet nibh praesent tristique magna sit amet purus. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Vel pharetra vel turpis nunc eget lorem dolor sed. Venenatis cras sed felis eget velit aliquet sagittis id. Sagittis eu volutpat odio facilisis mauris sit amet massa. In egestas erat imperdiet sed euismod. Rutrum quisque non tellus orci. Ut sem nulla pharetra diam sit amet nisl. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Ante in nibh mauris cursus mattis molestie a iaculis. Egestas congue quisque egestas diam in arcu cursus. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Euismod in pellentesque massa placerat duis ultricies lacus. Nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>


<iframe src="https://giphy.com/embed/3UbymY4c36MYgK7e5x" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/LovecraftHBO-hbo-lovecraft-country-3UbymY4c36MYgK7e5x">via GIPHY</a></p>

<p>Odio ut sem nulla pharetra diam sit amet nisl suscipit. Ultricies tristique nulla aliquet enim tortor at. Pellentesque habitant morbi tristique senectus. Vitae tempus quam pellentesque nec nam aliquam. Ultrices in iaculis nunc sed augue. Sed euismod nisi porta lorem mollis aliquam ut. Arcu cursus euismod quis viverra. Bibendum est ultricies integer quis auctor elit sed. Scelerisque eu ultrices vitae auctor eu augue. Eget nunc scelerisque viverra mauris in aliquam sem fringilla.</p>
</div>

<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />





</body>


</html>