Recap of Web Engineering...

-

Well, one of my hobbies is to write HTML and CSS. So I thought to type some code and share that in this blog post.

 so here you go..

 CODE:
"ForEnjoyment.html" file

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="styleSheet.css">
    <title>Just for Fun</title>
</head>
<body>

   <div class="a">

       <div class="e">
           <div class="f">

           </div>  <div class="a">

           <div class="b">

               <div class="c">

                   <div class="d">

                   </div>

               </div>
           </div><div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
       </div>

       <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div><div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
   </div>
<div class="e">
    <div class="f">

    </div>  <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div><div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
   </div>
<div class="e">
    <div class="f">

    </div>  <div class="a">

       <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div><div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
   </div>
<div class="e">
    <div class="f">

    </div> <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
   </div>
<div class="e">
    <div class="f">

    </div> <div class="a">

       <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
   </div><div class="a">

       <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div>
       </div>
</div></div>
<div class="e">
    <div class="f">

    </div> <div class="a">

       <div class="b">

           <div class="c">

               <div class="d">

               </div>

           </div></div>
       </div></div>
</div></div>
<div class="e">
    <div class="f">

    </div>
</div>
</body>
</html>


styleSheet.css file code:
body{


    background-image: linear-gradient(to right, yellow,red, yellow);

}
.a{
    border: 10px solid black;
    box-shadow: 2px 3px 5px gray;
    border-radius: 25% 50% 25%;
    background-image: linear-gradient(to right, black , blue, gold);


}

.b{
    border:8px solid red;
    padding:20px;
    margin:40px;
    border-radius: 25% 50%;
    box-shadow: 2px 3px 5px gray;
    background-image: linear-gradient(to right, black , pink, yellow);
}

.c{
    border:10px solid blue;
    padding: 10px;
    box-shadow: 5px 5px 5px gray;
    border-radius: 50% 25%;
    background-color: cornflowerblue;
}

.d{
    border:9px solid olivedrab;
    padding: 40px;
    border-top-right-radius: 50%;
    box-shadow: 3px 3px 5px gray;
    background-color: gainsboro;
}

.e{
    border: 10px solid midnightblue;
    padding: 30px;
    margin: 20px;
    box-shadow: 2px 3px 5px gray;
    border-radius: 50% 25% 50%;
    background-color: yellowgreen;
}

.f{
    border:9px solid greenyellow;
    border-radius: 10% 30% 40% 50%;
    padding:60px;
    margin: 20px;
    box-shadow: 2px 3px 5px gray;
    background-color: mediumseagreen;
}






OUTPUT:

Happy coding :)

Comments

Post a Comment

Popular posts from this blog

A Survey of the Final Year University Students

-
Image
I don't know what should be the title of this blog post, but let's call it " A survey of the final year university students ". Pretty long title, huh? Okay, let me tell you about this survey... The story behind this thing: Well, one day I thought about writing a post on Facebook to ask people about their sentiments and reviews regarding the final year of university life, then another thought knocked my head to write a full blog post on this topic. Then I disseminated a google form for this purpose. The google form was saying: "Hello, final semester people! I thought to collect reviews of 2020 graduates specifically of NUST and other IT universities. I am planning to add these to my blog post. Please take a few seconds to fill this form, thank you." So that was a brief story behind this whole thing, Now let's have a look at the most awaited questions and the corresponding responses...  Question#1:  Do you feel like a better hu
Read more

1-Machine Learning : Start...

-
Image
John went to the cafeteria 10 times at 1:00 P.M. on 10 Fridays, each time the cafeteria was closed at that particular time. John decided not to go to cafe at 1:00 P.M. on Friday because the cafe will be closed.  But wait! How did John know that the cafe will  also be closed on next Friday at 1:00 P.M.??? Yes, you are absolutely right.  "John Learned from his Experience that the Task of going to the cafeteria at 1:00 P.M. on Fridays resulted in waste of time, since the cafe was closed on each Friday, so it will Perform the same on the next Friday." In the above scenario, John learned something so we can call it " John Learning ". Similarly, if we replace John with some sort of Machine, that can learn from the Experience or from the History about how the tasks were performed in the past given certain situation. Such that the Machine will perform the same if the same task happen again in near future. Then this will be called as Machine Learning. To mak
Read more

Data Engineering Tools

-
Image
   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software related concepts, let me know in th
Read more

Habits to adopt in the freshman year

-
Image
We are what we repeatedly do. Excellence, then, is not an act but a habit. ~Aristotle Have you ever noticed? When you were a kid, your parents used to correct you all the time, whenever you did some mistake. Why did they do so? Because at that time you were growing at the conscience and the sub-conscience level. Your mind was setting some patterns at that time. And today, you are mostly acting out of those patterns. Your parents want great patterns for you, that's why they used to scold you at an early age. The patterns set at that time is what you repeatedly do and that is what we call, "the habit".  Similarly, when you are a fresher you could adopt certain habits that could make or break you in the long run. Every one of us wants to have constructive habits. so here are some habits that you could adopt as a fresher in order to function well in coming years... Habits to Have 1. Googling Search on google for difficult and different concepts. Make it your h
Read more

An Interview with Pakistani Data Scientist : Dr. Zeeshan Ul Hassan Usmani

-
Image
Dr. Zeeshan-ul-Hassan Usmani, the name known for Data Science, Predictify me, Eisenhower fellowship  and most importantly motivation for many of the students. He is the Author of book like  (C++) ++سی/سی ,  Bit Coin Block Chain aur Crypto Currency بٹ کوائن، بلاک چین اور کرپٹو کرنسی  and many other, you can visit them here . Today "Mainly: The Software Engineering Blog" asked him some of the questions, as an interview and we are very glad that he gave his precious time to answer them. It was kinda "Remote Interview"... not the traditional one.. The Interview Question:  How can you describe " Dr. Zeeshan ul Hassan Usmani " ? ANSWER: I am a shameless idealist. We are all idealists at some stage of our lives but then it fades away and we live as a mediocre. I don’t want it to fade away. I remind myself almost every day that I need to make my today better than my yesterday, and the challenge is keep getting harder J . We only need to co
Read more

UI / UX Designs

-
Image
Is there any website or an application that you enjoyed to use ? If I ask you why you like this particular application then most of you would say that it is fluent, it's easy to use or the theme is so soothing.  So what is behind all these user friendly themes and designs ? The answer is, UI and UX designs. UI stands for User Interface while UX is used for User Experience. In today's world it is important to provide user friendly interface. Your application must be liked by everyone to the extent that they don't want to close that tab.  Now lets dig deep into UI and UX designs.... UI vs UX designs.. The first thing is that UI designs focus on the interface or the front end, the application is providing to the user. It has to deal with beauty. How beautiful, attractive and good-looking is your application; determines its User Interface. While UX design deals with the experience of the user. Whether the user feels comfortable while using your application
Read more

PHP chess board : how to make ?

-
Image
As we have learned much of the basics of  HTML and CSS . Let us now learn how can we make our web applications more user friendly, flexible and versatile, using php . Today we will see how to make a chess board using php in collaboration with HTML and CSS .  So, Let's start: BASIC php SYNTAX: Starting Closing Tags: <?php ?> Php code must be written in these tags. Variables:              Start with "$" sign e.g. $num=3;               ; is really important to put after every statement. Functions:              Functions start with the keyword "function". E.g. function power(){} Print:             echo "printing by using echo";             echo ("printing by using echo");             print "printing by using print";             print ("echo "printing by using print"); CODE: <!DOCTYPE html> <html> <
Read more

Applications of Data Engineering

-
Image
In a previous blog post about data engineering, we went through several many concepts related to data engineering such as data modeling, and then we went through different types of databases, for example, relational databases and we also got a glimpse of relational as well as NoSQL databases. And in today's blog post we will be writing about data engineer applications. Which are basically the use cases of data engineering 1st let's see what data engineering applications mean; so basically when we have data and we have engineered it then there are several things that we can do with that data and these things that we can do with processed data are the use cases of the data engineering. For example: If we have filled our containers with the data then it's not of any good use if it is not clean and well-formed. If your data is well-formed and if there are no logical mistakes, missing values, and garbage then we can easily perform the use cases and applications of data enginee
Read more

Web Applications

-
Image
When did you open your Facebook last time? Have you connected with other people on Linked In? If not then, you might have sent an email... What am I talking about? Image Source That's right! I am talking about Web applications . Web applications are the applications that run over the web or an Internet. There are some differences between website and web applications. Difference between Websites and Web applications.. The main differences between websites and web applications are as under: Websites: Provide information as a static file. Not very much interactive. Don't allow the user to do transactions. For example: news feeds, blogs, images etc. Web applications: Provide dynamic data. Interactive rather than just informative. Allow the user to do transactions. For example: bidding sites, on-line shopping sites, mailing sites, facebook, Twitter and Wikipedia etc. How do they work? On an abstract and simple level, The client(web browser
Read more