Exercise 007: CSS Layout and Web Page Concept (Web Programming)

CODE FOR HTML;

<!DOCTYPE html>

<html>

<head>

<title> CSS 3 Rows 3 Columns </title>

</head>

<body>

<h1 style="font-family: Consolas;"> Digital Artworks </h1>

<h4 style="font-family: Consolas; margin-top: 30px;"> <i> Created by: Jillian Marren Dela Cruz </i> </h4>

</div>

<a href="#blameless"> Blameless </a>

</div>

<a href="#depression_section"> Depression </a>

</div>

<a href="#selfworth_section"> Self Worth </a>

</div>

<a href="#lackofselfconfidence_section"> Lack of Self Confidence </a>

</div>

<a href="#prayer_section"> Prayer </a>

</div>

<a href="https://www.instagram.com/intheprocess_jillian/?hl=en" target="https://www.instagram.com/intheprocess_jillian/?hl=en"> My Instagram </a>

</div>

</div>

<h1 class="font1"> In-the-Process Artworks </h1>

<h4 style="margin-top: -12px; margin-left: 15px;"> Please appreciate my artworks i know i'm not good at drawing. This artworks is all about what people feel when no one their for us and some of my artworks is what i feel right now because of pandemic especially the Lack of confidence and Self worth. </h4>

</a>

<h2 class="fonttwo"> Blameless </h2>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> Blameless, His family and friends blame her for what she didn't do, especially saying that she was always stupid when she did little wrong done, </h5>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> she was also thinking of committing suicide. They think that's okay because that girl not opposed to them. Even if they are already abusing its emotion and patience. </h5>

</a>

<h2 class="fonttwo"> Depression </h2>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> A girl with a depression she occasionally feels empty especially at midnight until sun comes up, feels like always tired means a permanent state of exhaustion </h5>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> that sleep doesn't fix. She needs help just one person who can listen to voice out her feelings. She feels alone and no one loves her. </h5>

</a>

<h2 class="fonttwo"> Self Worth </h2>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> Self Worth it comes from being yourself and being proud of who you are. Accept yourself, love yourself and moving forward. </h5>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 60px;"> Don't cry over the past, it's gone. Don't stress about the future, it hasn't arrived. Live in the present and make it Beautiful. </h5>

</a>

<h2 class="fonttwo"> Lack of Self Confidence </h2>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> She consistently afraid about making mistakes or letting other people down. Negative thinking in general is linked to low self-worth and low self-esteem. She immediately leads what is happening even though she has not yet done so. </h5>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> She may not have any desire to hold a conversation or talk about her life because it will only reinforce the depression and anxiety she already experiencing. Also she may struggle to help or empathize with someone else’s problems because she are too preoccupied with her own. </h5>

</a>

<h2 class="fonttwo"> Prayer </h2>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> Prayer is the best solution to all of these because only the Lord can heal our feelings, pain and sorrow. He can twist all the situations where we are. He will make us feel the love that comes from him that no one else can give or cannot be filled by others. If you are in God, you will never feel alone because when you are in the Lord you just feel joy in your heart and you will feel the excite to praise him. I know we cannot see him but we can feel him and God is with us. </h5>

<h5 style="margin-left: 17px; text-align: justify; text-indent: 50px;"> When paul said in Philippians 4:6 "Do not be anxious about anything, but in every situation, by prayer and petition, with thanksgiving, present your requests to God." and Matthew said in Matthew 11:28 “Come to me, all you who are weary and burdened, and I will give you rest." Once you have prayed and have asked God for His help, let go of it and leave it in God's hands. The verse explains that the peace of God will guard our hearts and minds in Christ Jesus. </h5>

</div>

</div>

</body>

</html>

CODE FOR CSS;

* {

box-sizing: border-box;

}

body, html {

height: 100%;

min-height: 100vh;

margin: 0;

position: relative;

font-family: "Consolas";

background-repeat: no-repeat;

padding-bottom: 30px;

}

.header {

padding: 20px;

text-align: center;

background: #fc8c84;

color: white;

font-size: 30px;

}

.header-text {

text-align: center;

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

font-size: 30px

}

.navbar {

overflow: hidden;

background-color: #f1b3f5;

}

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 15px 17px;

text-decoration: none;

}

.subnav {

float: left;

overflow: hidden;

}

.subnav .subnavbtn {

font-size: 14px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: lilac;

font-family: Consolas;

margin: 0;

}

.navbar a:hover, .subnav:hover .subnavbtn {

background-color: #f1b3f5;

}

.subnav:hover .subnav-content {

display: block;

}

.footer {

border: 10px solid white;

background-color: #f1b3f5;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 10px;

}

hr.new1 {

border: 1px dashed #cbc6dc;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

.column1 {

float: left;

width: 15%;

background-color: #f1b3f5;

height: 2050px;

}

.column2 {

border: 10px solid #ffffff;

float: left;

width: 70%;

padding-left: 25px;

padding-right: 25px;

}

.column3 {

float: right;

width: 15%;

background-color: #f1b3f5;

height: 2050px;

}

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

h1.font1 {

font-family: Arial Black;

}

h2.fonttwo {

font-family: Arial Black;

}

img.photo1 {

border-radius: 50%;

border: 2px solid #cbc6dc;

}

Web Programming

Search This Blog

Exercise 007: CSS Layout and Web Page Concept (Web Programming)

Comments

Post a Comment

Popular posts from this blog

Exercise 10: Animation (Finals Web Prog)

Exercise 12-14: Responsive Web Design, Tutorial Web Page and Activities Compilation

Image