Laptop in CSS

Discuss all artwork and development - Suggestions needed

Moderator: Moderators

Post Reply
msdobrescu
Old Dear Hen
Posts: 876
Joined: Sun Aug 21, 2011 8:48

Laptop in CSS

Post by msdobrescu » Wed Feb 05, 2020 10:09

Hello, half of a year ago, I have commented on a new website design post, related to the laptop image used there.
I was not trolling, but I have ended feeling like I did. I did not want to discourage the designer, but I was feeling I did that too. I apologise.
When I have got the time, I've made some CSS attempt to do it (the screen should contain some chosen image, I have set sabayonlinux.png, which is a Sabayon distro image, so I didn't post it here). Below is the code, if anybody interested. Of course, more complicated and fancy design could be done.

Code: Select all

<html>
    <head>
        <title></title>
        <meta content="">
        <style>
* {
  box-sizing: border-box;
}

body {
    background: #ffffff;
}

.laptop-container {
    position: relative;
    margin: auto;
    /*width: 912px;*/ /*to be able to enlarge in the browser*/
    width: 50%;
}

.laptop-sizer {
    position: relative;
    margin: auto;
    width: 100%;
    padding-top: 44.30%;
}

.laptop {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    top: 1%;
}

.lid {
    position: relative;
    width: 65%;
    height: 88%;
    background: #1f1f1f;
    border-radius: 3% / 5%;
    margin: auto;
}

.lid > .screen {
    width: 93%;
    height: 89%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: url(sabayonlinux.png) no-repeat;
    background-size: 100% 100%;
}

.btm {
    height: 4%;
    background: #303030;
    width: 80%;
    position: relative;
    margin: auto;
}

.btm-round {
    position: relative;
    width: 80%;
    height: 2%;
    border-radius: 0 0 2% 2% / 0 0 80% 80%;
    background: #202020;
    margin: auto;
    bottom: 0;
}

        </style>
    </head>
    <body>
        <div class="laptop-container">
            <div class="laptop-sizer">
                <div class="laptop">
                    <div class="lid">
                        <div class="screen"></div>
                    </div>
                    <div class="btm"></div>
                    <div class="btm-round"></div>
                </div>
            </div>
        </div>
    </body>
</html>
Best Regards.

Post Reply