Scribd
Upload
5 views5 pages

Template 2

The document is an HTML and CSS code for a webpage titled 'Discover the beauty around the world'. It features a layout with an upper section showcasing a title, description, and images, followed by a lower section with additional images and a footer with author information. The design incorporates various styles and fonts to enhance the visual appeal of the content.

Uploaded by

rainbowlegendfeather
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views5 pages

Template 2

The document is an HTML and CSS code for a webpage titled 'Discover the beauty around the world'. It features a layout with an upper section showcasing a title, description, and images, followed by a lower section with additional images and a footer with author information. The design incorporates various styles and fonts to enhance the visual appeal of the content.

Uploaded by

rainbowlegendfeather
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Averia+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Averia+Ser
if+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
rel="stylesheet">
</head>
<body >
<main>
<div class="upperdiv">
<div id="upperleft">
<h1 id="h1">Discover the<br> beauty around<br> the world</h1>
<p id="p">Lorem ipsum dolor sit amet,<br> consectetur adipiscing
elit.<br> Faucibus in libero risus semper<br> habitant arcu.</p>
<button id="btn">Get Started</button>
</div>
<div id="upperright">
<div id="upperright1">
<img
src="https://s3-alpha-sig.figma.com/img/c637/c990/08973b73bb9d7944849f3345872d40c2?
Expires=1739750400&Key-Pair-
Id=APKAQ4GOSFWCW27IBOMQ&Signature=fjk2vyLJgxtOeyhbZLDDC2Uga8UVrE97kSXqXdJdOikTk11S7
3QpqRSfVWMXzl3PeWRlXihE6LtfowgP0U1YfojEQP2w~IZufjipdbz643taom1GQD88D6wLNg8znK13kg9U
TS9I2XGEc~on7mEfrlxwSSvMOLTSNEq0lB49J9uQHHK9F~NwrNBchIREGspriE7aZNQYVpW8J0kxNu4ZQOW
qvYKHzT2Blnl0SmG8-
uqTCuIejsLAkJopvnCtmxCKiV2PiflD6HI7NUhI9GBD9mPjVnfWCUYo4aqIc6tIWcaoL0DNBWFAwGvuNdEh
rneue97-nBm3Y9VL7WyVAPSPeg__" id="img1">
</div>
<div id="upperright2">
<img
src="https://s3-alpha-sig.figma.com/img/53e4/e5d3/78592e14dcb867482922b07570315e08?
Expires=1739750400&Key-Pair-
Id=APKAQ4GOSFWCW27IBOMQ&Signature=QqvUMLJUnPD2OQq6zZoWylSrvbGa04UYOtddd-
ntqsoAdCKf87kvhq-XZJS-dGwc-L1lrjl8tlk6V4-
JKgKTKcNAgtrIsl4zs96D1UEX~gynOkZ0UZZba8S3gc2tKjevoWgeFtNX3Pg1X2ILFltb4Yn~Jh0JVXRaET
HqD~4ZXgBdBPA3HCU8dJum1oh~FF73zFnwptnSSuup-
k3d2lssPVyHE8dkOliL7EVjyToEZJwCPl1wtGeH3460K~CeuRMjlWCrqh49I7ZnzDQnjZDqeXau0PCJ8Xl1
QwxXeb4h1HHUAg614-jzgt~LNYLQtL3iP4F5j5dNjFAHYyySB8jhBg__" id="img2">
</div>
</div>
</div>
<div class="lowerdiv">
<div id="lowerdiv1">
<h2 id="h3">01</h2>
<img
src="https://s3-alpha-sig.figma.com/img/9c4c/dd77/210c97745f0956f385661929cec2f84d?
Expires=1739750400&Key-Pair-
Id=APKAQ4GOSFWCW27IBOMQ&Signature=Ilw~Tb3fOSMbFCytFscBozRAXKmJto-
fI6PSO1LV7toRHcnGECKMkZhND2~bhUXt-uZqGnubr1JRYSJjiKQEtdV-
rJeFU5MIXsdcRZ66yVrrqPiucr~axq9j28T0UyAqsAgq1TsXBoKFdrufoORk~WVyDgl0QWKMYdCkFVlzsSS
ay3TGI4G5peMZO6TxKxDIXBw0G6wXaLEHMspoegsbKxw6r-8-
Rz5pB1YlcGNqcDiEEer4TOnbL5SWB9R1ZdgRgRQld3CHXMU8gikIkAjI9qJbIMpRnybyEd2drKyumkyjU8d
GnA7HGa4VTIxnwO4daUbDqsfjGk30yfcGnhbXxw__" id="img3">
</div>
<div id="lowerdiv2">
<h2 id="h3">02</h2>
<img
src="https://s3-alpha-sig.figma.com/img/7ba6/af6e/088c5b76a6d325c7cd167587f8135605?
Expires=1739750400&Key-Pair-
Id=APKAQ4GOSFWCW27IBOMQ&Signature=Uuny3eYS9AwWBK27SUP80iHaX-~ju1RoqcTjSu6~XACdRL-
CpCIGTpOP~OBFEdnjoUXd1pVYBrs7K1ZMijsXSa5cqfjDtdpZBRILrg3dFVu4cBJwll94lRDyRu4tx8WDGV
19wKkPLt8qVMxLEE2yrV9-qV8Wu-
EcztR2tIcNMtK8Hlq~6qVevzRTDLz3aqQVIwC6hy0fe~ODywVJfx9wzqsdTlNQ7li20EwpMbUv1PZtIAPSs
mb4Jj-
8dEveKwW8FhNU4fLAC6juafU16pB3hJYKLrm2f5~AGkmsFAyIp029YzNkXFR7LzLneoKjEcVRkAL~YWiBGa
71sL3X-MQGIQ__" id="img4">
</div>
<div id="lowerdiv3">
<h2 id="h3">03</h2>
<img
src="https://s3-alpha-sig.figma.com/img/50b9/a20b/dc0067f6fd7a96afdec9d247203714c2?
Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=j-
CqfeXyZN3~jVEmhlOF9LI2PUYCmAL9UpGVPUyqVJrjfP3IJ4WsC~zeVmjg-pHkwWkaLHEVYA~yScRmdb-
Hhjugj38e5iGZ5XGxEqvpOlQH-
GOhEp6gtidq1N76APVuXHRbGdMeVeNgMP5ElngURFBWWifi2ok8G70NMjNKsglGCKJHR~TxudriQpfRWYYM
zgCmmoHzuvQATAaBdVvYht4-
hkp4oj3NnEGXtaKYK5EUIlkpv2HivGdbFvmuyLagsp4ZpVrme26t99htflGKJrIhUnWivTq~LVc3uJlKDxo
wIr-eo6zocdCZaZyuoK7flwhlSQg6vPUoeSbMudAKmA__" id="img5">
</div>
</div>
<footer id="ftr">
<br><hr>
Author:Hariom Sharma<br>
&copy;Copyright Reserved<br>
<a
href="mailto:rainbowlegendfeather@gmail.com">rainbowlegendfeather@gmail.com</a>
</footer>

</main>

</body>

</html>

*{
margin: 0;
padding: 0;
box-sizing:border-box ;
}
html,body{
height: 100%;
width:100%;

main{
/* height: 100%; */
width: 100%;
}
.upperdiv{
width: 100%;
height: 60%;
display: flex;
}

#upperleft{
width: 30%;
height: 100%;
}

#h1{
font-weight: 800;
size: 56px;
line-height: 40px;
font-family: "Averia Libre";
color: rgba(37, 37, 37, 1);
margin-top: 36px;
}

#p{
font-weight: 400;
size: 26px;
line-height: 35.52px;
color: rgba(37, 37, 37, 0.8);
font-family: "Averia Libre";

#btn{
width: 157px;
height: 50px;
border-radius: 16px;
padding: 16px, 32px;
gap: 10px;
background-color: rgba(37, 37, 37, 1);
color: aliceblue;
}

#upperright{
width: 70%;
height: 100%;
display: flex;
}

#upperright1{
width: 50%;
height: 100%;
}
#img1{
width: 408px;
height: 480px;
border-radius: 16px;
margin-top: 10px;
margin-left: 50px;
}

#upperright2{
width: 50%;
height: 100%;
}

#img2{
width: 408px;
height: 480px;
border-radius: 16px;
margin-left: 45px;
margin-top: 100px;
}

.lowerdiv{
height: 40%;
width: 100%;
display: flex;
}

#lowerdiv1{
width: 33%;
height: 100%;
}

#h3{
font-family: "Averia Libre";
color: darkgray;
margin-top: 290px;
}

#img3{
width: 412px;
height: 379.16px;
border-radius: 16px;
margin-top: 10px;
}

#lowerdiv2{
width: 33%;
height: 100%;
}

#img4{
width: 412px;
height: 381px;
border-radius: 16px;
margin-top: 10px;
}

#lowerdiv3{
width: 34%;
height: 100%;
}

#img5{
width: 412px;
height: 381px;
border-radius: 16px;
margin-top: 10px;
}

#ftr{
/* background-color: red; */
width: 100%;
/* height: 20vw; */

font-family: "Averia Libre";


}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy