DEV Community

A K I L A N
A K I L A N

Posted on

DAY- 6(project - 2)

#html #css #webdev #tutorial

RESUME

Sample resume

  1. First form a Blueprint

  • there are two partitian - blue and white

  • there is a photo in the top center

Here there is less work in HTML and more parts in CSS

HTML

<body>

    <div class="Ak">           
        <div class="left">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyz-77X11MoGE22xVjjPhbpW6lPj6I0SkcTQ&s" alt="Profile image">
        </div>
         <div class="right"></div>
     </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

<style>
        .Ak{
            border: 1px solid red ;
            height: 100vh;
            width: 60vw;
            margin: auto;
            `display: grid;
            grid-template-columns: 1.5fr 2fr;`

        }
        .left{
            border: 1px solid seagreen;
            display: flex;
            justify-content: center;
            align-items: center;




        }
        .right{
            border: 1px solid black;
        }
        img{

            width: 100px;
            height: 100px;



        }
    </style>
Enter fullscreen mode Exit fullscreen mode

_There some new tags _

  • vh- view port height

  • vw-view port width

  • display: grid;
    grid-template-columns: 1.5fr 2fr;     -The display property specifies the display behaviorof an element.

  • fr- frame

  • A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex

  • Difference % and vh?
    % - will apply to the parents
    vh - will apply to screen size

This the current output this will be complete tomorrow

An Exericse in Flexfroggy

In this the last question - 24 was very difficult


_first line _


second line


Third line

fourth line


flex-wrap: wrap-reverse;
justify-content: center;
flex-direction: column-reverse;
align-content: space-between;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)