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

ZA2-Matthias Matanda-coursework-week1 #153

Open
Mathias02 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

ZA2-Matthias Matanda-coursework-week1 #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2878ff8
first commit for the new webpage
Mathias02 Jun 2, 2022
38b551a
header fixed
Mathias02 Jun 3, 2022
7b739e7
photos added to html
Mathias02 Jun 11, 2022
d4c11b4
changes made to images
Mathias02 Jun 11, 2022
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
76 changes: 76 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="main-header">
<div class="logo">
<span>Logo</span>
</div>
<div>
<ul class="list">
<li><a href="">home</a></li>
<li><a href="">services</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</div>
<div class="main-title">
<h1 class="title">our services</h1>
<p>We digitally advertize people's businesses</p>
</div>
</header>
<section class="main-section">
<article>
<h1>create a brand awareness</h1>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1e/2010_mavericks_competition.jpg" alt="photo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi tempore suscipit officiis ea at voluptate. Quo at itaque consequuntur pariatur, animi cupiditate illo ut amet natus reprehenderit earum necessitatibus!
Earum voluptatibus beatae repellendus nihil quis non, maxime natus nesciunt itaque fuga. Inventore, quidem. Doloribus quod debitis illum animi dolorem quaerat, vel exercitationem enim accusantium est provident dicta assumenda veniam.
Consequuntur culpa tempore sit incidunt magnam, laudantium obcaecati? Nesciunt itaque iusto nihil adipisci beatae deserunt modi ducimus reprehenderit illo, facere consequatur praesentium amet? Eaque, consectetur!
Aspernatur</p>
<a href="#">Read more...</a>
</article>

<article>
<h1>advertize your products</h1>
<img src="https://www.un.org/sites/un2.un.org/files/styles/large-article-image-style-16-9/public/field/image/screen_shot_2022-05-06_at_10.25.43_am.png?itok=e4ZWINUT" alt="photo" id="image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga in, iste, expedita harum culpa beatae eligendi ex eum repellendus praesentium illo minima magnam esse aliquid eos odio corrupti quibusdam unde.
Perferendis nihil earum eius! Accusantium at quasi fugit ea, omnis fugiat, praesentium excepturi error suscipit maiores illum hic, ipsum odio esse laudantium animi? Deserunt nulla blanditiis odio libero, ratione saepe?
Odio, commodi eligendi. Distinctio consequatur quam ut perspiciatis, tenetur, itaque dolorem voluptatibus, fuga quia quisquam vitae laudantium illum. Voluptate quae excepturi itaque numquam cum incidunt vero quas molestias, voluptas tempora!</p>
<a href="#">Read more..</a>
</article>

<article>
<h1>create traffic to your website</h1>
<img src="https://imgix.bustle.com/uploads/image/2020/3/19/da3b7371-f5ec-4dc8-b824-a3667456cc33-best-folding-grocery-carts.jpeg?w=1200&h=630&fit=crop&crop=faces&fm=jpg" alt="photo" id="image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit officia nulla sapiente architecto autem veritatis accusantium tempore tenetur quisquam, id porro qui incidunt quae. Omnis, magnam? Earum itaque enim ut?
tibus velit, libero qui sed! Ex itaque accusantium, exercitationem facere nulla doloremque molestiae? Rem illum eos provident unde itaque.
Unde fugiat repellendus, excepturi expedita libero consectetur ullam laudantium. Atque inventore sed dignissimos fugit rem itaque, eius officiis! Nobis suscipit, natus eos provident corporis harum recusandae aperiam nisi error. Pariatur.
Voluptas cumque quos, reprehenderit rem quasi nihil. Expedita, nesciunt dolorum. Accusantium esse eos pariatur rerum minus deleniti consequatur quod, ducimus nisi temporibus? Officia sunt asperiores et, odio cupiditate saepe consequatur.</p>
<a href="#">Read more...</a>
</article>
</section>
<footer class="footer">
<div class="icons">
<h3>visit us on these social media links:</h3>
<ul>
<li><a href="#">facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</div>
<div class="searchbar">
<input type="search" placeholder="Search..." />
<button>search</button>
</div>
</footer>


</body>
</html>
238 changes: 238 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,241 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

/*general styles*/

*,*::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
color: #ffffff;
font-size: 19px;
line-height: 1.4;
background-color: #373939;
font-family: Arial, Helvetica, sans-serif;
}

/*header styles*/

header{
margin: 10px 0;
width: 100%;
display: flex;
flex-flow: column;
min-height: 10vh;
margin: 0 auto;
position: relative;
box-shadow: 10px 2px 20px(rgba(90, 73, 73, 0.2))
}
.main-header{
display: grid;
line-height: 10vh ;
background-color: #616d85;
grid-template-columns: repeat(2, minmax(375px, auto));
}

.main-header .logo{
display: flex;
font-weight: 600;
font-size: 25px;
justify-content: center;
align-items: center;
color: #31b899;
}

.main-header .list{
padding: 0;
list-style: none;
display: flex;
justify-content: center;

}

.main-header .list li{
margin: 5px;
}

.main-header .list li a {
text-transform: capitalize;
text-decoration: none;
color: #31b899;
padding: 10px 15px;
}

.main-header .list li a:hover {
background-color: #919db6;
color: #ffffff;
}

.main-title{
color: #31b899;
text-align: center;
padding-bottom: 10px;
background-color: #616d85;
}

.main-title .title{
text-transform: capitalize;
}

.main-title p{
color: #a2d3c8;
}


/* main section */

.main-section{

min-width: 750px;
width: 75vw;
min-height: 100vh;
margin: 0 auto;
}

.main-section .title{
text-align: left;
font-size: 35px;
font-weight: 200;
font-family: cursive;
margin: 0 0 10px 15px;
padding: 10px;
background-color: rgba(144, 142, 142,.2);

}

.main-section article{
margin: 5px;
padding: 15px;
border-radius: 15px;
}
.main-section article h1{
text-align: left;
text-transform: capitalize;
font-size: 30px;
color: #047dce;
font-family: cursive;
margin-left: 15px;
}

img{
max-width: 1000px;
width: 100%;
margin-top: 10px;
object-fit: cover;
}

.main-section article p{
padding: 10px 20px;
}

.main-section article a{

padding: 5px 10px;
display: block;
width: 150px;
font-size: 20px;
color: #d7bcbc;
text-decoration: none;
margin-left: 15px;
background-color: #4e6b5d;
border: 1px solid rgba(3, 3, 21, 0.5);
}

.main-section article a:hover{
color: #ffffff;
background-color: #636c80;
}

.main-section article:first-child{

background-color: #0d0b35;
}
.main-section article:nth-child(2){

background-color: #072a20;
}
.main-section article:last-child{
background-color: #3e0229;
}


/* footer styles */

.footer {
background-color: #616d85;
color: aliceblue;
display: grid;
width: 100%;
min-height: 25vh;
grid-template-columns: repeat(2, 1fr);
}

.footer .icons {
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
padding: 25px;
}

.footer .icons h3{
font-size: medium;
color: #d5ece6;
font-weight: 100;
font-weight: 200;
text-transform: capitalize;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgb(69, 67, 67);
}
.footer .icons ul{
list-style: none;
}

.footer .icons a{

display: block;
padding: 3px;
margin: 5px;
text-decoration: none;
color: rgb(210, 169, 169);

}

.footer .searchbar {

display: flex;
justify-content: center;
align-items: center;
}

.footer .searchbar input {

padding: .479rem;
width: 45%;
outline: none;
border-radius: 4px;
border: 1px solid gray;
}

.footer .searchbar button{

border: 1px solid gray;
padding: .480rem;
cursor: pointer;
outline: none;
font-weight: 600;
}

.footer .searchbar button:hover {
background-color: #919db6;
color: white;
}




1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
</head>
<body>
<!-- Add your HTML markup here -->

<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>