Jean Cédric NTWARI
As an exercise,I began to work on Portfolio using HTML and CSS. I realize, my source code will be long because to make it responsive to all devices small, medium and large, I will have to adapt it to all different size by using Media Queries (@media). But there is another way, W3.CSS a CSS framework, which supports responsive design, and it is smaller and faster than other CSS frameworks. It uses classes name and no need to write a CSS file.
The objective is to get comfortable with HTML and CSS and JavaScript, so I will do this exercise using these three languages. Here you can see my files:
Html:
<!DOCTYPE html>
</html>
<head>
<title>My Porfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/05805e8fb1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="left-box">
<div class="portait">
<img src="cc.png" alt="me" title="Me">
</div>
<h3>Jean Cédric NTWARI</h3>
<div class="titre"><a>Web developer/ Powercoders Participant</a></div>
<div class="mobile" title="Telephon Mobile"><i class="fas fa-mobile-alt"></i> 077 9637 066</div>
<div class="email" title="My Email"><i class="fas fa-envelope-square"></i> cedric.ntwari@powercoders.org</div>
<div class="media">
<a href="https://github.com/" target="_blank" title="Github"><i class="fab fa-github"></i></a>
<a href="https://jeancedric.netlify.com/" target="_blank" title="My Blog"><i class="fas fa-blog"></i></a>
<a href="#" title="Linkedln"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="adress">
<i class="fas fa-map-marker-alt"></i>
<a href="https://goo.gl/maps/YCM5k7XsLFwvkJob8" target="_blank" title="My adress">Pfäffikon SZ, Freinbach</a>
</div>
<button><a href="mailto:cedric.ntwari@powercoders.org" target="_blank">Email me</a></button>
</div>
<div class="right-box"></div>
</div>
</body>
<html>
Css:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: lightgray;
}
.container{
height: 580px;
display: flex;
}
.left-box{
flex-grow: 1;
border-radius: 10px;
margin:10px;
background-color: white;
text-align: center;
}
.right-box{
flex-grow: 7;
border-radius: 10px;
margin: 10px;
background-color: white;
}
.portait img{
width: 120px;
height: 120px;
margin-top: 10px;
border-radius: 50%;
}
.titre a{
text-decoration: none;
background-color: #eee6ff;
border-radius: 20px;
padding: 10px;
}
.mobile{
padding-top: 20px;
}
.mobile i{
color: blue;
}
.media{
padding-top: 20px;
font-size: 20px;
color: blue;
padding-bottom: 30px;
}
.media i{
padding-top: 10px;
}
.email{
padding-top: 20px;
}
.email i{
color: blue;
}
.adress{
margin: 0;
padding: 0;
background-color: #f2f2f2;
height: 30px;
padding-top: 10px;
}
.adress a{
text-decoration: none;
margin: 10px;
}
.adress i{
color: blue;
}
button{
margin: 30px;
padding: 15px;
background: #4d79ff;
border-radius: 20px;
}
button a{
text-decoration: none;
color: white;
}
Browser:
Tomorrow I will continue to work on it. One English course came to the end (certificate), it helped me to improve my pronunciation, vocabulary and of course my speaking and listening skills. I still keep it up every day with the typing lessons.