Membuat Website Responsiv Dengan HTML dan CSS

Mei 31, 2021

Membuat Website Responsiv Dengan HTML dan CSS

Oke kawan,kali ini saya akan memberikan Source Code untuk membuat website responsiv yang memakai html dan css,oke tanpa basa basi langsung saja cekidot!

HTML:

<!DOCTYPE html>

<head>

<title>Workthink</title>

</head>

<body>

<div>Customer Care: 555-328-7448</div>

</div>

ENG</div>

</div>

</div>

MY ACCOUNT

</div>

</div>

</div>

</div>

<li role='menuitem'><a>Why Workthink?</a></li>

<li role='menuitem'><a>Our Plans</a></li>

<li role='menuitem'><a>Contact Us</a></li>

</ul>

</div>

</header>

<h1>THE FUTURE OF WORK <BR>

IS HERE</h1>

<h2>Be Part of the Largest Enterpreneur Community

<button class='button transparent'>Learn More</button>

</div>

<h1><b>WHY</b> WORKTHINK?</h1>

<p>Unlike in a typical office environment, those coworking are usually not employed by the same organization. Typically it is attractive to work-at-home professionals, independent contactors, or people who travel frequently who end up working in relative isolation.</p>

</div>

<h3>PROMOTE</h3>

<p>You can also type a keyword to search online for the video that best fits your document.

</div>

</div>

<h3>PROMOTE</h3>

<p>You can also type a keyword to search online for the video that best fits your document.

</div>

</div>

<h3>PROMOTE</h3>

<p>You can also type a keyword to search online for the video that best fits your document.

</div>

<h1><B>THE</B> BENEFITS</h1>

<p>Experience coworking for yourself and your friends. Join our Weekend Hustler program for only Rp100.000/person per day (9am to 10pm) every Saturday or Sunday.</p>

<ul>

<li>Full day use of our coworking space</li>

<li>Meet other hustlers</li>

<li>FAST INTERNET CONNECTION</li>

<li>Unlimited flow or coffee, tea and filtered water</li>

<li>Light snacks & Ding Dong competition</li>

<li>Resting Pod</li>

</ul>

<button class='button black shadow'>REGISTER NOW TO RESERVE SPOT</button>

</div>

</div>

<h1><B>OUR</B> PLANS</h1>

<p>Do More. Worry Less. Here are our office environment plans.

</div>

<button class='button white'>WORKTHINK MEMBER</button>

</div>

<p>from Rp 200.000/month</p>

</figcaption>

</figure>

</div>

<button class='button white'>PRIVELEGE MEMBER</button>

</div>

<p>from Rp 480.000/month</p>

</figcaption>

</figure>

</div>

<button class='button white'>VIRTUAL OFFICE PLANS</button>

</div>

<p>from Rp 650.000/month</p>

</figcaption>

</figure>

</div>

<p>Experience is the shoot knowledge or mastery of an event or subject gained through involvement in or exposure to it.

</div>

<div class='name'>SARAH DOE</div>

<div class='profecy'>PHOTOGRAPHER</div>

<div class='word'>"it's good to be workthink member"</div>

</div>

</div>

<div class='word'>"it's good to be workthink member"</div>

</div>

</div>

<div class='name'>EDGAR LUIZ</div>

<div class='profecy'>BLOGGER</div>

<div class='word'>"it's good to be workthink member"</div>

</div>

</div>

<h2>SUBSCRIBE OUR</h2>

<h1>NEWSLETTER</h1>

</div>

<div>

</div>

<p>Sed ut perspiciatis unde omnis iste natus laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>

</div>

<h2>Our Plans</h2>

<ul>

<li>

</div>

Workthink Member

</div>

</li>

<li>

</div>

Privelege Member

</div>

</li>

<li>

</div>

Virtual Office Plans

</div>

</li>

</ul>

</div>

<h2>Media Partner</h2>

<div class='image'><div><div class='circle'><div>become a partner</div></div></div></div>

</div>

</footer>

</div>

</div>

</body>

</html>.

CSS general:

/*this is desktop display*/

/*general style */

html,body{

width:100%;

margin:0px;

padding:0px;

font-family:Arial;

}

.container{

width:1200px;

margin:0 auto;

}

figure{

margin:0px;

}

box-sizing:border-box;

max-width:100%;

}

*::selection{

background:gold;

}

ul{

margin:0px;

padding:0px;

}

.wrapper{

max-width:none;

}

li{

list-style-type:none;

}

/*end general style*/

.information{

background:black;

color:white;

text-transform:uppercase;

padding:10px 0px;

z-index:100;

}

.information .container{

display:flex;

align-items:center;

}

.information .container .customer{

flex:1;

}

.information .container .account{

display:flex;

justify-content:flex-end;

}

/*under section is below*/

header{

padding:10px 0px;

}

.slider header .container{

display:flex;

align-items:center;

}

.slider header .logo{

filter:invert(100%);

height:80px;

}

.slider header .logo img{

height:100%;

}

.slider .logo{

flex:1;

position:relative;

}

.slider ul{

color:white;

display:flex;

}

.slider ul li{

padding:10px 20px;

}

.slider{

position:relative;

max-width:100%;

color:white;

overflow:hidden;

}

.slider img[alt='Wallpaper']{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

filter:brightness(50%);

z-index:-1;

}

.slider .word{

padding:100px 0px;

}

.slider .word h1{

font-size:3em;

font-weight:normal;

}

.slider .word h1+h2{

font-weight:normal;

font-style:italic;

}

button{

background:transparent;

border:none;

color:white;

font-family:Arial;

padding:7px 20px;

font-size:1em;

}

button.transparent{

border:2px solid white;

}

.container-button{

padding-top:40px;

}

.back-logo{

position:absolute;

width:200px;

height:400px;

bottom:-100px;

left:-50px;

transform:rotate(-50deg);

background:black;

filter:invert(100%);

z-index:-1;

}

.section h1{

margin:0px;

text-transform:uppercase;

font-weight:normal;

position:relative;

padding-bottom:5px;

}

.section h1:after{

width:100px;

height:4px;

background:black;

content:'';

position:absolute;

left:0px;

bottom:0px;

}

.section{

padding:80px 0px;

}

.why{

background:#e9dacd;

}

.section h1+p{

margin:40px 0px;

}

.why h1+p{

width:90%;

font-size:1.25em;

}

.wrapper{

margin:0px -20px;

display:flex;

flex-flow:row wrap;

}

.why .wrapper .item{

display:flex;

width:33.33333332%;

padding:0px 20px;

}

.why .image{

width:100px;

height:100px;

}

.why .word{

flex:1;

}

.why .image .outer{

width:90%;

height:90%;

border-left:8px solid #2b2b2b;

border-top:7px solid #2b2b2b;

border-right:8px solid #2b2b2b;

border-bottom:7px solid #2b2b2b;

padding:10px 5px 5px 12px;

}

.why .image .inner{

width:100%;

height:100%;

border-top:14px solid #2b2b2b;

border-right:6px solid #2b2b2b;

border-left:14px solid #2b2b2b;

border-bottom:6px solid #2b2b2b;

}

.why .word h3{

font-weight:normal;

margin:0px;

}

.why .word p{

margin:0px;

font-size:0.8em;

line-height:20px;

}

.why .word button{

color:#006883 !important;

padding:0px;

margin-top:15px;

font-size:0.8em;

}

.benefit{

padding:80px;

display:flex;

position:relative;

}

.benefit .word{

width:50%;

}

.benefit .container{

display:flex;

}

.benefit .image{

right:0px;

top:0px;

position:absolute;

flex:1 1 600px;

max-width:600px;

width:600px;

height:100%;

}

.benefit img{

width:100%;

height:100%;

object-fit:cover;

}

.benefit .word{

font-size:1.1em;

}

.benefit ul li{

position:relative;

padding-left:20px;

}

.benefit ul li::before{

content:'';

width:10px;

height:10px;

background:black;

transform:rotate(45deg);

left:0px;

top:5px;

position:absolute;

}

.plans{

background:#f2e8e0;

}

.full{

display:flex;

flex-flow:row wrap;

height:300px;

}

.full .item{

width:33.333333333%;

}

.full .item figure{

position:relative;

display:flex;

justify-content:center;

align-items:center;

height:100%;

}

.full .item figure img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

z-index:2;

filter:brightness(50%);

}

.full .item button{

color:black;

background:white;

font-weight:bold;

}

.full .item figcaption{

position:relative;

z-index:3;

}

.full .item figcaption p{

text-align:center;

color:white;

}

.said{

background:#e9dacd;

}

.said .wrapper{

margin:0px;

display:flex;

flex-flow:row wrap;

}

.said .wrapper .item{

width:33.33333%;

padding:20px;

text-align:center;

transition:0.5s all;

}

.said .image{

width:200px;

height:200px;

border-radius:50%;

overflow:hidden;

margin:0 auto;

}

.said .image img{

width:100%;

height:100%;

object-fit:cover;

}

.said .word{

padding-top:40px;

}

.said .word .name{

font-weight:bold;

}

.said .word .profecy{

color:gray;

margin-top:10px;

font-weight:bold;

font-size:0.9em;

}

.said .word .word{

font-style:italic;

}

.said .item:hover{

box-shadow:0px 0px 10px rgba(0,0,0,0.2);

}

.newsletter{

position:relative;

background:rgba(185,124,124,0.7);

}

.newsletter .image{

position:absolute;

width:100%;

height:100%;

left:0px;

top:0px;

z-index:-1;

filter:blur(3px);

}

.newsletter .image img{

width:100%;

height:100%;

object-fit:cover;

}

.newsletter .container{

display:flex;

align-items:center;

}

.newsletter .container> *{

flex:1;

}

.newsletter .form{

display:flex;

justify-content:center;

}

.newsletter .form div{

border-radius:1000px;

border:2px solid white;

width:300px;

height:50px;

display:flex;

align-items:center;

}

.newsletter input{

background:none;

color:white;

border:none;

height:100% ;

flex:1;

}

.newsletter button{

width:40px;

display:flex;

justify-content: center;

}

.newsletter input::placeholder{

color:white;

padding:0px 10px;

font-size:1.5em;

}

.newsletter h2{

color:white;

}

.newsletter h1{

font-size:3em;

font-weight:bold;

}

footer{

background:#271818;

color:white;

padding:80px 0px;

font-size:0.9em;

}

footer .container .wrapper{

margin:0px -10px;

display:flex;

flex-flow:row wrap;

}

footer .wrapper .item{

width:33.333333%;

}

footer img{

width:100%;

}

footer .wrapper-1{

margin:0px -10px;

display:flex;

flex-flow:row wrap;

}

footer .first img{

filter:invert(100%);

width:100px;

}

footer .plan ul li{

margin-bottom:10px;

display:flex;

align-items:center;

font-size:0.8em;

}

footer .plan ul li .image{

width:50px;

height:50px;

}

footer .plan img{

width:100%;

height:100%;

object-fit:cover;

}

footer .plan .word{

padding-left:10px;

}

footer .partner .image{

width:33.333332%;

height:100px;

display:flex;

justify-content: center;

padding:1px;

align-items: center;

}

footer .partner .image >div{

background:#a4a3a3;

}

footer .circle{

width:80px;

height:80px;

border:4px solid #656565;

border-radius:1000px;

display:flex;

justify-content: center;

align-items: center;

color:#656565;

text-align:center;

}

.copyright{

color:white;

background:black;

padding:30px;

}

.copyright .container{

display:flex;

}

.copyright .left{

flex:1;

}

footer h2{

margin-top:0px;

}

.button.black{

background:black;

padding:10px 20px;

font-weight:bold;

box-shadow:4px 4px #535353;

}

.media span{

padding:0px 10px;

}

.account > *{

display:flex;

align-items:center;

justify-content:center;

padding:0px 10px;

font-size:0.8em;

}

.account > * > .word{

padding-left:10px;

}

footer .first{

line-height:25px;

}

footer .wrapper-1{

margin:0px;

}

.fa-send{

margin-right:20px;

}

.full button{

padding:10px;

}

.fa-chevron-down{

margin-left:10px;

}

.benefit .image{

overflow:hidden;

}

footer .wrapper-1 .image > div{

width:100%;

height:100%;

justify-content:center;

align-items:center;

padding:10px;

}

medium.css:

/*this is for tablet display*/

.container{

width:648px;

}

.slider ul{

flex-direction:column;

align-items:flex-end;

}

.why .wrapper .item{

width:100%;

margin-bottom:20px;

}

.benefit .image{

width:321px;

max-width:321px;

height:400px;

}

.benefit{

padding-bottom:130px;

}

.benefit .container-button{

position:absolute;

left:50%;

transform:translateX(-50%);

}

.said .image{

width:100px;

height:100px;

}

.newsletter .container{

flex-direction:column;

}

footer .wrapper .first{

width:100%;

}

footer .wrapper .plan{

margin-top:40px;

width:50%;

}

footer .wrapper .partner{

margin-top:40px;

width:50%;

}

.newsletter .form{

margin-top:40px;

}

.benefit .word{

width:60%;

}

small CSS:

/*this is for smartphone display*/

.customer{

display:none;

}

.container{

width:280px;

}

html{

font-size:0.8em;

}

.back-logo{

display:none;

}

header .container{

flex-direction:column;

background:rgba(0,0,0,0.5);

width:100%;

transform:translateY(-10px);

height:80px;

overflow:visible;

}

header .logo{

}

.slider ul{

flex-direction:row;

width:100%;

}

.benefit{

padding:40px 10px 500px;

}

.benefit .image{

position:absolute;

left:0px;

top:auto;

right:auto;

width:100%;

max-width:100%;

bottom:0px;

}

.benefit .container{

flex-direction:column;

}

.benefit .container > * {

width:100%;

}

.benefit .container-button{

font-size:0.6em;

position:relative;

left:auto;

transform:none;

text-align:center;

}

.full{

height:600px;

}

.full .item{

width:100%;

}

.said .wrapper .item{

width:100%;

}

footer .wrapper .plan{

width:100%;

}

footer .wrapper .partner{

width:100%;

}

.copyright .container{

flex-direction:column;

align-items:center;

}

.copyright .left{

order:2;

}

footer .container .wrapper{

margin:0px;

padding:10px;

}

footer .circle{

width:60px;

height:60px;

}

footer .image > div{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

}

.copyright .media{

margin-bottom:10px;

}

.information .fa{

display:none;

SEKIAN TERIMAHKASIH NANTIKAN PERTEMUAN SELANJUTNYA

Cari Blog Ini

Slice Of My Short Life

Membuat Website Responsiv Dengan HTML dan CSS

Komentar

Posting Komentar

Postingan Populer

Cara Menampilkan Data json

memanggil api dari web movie