Cv bootstrap Github

by brunomateus

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <header class="mt-4">
            <div class="container">
                <div class="row">

                    <div class="col-md-auto text-center ps-0">
                        <img src="https://themes.3rdwavemedia.com/demo/bs5/pillar/assets/images/profile.jpg" width="220">
                    </div>

                    <div class="col">
                        <div class="row p-3 justify-content-center justify-content-md-between">
                            <div class="col-auto col-sm-6">
                                <h1>STEVE DOE</h1>
                                <h3>Full Stack Developer</h3>

                                <ul class="contact list-unstyled">
                                    <li><i class="bi bi-envelope me-1"></i>Steve.Doe@website.com</li>
                                    <li><i class="bi bi-phone me-1"></i>0123 456 78900</li>
                                </ul>
                            </div>

                            <div id="sites" class="col-auto col-sm-6 text-end">
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-linkedin"></i><a class="ms-1" href="http://linkedin.com/in/stevedoe" target="_blank">linkedin.com/in/stevedoe</a></li>
                                    <li><i class="bi bi-github"></i><a class="ms-1" href="github.com/username" target="_blank">github/username</a></li>
                                    <li><i class="bi bi-codepen"></i><a class="ms-1" href="#">codepen.io/username/</a></li>
         ...

CSS

body {
    font-family: 'Roboto', sans-serif;
    background-color: #F7F8FA;
    color: rgb(88, 103, 124);
}

header > .container {
    background-color: #434E5E;
    color: white;
}

.container {
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px;
}

#sites a {
    color: rgba(255, 255, 255, 0.6);
}

#sites a:hover {
    color: white;
}

ul.contact {
    color: rgba(255, 255, 255,  0.6);
}

li {
    margin: 10px 0;
}

h2, h4, h5, h6 {
    color: #434E5E;
    margin: 5px 0;
}

h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid;
    margin: 40px 0 20px 0;
}


.company {
    font-size: 0.7em;
}

.period {
    color: rgb(170, 180, 195);
    font-weight: normal;
    font-size: 1.1vw;
}

.awards i {
    left: 0;
    top: 4px;
    color: #aab4c3;
}


.lang em {
    font-weight: lighter;
    font-style: normal;
    color: #6c757d;
}