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

West Midlands Class 4 - Chidimma Ofodum - HTML/CSS - Week 2 #181

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

West Midlands Class 4 - Chidimma Ofodum - HTML/CSS - Week 2 #181

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
103 changes: 103 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,106 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100%vh;
background: linear-gradient(to top,#fad2cc, #f48882, #fad2cc);
}

/* Nav and Link Styles */

nav {
display: flex;
height: 10vh;
gap: 30%;
align-items: center;
background: linear-gradient(to top, #fad2cc, #dd9bcf, #fcf);
width: 100%;
border: none;
}

list {
display: flex;
gap: 5%;
}
list, a{
font-family: "Rubik Moonrocks", cursive;
text-decoration: none;
color: rgb(34, 28, 28);
}

nav > a{
font-weight: bold;
font-size: 1.2rem;
font-style: italic;
}

/* Main content styles */

main {
width: 75%;
margin: 2px auto;
background: #f6ffee;
border-radius: 10%;
padding-top: 1%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 1%;
}

img {
width: 100%;
height: 500px;
}

h1,
header p {
text-align: center;
}
header p {
font-style: italic;
}

/* Article 1 */

.first_article h2 {
padding-top: 2%;
margin-left: 2%;
}

article:first-child {
font-family: "Courier New", Courier, monospace;
}

/* Article 2 */
.second_article h2 {
width: 100%;
height: 15%;
margin-top: 5%;
}

/* Footer */

footer {
display: flex;
justify-content: space-around;
height: 5vh;
margin-top: 2px;
background: linear-gradient(
to top,

#dd9bcf,
#fcf,
#fad2cc,
#f48882
);
font-size: small;
margin-top: 5px;
padding: 0;
}
footer p {
margin: 0;
padding: 5px;
}
95 changes: 94 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,102 @@
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap"
rel="stylesheet" />
<script src="https://kit.fontawesome.com/a6d80728cd.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Add your HTML markup here -->
<header>
<nav>
<a href="">Chidimma</a>

<list>
<ul><a href="">Blogs</a></ul>
<ul><a href="">Newsletters</a></ul>
<ul><a href="">Videos</a></ul>
<ul><a href="">Podcasts</a></ul>
<ul><a href="">Resources</a></ul>
</list>
</nav>

<h1>
How to Create Social Media Buttons for All the top Social Media
Networks
</h1>
<p>Written by Chidimma Ofodum</p>
</header>

<main>
<article class="first_article">
<h2>Introduction</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
placeat distinctio unde a enim dolorem aut fugiat dolore laborum
debitis iure velit natus saepe molestiae? Ducimus veritatis laborum,
sed obcaecati esse temporibus facere blanditiis quo nam repellendus
sequi, libero voluptatum ab maxime dolor totam ut aliquam, quasi
aperiam cupiditate sint eligendi. Corrupti iusto, molestiae, inventore
ipsum fugit odio consequatur et voluptate at vel reprehenderit tempore
officia quidem harum sunt tenetur unde temporibus. Earum commodi hic
velit mollitia ut sapiente, iste eos ad autem nam voluptates pariatur
id. Quae doloremque at mollitia molestias corporis officia et enim
commodi? At deleniti accusamus modi quia itaque voluptas, aspernatur,
deserunt officia impedit facilis libero nisi quis fugiat ullam
explicabo fuga similique perspiciatis iste beatae odit dolore eaque.
Molestias dolorem a doloremque ipsa nesciunt suscipit facilis eligendi
amet aliquam tempore consequatur, est modi assumenda veniam excepturi
fuga perferendis id, neque temporibus numquam illo?

</p>
<img src="https://images.pexels.com/photos/840996/pexels-photo-840996.jpeg" alt="man with a laptop" />
</article>

<article class="second_article">
<h2>
The Ultimate Cheat Sheet for Creating Social Media Sharing Buttons
</h2>
<img src="https://images.pexels.com/photos/57690/pexels-photo-57690.jpeg" alt="man with a laptop aerial view" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque
officia dolore voluptate, voluptates odio maxime nobis ducimus
exercitationem ut quia sequi quis quaerat beatae obcaecati impedit
saepe molestiae numquam ipsa aliquam neque ratione inventore
dignissimos ea earum! Accusantium vel animi ullam? Esse, doloribus
sed. Tempora, sapiente labore quo, laboriosam ex, rem incidunt iure
amet facilis molestias sunt minima veritatis ullam? Similique,
voluptate molestiae sapiente consequatur adipisci perferendis ad
voluptatum sit quia. Autem provident enim accusamus sit, reiciendis
eaque aut voluptas commodi voluptate. Accusamus dolores tempore quas
natus, totam eaque sed, quo, magni soluta quis odit! Eum vitae
voluptatibus, unde odit facilis reprehenderit, aliquid alias molestias
eveniet fugit eos consequatur recusandae dolorem mollitia quos
obcaecati quae animi cum saepe ea, distinctio fuga. Odio fuga quisquam
amet asperiores consectetur, dolorem fugit! Laborum, facilis eum. Esse
assumenda aperiam veritatis, ratione minima officia tenetur magnam eum
laudantium odit ullam suscipit nostrum sapiente minus quo sint
deserunt dicta vitae. Suscipit dolor, repellendus accusamus eligendi
eos facere voluptas ducimus et. Vel aut quas quae ex numquam corporis,
velit tempore nobis excepturi earum sint accusantium esse hic animi at
atque distinctio nostrum amet, repellendus aliquam vero doloremque
dolorem magni. Asperiores reprehenderit eveniet inventore, unde,
nesciunt, nemo id eius sit voluptas ad qui esse placeat a. Harum esse
ea pariatur omnis praesentium ratione quam tempora dolore expedita
maiores labore in fuga fugiat, autem error voluptatibus aliquam dolor
architecto similique vel hic nihil earum sit sunt! Cupiditate,
suscipit maxime. Quasi ipsum consectetur temporibus distinctio culpa
ut dolorem amet nihil.
</p>
</article>
</main>


<footer>
<p>Code Your Future</p>
<p> <span><i class="fa-regular fa-copyright"></i></span> Copyright 2021 Chidimma, Inc</p>
</footer>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>