Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

08 Haga lo que hicimos en el aula

HTML



<!DOCTYPE html>
<html lang="en-col">
<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">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="pfdsgn">
        <section class="pfdsgn__content">
            <h1 class="pfdsgn__content_title">Take your digital business to the next level <strong>with a quality Front-end!</strong>
            </h1>
                <p class="pfdsgn__content_text">Hi! I'm <strong class="name">Diego H</strong>, Front-end developer with specialization in React, HTML and CSS. I help small businesses and designers to implement good ideas.</p>
            <div class="pfdsgn__links">
                <h2 class="pfdsgn__links_sbtl" >My links</h2>
                <a class="pfdsgn__links_md" href="https://www.instagram.com/">Github</a>
                <a class="pfdsgn__links_md" href="https://github.com/">LinkedIn</a>
            </div>
        </section>
            <img src="img2.jpg" alt="Diego's image" width="475" height="475" class="img">
    </main>
    <footer>
        <div>Copyright&copy; 2024 - Created by Diego H. All Rights Reserved</div>
    </footer>    
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(23, 24, 26);
    color: #eeeeee;
    font-family: Arial, Helvetica, sans-serif;
    height: 70vh;
}

strong {
    color: #35a1df;
}

.name {
    color: #97aeeb;
}

.pfdsgn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10% 15%;

}

.pfdsgn__content { 
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pfdsgn__content_title {    
    font-family: "Krona One", sans-serif;
    font-size: 36px;
}

.pfdsgn__content_text {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
}

.pfdsgn__links {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.pfdsgn__links_md {
    width: 280px;
    text-align: center;
    padding: 21.5px 0 ;
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 650;
    text-decoration: none;
    color: #d0d8dd;
    border: 2px solid #96c9eb;
}

.pfdsgn__links_sbtl {
    font-family: 'Krona One', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #97aeeb;
}

.img {
    border-radius: 20px;
    display: inline-block;
}

footer {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10px;
    text-align: center;
}

Img

1 respuesta

Hola, Diego ,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!