Grade 8: Lesson 2 dynamic web elements : PhotographyWebsite

 1-Open w3schools tryit editor by this link:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

then copy  this code then paste it in w3schools tryit editor:


<html>


<head>


        <title> Photography WebSite </title>


        <link rel="stylesheet" href="style.css">


<style>


* {


    margin: 0;


    padding: 0;


}




.main {


    /* height: 1000px; */


    width: 75%;


    margin: auto;


    font-family:'Trebuchet MS';


}






.header {


    height: 200px;


    background: linear-gradient(to right, #654ea3, #eaafc8);


    color: white;


    text-align: center; 


    border-radius: 5px;


}




.header h2 {


    font-size: 32px;


    font-weight: lighter;


    padding: 20px;


}




.header h1 {


    font-size: 40px;  


}




.preview_container {


    


    margin-top: 20px;


    height: 600px;


    padding: 5px;


    box-shadow: 0px 5px 15px -2px rgba(0,0,0,0.75);


}




.preview_container img {


    width: 100%;


    height: 90%;


}




.preview_container h1 {


    text-align: center;


    padding-top: 10px;


    padding-bottom: 10px;


    margin: auto;


}






.gallery_container {


    margin-top: 40px;


    display: flex;


    overflow-x: auto;


    margin-bottom: 30px;


}






.gallery_container img {


    padding: 3px;


    min-width: 20%;


    height: 180px;


}



</style>


</head>


<body>




    <div class="main">




        <div class="header">            


            <h2> Welcome To My </h2>


            <h1> <strong> IMAGE GALLERY </strong></h1>


        </div>


        <div class="preview_container">


            <h1> MY PHOTO GALLERY </h1>


            <img src="https://media.istockphoto.com/id/1145422105/fr/photo/vue-a%C3%A9rienne-de-la-tour-eiffel-paris.webp?s=1024x1024&w=is&k=20&c=vVDxjr9gS89JvD5hWoT-zz2j3fzPIMiqwAxCA0IwFVg=" alt="No Image Selected" id="preview_image" >


        </div>




        <div class="gallery_container"  id="gallery_image" >




        </div>


    


    </div>


    <script src="./script.js"></script>


</body>


</html>


Comments

Post a Comment

Popular posts from this blog

Grade 8 - Project term 2

Image
  Subject ICT Grade 8 Assessment Type Project (Rubric) Tool P5JS editor Teacher: Total Marks 30 Date given Week  5 Due Date: Week  6 Student Name Note: Students will do their project in the computer lab. Objective: Create an airplane using various shapes and variables to position objects to make them move. Materials: Computers with internet access. p5.js Web Editor Steps: 1. Introduction: Briefly introduce what your project is about. 2. Materials and Setup: Ensure each student has access to a computer with p5.js Web Editor open. Instruction : Open p5js editor    p5.js Web Editor Change the background colour to light blue with r=100, g=200, b=250 Add two ellipses for the body and cockpit of the plane at the center of the canvas.  Use appropriate colours without a border. move the cockpit of the plane at an appropriate position, reduce the y position by 20 pixels to move it upwards. Use a subtraction operator. Create two variables x_plane and y_plane at ...
Read more

Grade 9 - Mid-term Worksheet

Image
  Mid-term Worksheet Q1. Circle the correct answer for each of the following:                                         1-What is Node.js mainly used for? a-Building mobile  apps b-Writing frontend  code c--Server-side  programming d-Designing  graphics                        2-Which of the following is a common use case for Node.js? a-Data  analysis b-Building web  servers c-Creating  animations d-Game  development 3- Which method is typically used to send data from an HTML form to Node.js? a-GET b-POST c-PUT d-DELETE 4- What method is used to display data after form submission in Node.js? a-res.render() b- console.log() c- res.send() d-sendData() 5-What programming language is Node.js built on? a-Python b-JavaScript c-Ruby d-Java ...
Read more