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

ZA2-Ele Mashige-HTML-CSS-Coursework-Week1 #150

Open
EleMashige wants to merge 6 commits into
base: master
Choose a base branch
from
Open

ZA2-Ele Mashige-HTML-CSS-Coursework-Week1 #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f10c0e7
Please see updates
EleMashige Jun 3, 2022
4f4db9d
Update index.html
EleMashige Jun 3, 2022
2125cb8
Update index.html
EleMashige Jun 3, 2022
67ba999
Updates
EleMashige Jun 3, 2022
5ad4014
update
EleMashige Jun 3, 2022
caf0f83
Update index.html
EleMashige Jun 4, 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
143 changes: 143 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,146 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}

h1 {
color: #FF9F45;
font-family: 'Sacramento', cursive;
font-size: 3.75rem;
margin: 50px auto 0 auto;
}
h2 {
color: #FFBC80;
font-size: 1rem;
font-family: 'Montserrat', serif;
font-weight: normal;
}

h3 {
color: #F0A500;
}

a {
color: #F0A500;
}
hr {
width:800px;
position: relative;
}
.top-container {
background-color: white;
}
.middle-container {
font-family: 'Montserrat', serif;
margin: 100px;
}
.bottom-container {
background-color: #FFBC80;
padding: 20px 0 20px 0;
font-family: 'Montserrat', serif;
}

.skill-row {
width: 50%;
margin: 100px auto 100px auto;
text-align:left;
line-height: 1;
}

.code-img {
border-radius: 10%;
width: 25%;
float:left;
margin: 30px;
position: relative;
bottom: 50px;
}
.payroll-img {
width: 25%;
float: right;
margin-right: 250px;
position: relative;
bottom: 30px;
}
.cooking-img {
width: 35%;
float: left;
margin: 25px;
position: relative;
bottom: 30px;
}
.profile {
position: relative;
bottom: 50px;
}
.top-cloud {
position: relative;
left: 230px;
}
.bottom-cloud {
position: relative;
right: 230px;
}

.contact-me {
padding-bottom: 30px;
}
.btn {
background: #F0A500;
background-image: -webkit-linear-gradient(top, #F0A500, #F0A500);
background-image: -moz-linear-gradient(top, #F0A500, #F0A500);
background-image: -ms-linear-gradient(top, #F0A500, #F0A500);
background-image: -o-linear-gradient(top, #F0A500, #F0A500);
background-image: linear-gradient(to bottom, #F0A500, #F0A500);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 5px 10px 5px 10px;
text-decoration: none;
}

.btn:hover {
background: #F76E11;
background-image: -webkit-linear-gradient(top, #F76E11, #FFE4C0);
background-image: -moz-linear-gradient(top, #F76E11, #FFE4C0);
background-image: -ms-linear-gradient(top, #F76E11, #FFE4C0);
background-image: -o-linear-gradient(top, #F76E11, #FFE4C0);
background-image: linear-gradient(to bottom, #F76E11, #FFE4C0);
text-decoration: none;
}
.footer-link {
margin: 0 20px 0 0;
text-decoration: none;
color: white;
}
.copy-right {
color: white;
font-size: 0.8rem;s
}
.linkedin {
color: #4169E1;
text-decoration: none;
margin: 10px;
}
.twitter {
color: #1E90FF;
margin: 10px;
text-decoration: none;
}
.youtube {
color: red;
margin: 10px;
text-decoration: none;
}
.
.skill-row:first-child h3 {
color: grey;
}
75 changes: 72 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>About Ele</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -16,7 +16,76 @@
<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 -->
<header>
<div>
<img class="top-cloud"src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/cloud.png" alt="coud img">
</div>
<div class="top-container">
<h1>Elekanyani Mashige</h1>
<h2>A Future Web Developer</h2>
</div>

<div>
<img class="bottom-cloud"src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/cloud.png" alt="cloud img">
</div>

<div class="middle-container">
<div class="profile">
<img src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/Hello.jpeg" alt="profile img">
<p>My name is Elekanyani, i love coding. I'm new to it, and passionate about it.</p>
</div>
</header>
<hr>
<main>
<!-- My Skills -->

<article class="Skills">
<h2>My Skills</h2>
</article>
<article class="skill-row">
<img class="code-img" src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/Working.jpeg" alt="code igm">
<h3>Web Development</h3>
<p>I started learning how to code in 2021, this was beacuse i want to work in a tech industry.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit non perferendis vel dolorem optio deleniti. Veritatis cumque rem perferendis soluta nisi hic modi commodi unde labore consectetur? Ipsum, alias quidem.</p>
</article>

<article class="skill-row">
<img class="payroll-img" src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/save-money.png" alt="skills2 img">
<h3>Payroll Management</h3>
<p>I have been doing payroll for more than 2 years, it's one of my key responsibilities in my role.</p>
</article>

<article class="skill-row">
<img class="cooking-img" src="/Users/admin/Desktop/Web Development/CSS - My Site/css/Images/Cooking.jpeg" alt="skills2 img">
<h3>Cooking </h3>
<p>My favourate meal to cook is Lasagna, it's a very easy meal to make, but what makes it more exciting is people thinking that it's very complicated. I also love cooking African traditional food, it always reminds me of my roots.</p>
</article>
</main>

<hr>
<article>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>If you want a coding buddy.</h3>
<p>Let's crack some codes together.</p>
<a class="btn" href="mailto:mashigy145@gmail.com">CONTACT ME</a>
</div>
</article>
</div>
<!-- Socials -->
<footer class="bottom-container">
<a class="linkedin" href="https://www.linkedin.com/in/elekanyani-mashige-491a51b5/?trk=people-guest_people_search-card&originalSubdomain=za" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a class="twitter" href="https://twitter.com/Mashige_" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
<a class="youtube" href="https://www.youtube.com/channel/UCUSPLpHvKjiJJ5iWJm4HNgw" target="_blank">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<p class="copy-right">© Elekanyani Mashige.</p>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.j
</footer>
</body>
</html>