#line1

[codingquill]

Day 2 - 100 Days CSS Challenge

Welcome to day 2 of 100 days of css challenge, where we will be together getting a given image result into reality by code.

We already know the drill since we did the first challenge, now let's get right into the different steps:

First step : Screenshot the image and get its color palette

No crazy color palette here, we only have two colors

White

This shade of green: #3FAF82

To make things more organized and get used to coding in an organized way, even if not doing it here wouldn't make any difference because we only have two colors, in more complex projects we would have a lot, we will define our colors at the beginning of our CSS code (well, only the green in this case):

:root { --main-green: #3FAF82; }

And this is how we'll use it whenever we want:

color: var(--main-green);

Second step : Identify the image elements

What elements do I have?

Three lines: line1, line 2, and line 3. I'll add them to my HTML starter template, again I'll leave the frame and center there:

<div class="frame"> <div class="center"> <div class="line-1 line"></div> <div class="line-2 line"></div> <div class="line-3 line"></div> </div> </div>

Third step : Bring them to life with CSS

Applying the background color

Only one line should be changed in the CSS code already added to .frame class:

background: var(--main-green);

So this is what we have going on for now :

Creating the lines

Now let's create our lines; if you noticed I gave each one two classes line-number and then line. I'll use the line class to give them all the common properties they have such as the color, height, width, position, border-radius, and shadow. And then I'll use the line-number to move them wherever I want using the left, top, right, bottom properties of an absolutely positioned element in CSS.

Let's start by creating all of them:

.line { left: -45px; position: absolute; height: 9px; width: 100px; background: white; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); }

And just like this you'll see this in the browser:

You only see one line because the three are overlapping each other, and that's why we'll move each one of them exactly where we want using this:

.line-3 { top: 22px; } .line-1 { top: -22px; }

Now our static menu is ready:

Creating and analyzing the animations

As of observing, we can see that:

Line one goes down to line 2

Line three goes up to line 2

THEN line 2 disappears

THEN lines 1 and rotate to create the X

line-one-goes-down animation

This is my line-one code in the static version:

.line-1 { top: -22px; }

What I'm trying to do here is simply a movement translated by changing top from -22px to it becoming 0px:

@keyframes line-one-goes-down { 0% { top: -22px; } 100% { top: 0px; } }

line-three-goes-up animation

Again, I'm trying to go from top being 22px to it being 0px:

@keyframes line-three-goes-up { 0% { top: 22px; } 100% { top: 0px; } }

line-two-disappear animation

Making disappear simply means turning its opacity and width to 0:

@keyframes line-two-disappear { 0% { opacity: 1; width: 100px; } 100% { opacity: 0; width: 0px; } }

I'm gonna apply these animations and see what happens , before I create the rotation animations

.center.active .line-1 { animation: line-one-goes-down 0.5s forwards; } .center.active .line-2 { animation: line-two-disappear 0.5s forwards; } .center.active .line-3 { animation: line-three-goes-up 0.5s forwards; }

forwards means that the element will stay in the final state after the animation and not return to its original state.

This is what applying those three animations looks like:

Last but not least : let's Create the X

We only have to animations left for this: rotate-line-1 and rotate-line-2. Let's create them:

@keyframes rotate-line-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @keyframes rotate-line-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-45deg); } }

And that is my friends how we finished this challenge!

Happy coding, and see you tomorrow for Day 3!

[boiledegghole]

work in progress slugsign script for an art piece i'm planning to do that takes heavy inspiration from thuluth arabic calligraphy!! since this is mostly just going to be a "tech demo" attempt at replicating the techniques i see in those pieces, i'm just going to use the fairly straightforward tale of the tragedy of looks to the moon and five pebbles.

translation below!!

so far it translates to:

(line1)- [name] lttm [name] 5p stay (for) many-cycles [sentence end]. they question[enlightened] cycles[enlightened, religious connotation]

(line2)- they(their) many-question[enlightened] give cycle-kill[negative] [sentence end]. they give-take food-cycle-kill

(line3)- they cycle[enlightened]-predator [pause], question[enlightened] kill[enlightened] cycle [enlightened]

-

so in normal words, translated to Cool english:

(line1)- enlightened figures looks to the moon and five pebbles have been around for a long, long time. they ponder the endless cycles of reincarnation.

(line2)- their endless pondering gives the rain. they give and take the water.

(line3)- they hunt the cycles, and ponder how to end the cycles (this line is unfinished).

also, if youre curious about what the big reoccurring squares mean, here you go! a nice tutorial on the written slugsign "tone indicator ears"! (...sorry for the terrible quality on some of them)

[n25-amia]

[breath] [breath] [breath]

LINE1 input_command: string(mzk5_+_mfy5)-event_timer

LINE2 interact{speech}: (asset_mzk_canon)

[BEGINNING MESSAGE PROMPT]

Mizuki. Can you hear me? I am the Arbiter.

The wha…? Yes, I hear you!

[besedar]

beseda dne: žajbelj

etimologija: zdravilen (oz. zdrav). Prek stare visoke nemščine (salbeia) iz latinščine (salvia), ki obe pomenita žajbelj, latinska salvia je pa izpeljanka iz pridevnika salvus (zdrav(ilen)).

Liné1. "Salvia officinalis 01 by Line1". 2007. [Fotografija]. https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Salvia_officinalis_01_by_Line1.JPG/1200px-Salvia_officinalis_01_by_Line1.JPG?20071028205332

[licca-archive]

xddcc is a genius group name for the digital circus when i think of it

5 letters = pomni

x = jaX

d 1 = turn upside down then flip, add curve to bottom = ragatha + gangle, kinger

d 2 = mirror = bubble

c = caine

c = straighten the c, take the lines from x and then align them parallel. the straightened c connects from the end of line1 to the beginning of line2. results in a z = zooble

graphic ver:

[aerlevvsedi]

PImage backgroundImg; PImage bottomLeftImage; PImage bottomRightImage; int[] colors = { color(255, 0, 0), // Red color(255, 127, 0), // Orange color(255, 255, 0), // Yellow color(0, 255, 0), // Green color(0, 0, 255), // Blue color(139, 0, 255) // Purple }; int currentColorIndex = 0; String line1 = "HYDRATE"; String line2 = "YOURSELF"; float textSizeBase = 100; // Base size of the text float textSizeMultiplier = 1.0; // Multiplier to scale text size with canvas size float textY1, textY2; // Y-coordinates of the text lines

int numDroplets = 100; // Number of droplets Droplet[] droplets = new Droplet[numDroplets]; // Array to hold droplets float poolThreshold; // Y-coordinate threshold where droplets start pooling

void setup() { size(720, 600); // Set canvas size backgroundImg = loadImage("Background.jpg"); // Load background image bottomLeftImage = loadImage("Vaso.png"); // Load bottom left image bottomRightImage = loadImage("Garrafon.png"); // Load bottom right image

// Resize images to half their original height float scale = 0.5; bottomLeftImage.resize(int(bottomLeftImage.width * scale), int(bottomLeftImage.height * scale)); bottomRightImage.resize(int(bottomRightImage.width * scale), int(bottomRightImage.height * scale));

// Calculate text size based on canvas size textSize(textSizeBase * textSizeMultiplier);

// Calculate Y-coordinates for text lines textY1 = height / 2 - textSizeBase * textSizeMultiplier / 2; // Above the center textY2 = height / 2 + textSizeBase * textSizeMultiplier / 2; // Below the center

// Set text to bold PFont myFont = createFont("Arial", 48, true); // Create a bold Arial font with size 48 textFont(myFont);

// Initialize droplets for (int i = 0; i < numDroplets; i++) { droplets[i] = new Droplet(); }

// Set the pooling threshold to the bottom of the canvas poolThreshold = height; }

void draw() { // Display background image image(backgroundImg, 0, 0, width, height);

// Add gray-tinted overlay fill(50,100); // Semi-transparent gray fill rect(0, 0, width, height); // Draw a gray-tinted overlay

// Update and display droplets for (int i = 0; i < numDroplets; i++) { droplets[i].fall(); droplets[i].display(); }

// Display bottom left image image(bottomLeftImage, 20, height - bottomLeftImage.height - 20); // Adjust position as needed

// Display bottom right image image(bottomRightImage, width - bottomRightImage.width - 20, height - bottomRightImage.height - 20); // Adjust position as needed

// Blinking and cycling text color if (frameCount % 30 == 0) { // Change color every 30 frames (approximately every half second) currentColorIndex = (currentColorIndex + 1) % colors.length; }

// Display text with thick black outline and cycling colors textAlign(CENTER, CENTER); textSize(textSizeBase * textSizeMultiplier);

// Draw black outline stroke(0); strokeWeight(5); fill(colors[currentColorIndex]); text(line1, width / 2, textY1); text(line2, width / 2, textY2);

// Reset stroke for droplets noStroke(); }

// Class to represent a droplet class Droplet { float x, y; // Position of the droplet float speed; // Speed of the droplet boolean pooling; // Flag to indicate if droplet is pooling

Droplet() { reset(); // Initialize droplet position and speed }

// Method to update position void fall() { if (!pooling) { y += speed; if (y > poolThreshold) { // Start pooling at the threshold y = poolThreshold; // Set y to the threshold pooling = true; // Set pooling flag } } else { // If pooling, reset droplet above canvas after reaching the bottom y = random(-height, 0); pooling = false; // Reset pooling flag to restart falling } }

// Method to display the droplet void display() { fill(150, 200, 255); // Light blue color for water droplets ellipse(x, y, 5, 5); // Draw a small ellipse as the droplet }

// Method to reset droplet position and speed void reset() { x = random(width); // Random horizontal position y = random(-height, 0); // Start above the canvas speed = random(2, 6); // Random falling speed (double the previous speed range) pooling = false; // Initially not pooling } }

[didanawisgi]

Abstract

The relentless, protracted evolution of the SARS-CoV-2 virus imposes tremendous pressure on herd immunity and demands versatile adaptations by the human host genome to counter transcriptomic and epitranscriptomic alterations associated with a wide range of short- and long-term manifestations during acute infection and post-acute recovery, respectively. To promote viral replication during active infection and viral persistence, the SARS-CoV-2 envelope protein regulates host cell microenvironment including pH and ion concentrations to maintain a high oxidative environment that supports template switching, causing extensive mitochondrial damage and activation of pro-inflammatory cytokine signaling cascades. Oxidative stress and mitochondrial distress induce dynamic changes to both the host and viral RNA m6A methylome, and can trigger the derepression of long interspersed nuclear element 1 (LINE1), resulting in global hypomethylation, epigenetic changes, and genomic instability. The timely application of melatonin during early infection enhances host innate antiviral immune responses by preventing the formation of “viral factories” by nucleocapsid liquid-liquid phase separation that effectively blockades viral genome transcription and packaging, the disassembly of stress granules, and the sequestration of DEAD-box RNA helicases, including DDX3X, vital to immune signaling. Melatonin prevents membrane depolarization and protects cristae morphology to suppress glycolysis via antioxidant-dependent and -independent mechanisms. By restraining the derepression of LINE1 via multifaceted strategies, and maintaining the balance in m6A RNA modifications, melatonin could be the quintessential ancient molecule that significantly influences the outcome of the constant struggle between virus and host to gain transcriptomic and epitranscriptomic dominance over the host genome during acute infection and PASC.

[qocsuing]

Mastering the Break Line Command in AutoCAD

Mastering the Break Line Command in AutoCAD AutoCAD, a leading computer-aided design (CAD) software, offers a plethora of tools and commands to help professionals create precise and detailed technical drawings. One such command is the BREAKLINE command. This article aims to provide an overview of the BREAKLINE command and its applications in AutoCAD.To get more news about autocad break line, you can visit shine news official website.

Understanding the BREAKLINE Command The BREAKLINE command in AutoCAD is used to create a break line, a polyline that includes the break line symbol. This command is particularly useful when you want to represent a continuous line that has been “broken” or “cut” to save space. How to Use the BREAKLINE Command To use the BREAKLINE command, you need to specify the starting and ending points of the break line, and the location of the break symbol. By default, the break symbol is located in the middle of the line1. You can simply press the ENTER key on your keyboard at the end of the step to get the break symbol appear in the middle of the line.

While using the BREAKLINE command in AutoCAD, you have the following options you can make use of:

Block: This option allows you to indicate the block to be used as the break line symbol if you would like to use another symbol different from the default one. Size: This option allows you to indicate the size of the breakline symbol if you would like the symbol to be larger or smaller than what it is by default. Extension: This option allows you to indicate the length of the extension beyond selected end points. Creating Your Own Break Line Symbol It is also possible to create your own break line symbol using the Block option stated above. To do so, you would have to create the symbol as a drawing, save that drawing in the Express folder of the AutoCAD installation folder and use it when needed utilizing the Block option of the BREAKLINE command.

Conclusion The BREAKLINE command is a powerful tool in AutoCAD that helps professionals create precise and detailed plans. With the help of this command, you can bring your ideas to life and create designs that are accurate and efficient.

[mauryaschool123]

WELCOME TO THE PHRONTISTERY OF KNOWLEDGE

https://themauryaschool.com/images/icon/line1.png

The Maurya School functions on the prime principle of nurturing students on every important facet of life including moral values, problem solving and critical thinking to name a few. The sincere endeavour to strengthen the mentoring of not only students but also facilitators toward innovation and independence of thought is one among the many highlights of the school. In addition to the vision, ideology, etc. this website portrays all the features of the school, unfolding the dynamic l

WELCOME TO THE PHRONTISTERY OF KNOWLEDGE

https://themauryaschool.com/images/icon/line1.png

The Maurya School functions on the prime principle of nurturing students on every important facet of life including moral values, problem solving and critical thinking to name a few. The sincere endeavour to strengthen the mentoring of not only students but also facilitators toward innovation and independence of thought is one among the many highlights of the school. In addition to the vision, ideology, etc. this website portrays all the features of the school, unfolding the dynamic learning environment it offers to students.

earning environment it offers to students.

[jarviscodinghub]

CSCI-GA.3033-016 Multicore Processors Lab Assignment 2 solved

In this lab you will implement a method for solving a group of linear equations using OpenMP, MPI, and a mix of both.. What will your program do? Given a set of n equations with n unknowns (x1 to xn), your program will calculate the values of x1 to xn within an error margin of e%. The format of the input file is:  line1: #unknowns  line2: absolute relative error  Initial values for each…

[crimechannels]

By • Olalekan Fagbade JUST IN; President Tinubu's Minister reveals what causes collapse of National Grid, nationwide blackout Minister of Power, Adebayo Adelabu, has disclosed the cause of the nationwide blackout that happened in the early hours of Thursday. The minister said there was an explosion that led to a fire outbreak at Kainji/Jebba located in the North-central part of Nigeria. Adelabu in a series of tweets on X platform on Thursday said, “At 00:35Hrs this morning, Fire outbreak with explosion sound was observed on Kainji/Jebba 330kV line 2 (Cct K2J) blue phase CVT & Blue phase line Isolator of Kainji/Jebba 330kV line1 was observed burning. This led to sharp drops in frequency from 50.29Hz to 49.67 Hz at 0:35:06Hrs with Jebba generation loss of 356.63MW. He also gave assurance that the problem would be fixed saying, “We are on top of the situation and speedy restoration is in progress. The fire has been fully arrested and over half of the connections are now up and the rest will be fully restored in no time. My sincere appreciation to those who responded or expressed concern via different.” The Vanguard reported that the nation’s power supply dropped by 93.5 per cent to 273 megawatts, MW in the early hours Thursday. It plummeted from 4,182MW recorded on Monday, this week, following a complete system collapse, due to equipment failure or grid disturbance in the sector. Data obtained by the newspaper from Nigeria Electricity System Operator, the semi-autonomous arm of the Transmission Company of Nigeria, TCN, showed that Afam VI, Dadinkowa, Ibom Power, Jebba, Olorunsogo generated 0.70MW, 0.00MW, 32.90MW, 240MW and zero respectively. #PowerMinisterrevealswhatcausescollapseofNationalgrid

[gobodegoblin]

Data{

“Line1” : “Im thinking game developer or IT specialist”

}

print(Line1)

print(“Ligma :3”)

Would you notice it?

A-

What?

[abitmoredetail]

Graffiti at the Dundonald end of Wellesley station (2) #toronto #ttc #subway #line1 #wellesleystation #graffiti (at Wellesley station) https://www.instagram.com/p/CMdX5t3ArMj/?igshid=fwzcbtmmiz1l

[ramtinsnaps]

Swipe ⬅️ . . . . Gotcha 📸👋 #ttc #streetshots #streetphotography #streetscape #train #subway #tube #metro #métro #subwaystation #framed #framedshots #picture #pic #line1 #toronto #torontosubway #torontottc #yyzphotographer #yyz https://www.instagram.com/p/ChGfZsPM_16/?igshid=NGJjMDIxMWI=

[hermanwalraet]

🚋 METRO TRAIN M7 CAF MIVB-STIB 📸BRUSSELS BELGIUM 🗓️ 2021/05/26 #photographedbyhermanwalraet© #hewapic© #mivb #stib #caf #m7 #brussels #test #train #testtrain #metro #metroline #lines #line1 #railway #rail #travelphotography #traveltheworld #travelgram #instatravel #travel #photography #publictransport #hewapic #photo #foto #fotografia #fotografie #openbaarvervoer (bij Brussels, Belgium) https://www.instagram.com/p/Ck57niPo-NC/?igshid=NGJjMDIxMWI=

[tramshorts]

View this post on Instagram

A post shared by Tram Shorts (@tramshorts)

Luovien Ihmisten Tampere - Tampere for creative people! @tampere @treratikka Tampereen ratikat. #tramsofinstagram #tampesteri #line1 #1 (paikassa Tampereen yliopistollinen sairaala Tays) https://www.instagram.com/p/CgeC-AXDDOL/?igshid=NGJjMDIxMWI=