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

WM_4_Gary_Rogers_CSS-Coursework_week1 #196

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

WM_4_Gary_Rogers_CSS-Coursework_week1 #196

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
81 changes: 73 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,73 @@
/**
* 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.
*
*/
.body {
width: 100%;
height:400px;
color: gray;
text-shadow: black;
background-color #7393B3;
margin-bottom: 10px;
}

.header {
position: relative;
min-height: 60px;
margin-bottom: 20px;
text-align: center;
}

.Intro {
text-align: right;
min-height: 40px;
position: relative;
}

.h1 {
position: relative;
min-height: 60px;
margin-bottom: 20px;
text-align: center;
}

.text {
margin-left: 600px;
margin-right:200px;
color: gray;
text-shadow: 0px 0px 0px #000000;
font-size: 25px;
text-align: center;
}

.ul {
padding: 25px ;
text-align: justify;
}

.li {
color: rgb(4, 0, 0);
padding: 30px 50px;
text-decoration: none;
text-align: center;
}

.h3 {
text-align: center;
color: black;
}

.content {
display: block;
margin-left: 200px;
margin-right: 200px;
width: 40%;
}

.footer {
margin-bottom: 25px;
text-align: center;
width: 100%;
background: #black;
display: inline-block;
font-size: 18px;
color: #black;
padding: 0 60px;
}

74 changes: 71 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,76 @@
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

<body>

<header>
<div class="header">
<body style="background-color:powderblue;">
<h1>3 Films by David Lynch</h1>
</div>
<div class="navbar">
<ul class="header-list">
<li class="header-links"><a href="https://en.wikipedia.org/wiki/Blue_Velvet_(film)">Blue Velvet</a></li>
<li class="header-links"><a href="https://en.wikipedia.org/wiki/Mulholland_Drive_(film)">Mulholland Drive</a></li>
<li class="header-links"><a href="https://en.wikipedia.org/wiki/Inland_Empire_(film)">Inland Empire</a></li>
</ul>
</div>
</header>

<article>
<br>
<section class="intro">
<h3><p>A brief introduction to 3 of my favourite films by David Lynch....</p>
</h3>
</section>
<br>
<br>
<img src="https://live.staticflickr.com/5026/5572981303_2499af494b_z.jpg" alt="Blue Velvet Poster" class="content" >
<section class="text">
<br>
<br>
<p>Vivamus pharetra condimentum sem, at fermentum purus scelerisque vitae. Morbi elementum nunc ac elit lobortis, vitae cursus justo tristique. Praesent auctor facilisis arcu, nec sagittis neque vestibulum at. Aenean iaculis purus ac dolor cursus, eu rutrum arcu varius. Sed faucibus fringilla risus a mollis. Ut et orci feugiat, laoreet ligula nec, fringilla justo. Phasellus a gravida enim, eget interdum erat. Nullam in diam eget ligula viverra tempus. Quisque quis aliquam eros. Curabitur a volutpat turpis, eget fringilla diam. Integer vitae orci vitae leo accumsan accumsan. Maecenas placerat velit et mi porta, gravida molestie magna suscipit.</p>
</section>
</article>

<article>
<section class="content">
</section>
<br>
<br>
<img src="https://live.staticflickr.com/165/361553607_07a2673bde_z.jpg" alt="Inland Empire Poster" class="content">
<section class="text">
<br>
<br>
<p>Nulla gravida ipsum sed nibh bibendum suscipit. Praesent auctor dolor eu nulla pharetra elementum. Cras nec quam nibh. In feugiat lacus a lectus varius, sit amet lacinia metus placerat. Nunc at fermentum augue. Phasellus placerat eu lorem id lobortis. Aenean iaculis orci ligula, sed porttitor augue malesuada id. Etiam viverra, dolor vel finibus aliquet, leo est posuere mi, at condimentum nulla augue ut sem. Nunc eget faucibus dui. Sed nec risus leo. Nullam aliquet orci a arcu congue accumsan. Integer quis enim nec magna sollicitudin hendrerit. Vivamus sed dui iaculis, vehicula urna ut, hendrerit quam.</p>

</section>
</article>


<article>
<br>
<br>
<section class="content">
</section>
<br>
<img src="https://live.staticflickr.com/5442/17278668324_7ae790b45d_b.jpg" alt="Mulholland Drive Poster" class="content">

<section class="text">
<br>
<br>
<p>Mauris mattis felis quis lobortis pellentesque. Curabitur ex felis, aliquet ut egestas ac, bibendum vitae est. Praesent ex purus, pharetra id ullamcorper vitae, vestibulum vel sapien. Curabitur tincidunt aliquet enim nec ultrices. Nulla diam dolor, malesuada ultricies scelerisque id, scelerisque id mauris. Cras ultrices ligula sit amet maximus blandit. Phasellus dapibus quam non dui placerat, sed vulputate elit interdum. Aliquam eget vulputate neque.</p>
<br>
<br>
<br>
</section>
</article>

</body>

<footer class="footer">
<p><em>A Gary Rogers Production</em></p>
</footer>

</html>