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

West midlands Class 2 - Jasvir Kaur - HTML/CSS - Week 1 #10

Closed
JK1320 wants to merge 3 commits into from
Closed

West midlands Class 2 - Jasvir Kaur - HTML/CSS - Week 1 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2666680
create profile webpage
JK1320 Nov 12, 2020
3335e23
try to fix pseudo class
JK1320 Nov 12, 2020
b8b8c96
fix css pseudo class error
JK1320 Nov 13, 2020
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
82 changes: 82 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,85 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
background-image: url(https://static2.bigstockphoto.com/9/4/7/large1500/74982664.jpg);
}

header {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 20px;
background-color: rgb(219, 214, 170);
}

h1 {
color: red;
text-align: center;
}

h1:hover {
color: green;
}

.description {
color: green;
}

article {
border: orange solid 5px;
border-radius: 10px;
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
padding: 30px;
background-color: aquamarine;
line-height: 30px;
}

article:first-child {
background-color: rgb(199, 98, 98);
}

h2 {
background-color: orange;
margin-right: 30%;
margin-left: 30%;
border-radius: 50%;
text-align: center;
}


.footer {
margin-top: 30px;
height: 80px;
text-align: center;
font-size: 15px;
background-color: rgb(66, 64, 64);
}

.footer a {
padding: 0 20px;
text-decoration: none;
color: orange;
}

a:hover {
color: rgb(255, 0, 200);
}

.fa {
padding: 20px;
font-size: 50px;
width: 10px;
height: 20px;
text-align: center;
background-color: rgb(73, 38, 230);
color: orange;
border-radius: 50%;
}

.legal {
color: rgb(179, 170, 170);
font-size: 13px;
}
41 changes: 41 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,50 @@
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

<header class="header">
<h1 class="title">Vejegans</h1>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis turpis ut mollis porta. Fusce pulvinar pretium finibus. Quisque pellentesque tellus sit amet quam commodo aliquam. Proin fringilla efficitur feugiat. Nam semper rhoncus turpis, sit amet tempus odio ultricies id.</p>
</header>

<main class="main">


<article class="item1">
<h2 class="title2">Am I Vegetarian</h2>
<p class="vege">Aliquam eu auctor ante. Pellentesque justo nisi, dictum eu tortor nec, efficitur imperdiet massa. Aenean eu tincidunt risus. Nam at nisi tempus ante ultricies consectetur vel non velit. Aenean interdum elit a sapien venenatis malesuada. Morbi condimentum nunc a urna fermentum, eget maximus eros finibus. Maecenas sit amet felis vel metus sollicitudin ultricies. Sed molestie, tortor eu sodales scelerisque, dolor justo maximus massa, quis bibendum nibh libero sit amet nibh. Sed accumsan a odio nec finibus. Donec suscipit lacus vel dolor laoreet, vel gravida ante semper. Nulla congue mattis ex. Nunc sed mauris in nibh vulputate sollicitudin et quis nulla.</p>
<a href=https://vegsoc.org/info-hub/definition/" target="_blank">More Info</a>
</article>

<article class="item2">
<h2 class="title2">Am I Vegan</h2>
<p class="vegan">Sed eget scelerisque nisi. Donec ex nulla, accumsan at leo dignissim, tristique interdum dui. Nullam sit amet orci eget lacus sagittis finibus. Vestibulum commodo velit nec metus consectetur cursus. Duis luctus dui enim, eu euismod turpis venenatis quis. Ut rhoncus dui eros, a gravida justo malesuada non. Phasellus sit amet ultricies justo.</p>
<a href="https://www.vegansociety.com/" target="_blank">More Info</a>
</article>

<article class="item3">
<h2 class="title2">I am Vejegan</h2>
<p class="vejegun">Duis risus leo, consectetur quis pharetra varius, varius quis metus. Nam vitae dolor vitae sapien ultrices suscipit at vitae massa. Aenean tincidunt, arcu non cursus consectetur, lectus nibh lobortis ipsum, at viverra justo velit nec lacus. Nullam at tempor sem. Nullam finibus iaculis diam, in dapibus eros ultricies at. Phasellus volutpat est sit amet felis semper, eget vehicula nisi commodo. Sed sit amet est dignissim, rutrum risus eget, pharetra mauris. Sed scelerisque metus eget sollicitudin tristique.</p>
<a href="https://www.thespruceeats.com/types-of-vegetarians-3378611" target="_blank">More Info</a>
</article>


</main>

<footer class="footer">
<a href="#" class="about">About</a>
<a href="#" class="terms">Terms of Use</a>
<a href="#" class="privacy">Privacy Policy</a><br/>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<p class="legal">@ We are not responsible for the content of external files.</p>

</footer>
</body>
</html>