Scribd
Upload
41 views11 pages

Jean Pauline S. Mabini Bsis 1A: Activity #2, #3, #4

The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

Uploaded by

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

Jean Pauline S. Mabini Bsis 1A: Activity #2, #3, #4

The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

Uploaded by

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

Jean Pauline S.

Mabini BSIS 1A

Activity #2, #3, #4

#2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Document</title>

<style>
body{
background-color: lightgray;
}
.first{
top: 1%;
position: absolute;
background-color: green;
width: 99%;
height: 90px;
}
.rec1{
position: absolute;
top: -26%;
left: 1%;
font-family: 'Arial Unicode MS';
color: white;
font-size: 50px;
}
.rec2{
position: absolute;
top: -26%;
left: 17%;
font-family: 'Arial Unicode MS';
font-size: 50px;
color: rgb(165, 247, 165);
}
.second{
position: absolute;
background-color:rgb(144, 194, 45);
top: 21%;
width: 99%;
height: 90px;
}
.pr1{
position: absolute;
top: -26%;
left: 1%;
font-family: 'Arial Unicode MS';
color: white;
font-size: 50px;
}
.pr2{
position: absolute;
top: -26%;
left: 17%;
font-family: 'Arial Unicode MS';
font-size: 50px;
color: rgb(200, 243, 151);
}
.third{
position: absolute;
background-color:rgb(216, 216, 3);
top: 42%;
width: 99%;
height: 90px;
}
.cr1{
position: absolute;
top: -26%;
left: 1%;
font-family: 'Arial Unicode MS';
color: white;
font-size: 50px;
}
.cr2{
position: absolute;
top: -26%;
left: 17%;
font-family: 'Arial Unicode MS';
font-size: 50px;
color: rgb(223, 221, 139);
}
.fourth{
position: absolute;
background-color:orangered;
top: 63%;
width: 99%;
height: 90px;
}
.wd1{
position: absolute;
top: -26%;
left: 1%;
font-family: 'Arial Unicode MS';
color: white;
font-size: 50px;
}
.wd2{
position: absolute;
top: -26%;
left: 17%;
font-family: 'Arial Unicode MS';
font-size: 50px;
color:rgb(218, 168, 77);
}
.fifth{
position: absolute;
background-color:red;
top: 84%;
width: 99%;
height: 90px;
}
.fpwd1{
position: absolute;
top: -26%;
left: 1%;
font-family: 'Arial Unicode MS';
color: white;
font-size: 50px;
}
.fpwd2{
position: absolute;
top: -26%;
left: 17%;
font-family: 'Arial Unicode MS';
font-size: 50px;
color:rgb(240, 183, 183);
}
</style>
</head>
<body>
<div class="first">
<h1 class="rec1">REC</h1>
<h1 class="rec2">RECOMMENDATION</h1>
</div>
<div class="second">
<h1 class="pr1">PR</h1>
<h1 class="pr2">PROPOSED RECOMMENDATION</h1>
</div>
<div class="third">
<h1 class="cr1">CR</h1>
<h1 class="cr2">CANDIDATE RECOMMENDATION</h1>
</div>
<div class="fourth">
<h1 class="wd1">WD</h1>
<h1 class="wd2">WORKING DRAFT</h1>
</div>
<div class="fifth">
<h1 class="fpwd1">FPWD</h1>
<h1 class="fpwd2">FIRST PUBLIC WORKING DRAFT</h1>
</div>
</body>
</html>
#3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Document</title>

<style>
body{
background-color: rgb(217, 226, 243);
}
.rocket{
top: 5%;
position: absolute;
width: 99%;
height: 90px;
}
.in{
position: absolute;
top: -26%;
left: 25%;
font-family: 'Arial light';
font-size: 100px;
}
.dot{
position: absolute;
top: 30%;
left: 56%;
font-family: 'Arial';
color: rgba(141, 139, 139, 0.973);
font-size: 70px;
}
.learn{
position: absolute;
font-size: 28.5px;
font-family: 'Yu Gothic UI';
top: 129%;
left: 25%;
}
.time{
position: absolute;
top: 50%;
}
.logo1{
position: relative;
width: 35%;
height: 35%;
left: 35%;
}
.respect{
position: absolute;
top: 90%;
left: 37%;
font-family: 'Calibri';
color: rgb(81, 81, 145);
}
.blah{
position: absolute;
top: 110%;
left: 25%;
font-size: 18px;
font-family: 'Arial';
color: rgb(81, 81, 145);
text-align: center;
}
.foot{
position: absolute;
top: 50%;
left: 45%;
}
.logo2{
position: relative;
width: 35%;
height: 35%;
}
.guides{
position: absolute;
top: 90%;
font-family: 'Calibri';
color: rgb(81, 81, 145);
}
.clear{
position: absolute;
top: 110%;
left: -15%;
font-size: 18px;
font-family: 'Arial';
color: rgb(81, 81, 145);
text-align: center;
}
.code{
position: absolute;
top: 53%;
left: 75%;
}
.ready{
position: relative;
width: 67%;
height: 67%;
}
.end{
position: absolute;
top: 93%;
left: 2%;
font-family: 'Calibri';
color: rgb(81, 81, 145);
}
.real{
position: absolute;
top: 115%;
left: -15%;
font-size: 18px;
font-family: 'Arial';
color: rgb(81, 81, 145);
text-align: center;
}
</style>
</head>
<body>
<div class="rocket">
<h1 class="in">inarocket</h1>
<h1 class="dot">.com</h1>
<p class="learn">Learn front-end development at <i> rocket spee
d</i></p>
</div>
<div class="time">
<img class="logo1" src="time.webp" alt="">
<h3 class="respect">We respect your time</h3>
<p class="blah">No more blah blah videos. Just straight to <br>
the point sides with relevant information.</p>
</div>
<div class="foot">
<img class="logo2" src="step.webp" alt="">
<h3 class="guides">Step by step guides</h3>
<p class="clear">Clear and concise steps to build real use <br>
solutions. No missed points.</p>
</div>
<div class="code">
<img class="ready" src="end.png" alt="">
<h3 class="end">Ready to use code</h3>
<p class="real">Real code you can just copy and paste into your
real projects.</p>
</div>
</body>
</html>
#4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Document</title>
</head>

<style>
body{
background-color: green;
}
.point{
top: 5%;
left: 0%;
position: absolute;
background-color: white;
width: 100%;
height: 150px;
}
.green1{
position: absolute;
top: -55%;
left: 28%;
font-family: 'Calibri';
font-size: 105px;
}
.green2{
position: absolute;
top: -55%;
left: 55%;
color: rgb(1, 82, 1);
font-family: 'Calibri';
font-size: 105px;
}
.simply{
position: absolute;
top: 48%;
left: 28.5%;
font-family: 'Calibri';
font-size: 30px;
letter-spacing: 19px;
}
.bottom{
bottom: 0%;
left: 0%;
position: absolute;
background-color: white;
width: 100%;
height: 130px;
}
.site{
position: absolute;
top: -5%;
left: 37%;
font-family: 'Arial';
font-size: 30px;
}
.fb{
position: absolute;
width: 50px;
height: 50px;
left: 10%;
bottom: 10%;
}
.fbsite{
position: absolute;
left: 15%;
font-size: 20px;
font-family: 'Arial';
bottom: 5%;
}
.twitter{
position: absolute;
width: 50px;
height: 50px;
left: 55%;
bottom: 10%;
}
.twittersite{
position: absolute;
left: 60%;
font-size: 20px;
font-family: 'Arial';
bottom: 5%;
}
</style>
<body>
<div class="point">
<h1 class="green1">tutorials</h1>
<h1 class="green2">point</h1>
<p class="simply">SIMPLYEASYLEARNING</p>
</div>
<div class="bottom">
<h1 class="site">www.tutorialspoint.com</h1>
<img class="fb" src="facebook.png" alt="">
<p class="fbsite"><strong> https://www.facebook.com/tutorialspo
intindia </strong></p>

<img class="twitter" src="twitter.png" alt="">


<p class="twittersite"><strong> https://twitter.com/tutorialpoi
nt </strong></p>
</div>
</body>
</html>

You might also like